Carousel Slideshow
 

A question was posted in the Dynamic Drive forum about this slideshow script. I liked the effect, but hated the scripting...so I reverse engineered it.Yes, it's a whopping big closure! :) Any other comments/suggestions?

Very interesting! Can you quickly list the improvements or how it differs from the original version? I see that multiple copies of the script can be run on the same page...

That is really cool man. Good Job. :thumbsup:

Basscyst

The biggest difference is the affect on the global-namespace. It uses no global variables, and only the one global function. This makes it absurdly unlikely that it will conflict with any other scripts on a page.

Mine doesn't use the body or window onload events. Again, making it unlikely to clash with other scripts and making installation easier.

This one let's you have a carousel with an arbitrary number of side; the DD script only allows 4/6/8/12 sides.

In mine, I've tried to precompute as much as possible. The movement is done with a very fast update of the images' rights/lefts and widths, using values stored an array. The DD script does the same expensive floating point calcutions over and over, every 50ms, and constantly changes the src's of it's image element (necessitating more extensive DOM updates).

What else did I do? Hmm...

Definitely sounds like a step up from the original script. :) I'll test it some more, though do you have any objections to this script being possbily posted on Dynamic Drive? If not, please let me know the credits (ie: name, site URL) you wish to be displayed alongside script.

Thanks,

I appreciate the offer of testing -- I whipped it out this morning in spare moments and have little doubt that a bug or two has escaped me.

I'm fine with it finding a home at Dynamic Drive. I compartmentalize my web presence, so credit to Harry Armadillo is enough and perhaps a link to the forums here.

Input on instructions/commenting would be highly useful. With my brain stuffed with the script's innermost secrets, its hard for me grasp what other people don't know but should. Take the previous sentence as an example of my explanation deficits....

Thanks for the permission. It probably will be two weeks before the script is featured on Dynamic Drive. I'll test it out in the meantime, and if you do make any changes to the script on your own (ie: bug fixes), please simply edit the above script to include this change.

Thanks!

Nice script!
 

There's an invalid argument error in IE. grey is different than gray unlike in FF. Actually, IE is inconsistent as lightgrey is correct and lightgray is wrong.
BTW, Is there any special reason why you used document.write instead of createElement?

Grey, gray, bah! That's what I get for trying to save the extra tenth of a second a hex color would have needed. :( Thanks.

I used document.write so that the carousel div would be a child of whatever element is desired, without needing the person building the page to specify the parent. I could have used a placeholder div like the original, but wanted to make installation as simple as possible -- insert the main script in the head, insert a function call where you want the slideshow. No need to worry about editing around onload conflicts, no questions about which arguments apply to which slideshow when using multiple

Edit :: Thinking about the 'sticking the function call where ever you want' business made me realize something - it didn't fit very well into narrow columns. So...changes. Carousel slideshow, now featuring vertical action!

Vertical option- very nice! BTW, what's the difference between "sides" and "steps" in the exposed parameters list?

I see this script runs in Opera 7 as well, which is great. Efficiency wise, Firefox seems to render it the slowest, especially with the 3 slideshows you have running at the same time.

Yeah, it's odd how different browsers are faster at one thing, but slower at another. meh.

Sides controls the number of sides on the carousel. Four for a cube, etc. Odd numbers work, but look a little funny since I can't do perspective and the rotational axis isn't obvious/visible (something to work on). Since only the front of the carousel is shown, there will be sides/2 images on screen at a time.

Steps set how many intermediate steps are used in moving a picture one position forward. Say we had steps:16, then if picture-A is at the front, there would be 16 repositionings before its neighbor picture-B is in front. Too few steps will make the movement jerky, but will save processor power. More steps is more taxing, but smoother. Way too many steps will give a vibrating sort of look, due to rounding error and the finite size of a pixel.

I like steps*sides of around 100-140. Gives a decent balance of smoothness and processing load.

At the moment, speed doesn't take into account the number of steps (more steps will slow down the overall spin). I'm working on making the speed more independent; still trying to find a scheme I like.

I've just tested this script some more. Some feedback:

1) Does the links[] array work at the moment? I tried inputting URLs, but the images remain unlinked.

2) In IE, users who have JS debugging turned on and misconfigure the script will be bombarded with errors. I'd recommend perhaps adding a line like:

window.onerror=function(){if (document.all){window.status='An error has occured'; return true}}

to the top of the script.

3) It's difficult to get the slideshow to show the images in their original, undistorted dimension without a lot of trial and error with the width/height parameters. I think a good idea may be to just ask for the true dimension of the images (making the assumption each one is the same size), and then based on sides and direction, display an image slideshow with the ideal dimensions.

I'm writing up the page for this script on DD, though may wait for the next revision when some of the above are solved before actually publishing it.

Thanks!

The link array ought be working...are you getting any error messages? The examples in the last update didn't have links included, did you stick some in for yourself? I've added google links to the pair of cube examples, and also added the link-indicating hand/pointer mouse-cursor.

I'm loath to mask all errors -- it encourages the amateur webmaster to serve broken scripts and pages. Instead I've added checking for parameter validity and substitution of a default for an illegal value. The upper-left cube is now fed almost entirely bogus parameters, but still functions. Let me know if this is good enough -- I could still add some debuggin help or, eventually, the error masking.

I've added a new parameter/mode. size_mode:'image' makes the height and width parameters apply to the image (the overall heigh/width are then derived); size_mode:'carousel' (or any other non 'image' value) makes the height/width apply to the container div. The carousel with DynamicDrive images is done with size_mode:'image' as is one of the vertical wheels on the right.

Too bad all that content is unavailable to clients with disabled JS...

Sorry for the delay, been very busy. I'll run some tests with the updated script early next week, and post more feedback if needed.

No worries. Free and fun don't impose deadlines.

I've gone ahead and posted the script on DD: http://www.dynamicdrive.com/dynamici.../carousel2.htm :) One thing I noticed is that in Opera 7, a vertical slideshow creates a huge gap at the bottom of the page; not sure about Opera 8 yet. Apart from that, looks great!

New window target in carousel slideshow
 

I tried out the Carousel Slide show here:

http://blog.fullscalecommerce.com/

Wondering how to make the links in the slide show open up in a new window.

I actually have all the slideshow code here:

http://blog.fullscalecommerce.com/portfolio.cfm and I "cfinclude" it into the main page. I tried a BASE target= in the head section but to no avail.

Thank you

I've been using the original carousel for quite some time now. This is such a millennium improvement.

One thing that I've always wanted was a way for you to be able
to click the link and it would pop you out of a frame. I've tried
adding the ' target="_top" ' parameter, but it just stays in the frame.

Maybe in the next revision. Just wanted to say wicked improvement. :thumbsup:

Yeah, I wondered how long it would take before people wanted the links in new windows... :)

How much control do you want (versus how much it takes to set up the show)? Do you want the links to all open in in separate new windows? To be opened in single pop-up, where clicking a another link replaces the pop-up page? Mix-and-match?

Tell me your desires, then give me a couple days, and I'll (try to) make it happen.

I don't mind. I'll take the one where clicking another link replaces the pop-up page, if you can make it happen. Hell, why not throw everything in? :D :thumbsup:

www.badh.net

Okay, new optional parameter lnk_base:"". lnk_base can be one of the standard link-targets '_self', '_parent', '_top' and '_blank', or it can be a frame/iframe path.name prepended with an underscore (so _pics for the in-page iframe named pics or _top.foo for a frame owned by the top frameset), or the name of a pop-up window. If no lnk_base is specified, a window named 'new' is used by default.

new optional parameter lnk_targets:[]. If you don't want all the image links to have the same target, individual targets can be assigned. A target here overrides the lnk_base target (if present). If an image's entry in the lnk_targets array is blank or missing, lnk_base or the default is used.

new optional parameter lnk_attr:[] Here you can specify the attributes to use for an image's pop-up window. If none are present, a regular sized window with all the toolbars, menus, etc. is used.

In addition, the bug where opera sometime had huge gaps below or left of the document's body has been fixed.

Sample page with updated carousel() function and a pair of examples to show how the new parameters in action:

Harry Armadillo! You get the friggin Nobel Peace Prize for 2k5. I can't believe you did it... Thank you very much...

I Salute you Sir!

Hi:
For the updated code, I noticed the slideshow no longer pauses when the mouse is over it- any reason why this was removed? Personally I think it's a useful feature. :)

That would be the fault of my spam-filters. :) When I post code, it gets sent out fine. But if I edit the post and am not paying attention, my spam-filters will chew up the code as it loads into the edit window and spit garbage back into the forums. Someday, when I'm not lazy, I'll reprogram that nonsense out.

Fixed/replaced with good code!

Wow thanks for the quick fix. You've inspired me to go ahead and update the script on DD for it just as fast as well: http://www.dynamicdrive.com/dynamici.../carousel2.htm

If only I was this responsive with real work. :D

Need help please :-) simple for some, nightmare for me.
 

Hi, could someone give me a hint on how to correct this so it shows in the middle and at full banner size.

I just love effects, but cannot quiet get this one just where I like it.

http://traffic-cells.com/P1/launcha2.htm

as you can see its only showing like half the banner etc.

All I want is for it to show the full banner under the top table there all the rest works fine :-)

all help much appreciated and take it easy with code talk, I'm not that well in understanding the language.

Thanks
Rad2

Where you havechange it toAnd down a little lower,should become

???
 

okay i'm kinda new at this whole java script thing... but i've been trying to do the carousel slideshow and it comes up blank.. here is what i paste ....please let me know what and where is it wrong...thank you...

<script type='text/javascript'>
function carousel(params){
if(!(params.width>0&&isFinite(params.width)))params.width=100;
if(!(params.height>0&&isFinite(params.height)))params.height=100;
if(!(params.sides>2&&isFinite(params.sides)))params.sides=4;
if(!(params.steps>0&&params.steps<100&&isFinite(params.steps)))params.steps=20;
if(!(params.speed>0&&isFinite(params.speed)))params.speed=8;
if(!(params.image_border_width>=0&&isFinite(params.image_border_width)))params.image_border_width=0;
if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();

document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[\r\n\t ]+/g,'_')+"'></div>");
var cdiv=document.getElementById(params.id.replace(/[\r\n\t ]+/g,'_'))
cdiv.style.width=params.width+'px';
cdiv.style.height=params.height+'px';
cdiv.style.border=params.border;
cdiv.style.position='relative';
cdiv.style.overflow='hidden';
cdiv.title=params.id;

var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
interval=isNaN(interval)?200:interval;
var img_position=[],images=[],img_dimension=[];
var img_index=params.images.length+1,img_index_cap=2*params.images.length;
var faces=Math.ceil(params.sides/2), dimension, direction;

function init(){
if(params.direction=="left" || params.direction=="right"){
direction=params.direction;
dimension="width";
}
else if(params.direction=="top" || params.direction=="bottom"){
direction=params.direction;
dimension="height";
}
else {
direction="left";
dimension="width";
}
cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
var img=new Image();
img.style.position='absolute';
img.style[direction]='10000px';
img.style.width=params.width-2*params.image_border_width+'px';
img.style.height=params.height-2*params.image_border_width+'px';
img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;

for(var i=0;i<params.images.length;i++){
images[i]=img.cloneNode(true);
images[i].src=params.images[i];
if(params.links&&params.links[i]&&params.links[i]!=''){
images[i].onclick=new Function("window.location='"+params.links[i]+"'");
images[i].style.cursor=document.all?'hand':'pointer';
}
if(params.titles&&params.titles[i]&&params.titles[i]!='')
images[i].title=params.titles[i];
images[i+params.images.length]=images[i];
if(params.images.length==faces)
images[i+2*params.images.length]=images[i];
cdiv.appendChild(images[i]);
}

var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
var pi_piece=2*Math.PI/params.steps/params.sides;
for(i=0;i<=params.steps*faces;i++){
img_dimension[i]=face_size*Math.sin(pi_piece*i);
img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':'10000px';
img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
}
}
init();

cdiv.rotate = function(){
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
if(!spinning) return;
if(++counter>=params.steps){
counter=0;
if(++img_index>=img_index_cap)
img_index=params.images.length;
}
images[img_index-faces].style[direction]='20000px';
for(var i=faces-1;i>=0;i--){
images[img_index-i].style[direction]=img_position[counter+i*params.steps];
images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
}
}
cdiv.onmouseover=function(){
spinning=false;
}
cdiv.onmouseout=function(){
spinning=true;
}
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',200);
}
</script>
</head><body>
<div id=right_bar style='width:90px;float:right;'>
<h4>Vertical!</h4>
<script type='text/javascript'>
carousel({id:'carousel_0',
border:'',
size_mode:'image',
width:75,
height:75,
sides:4,
steps:8,
speed:7,
direction:'top',
images:['http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_DSC00024.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0009.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0008.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0007.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0006.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0005.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0004.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0003.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0002.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0001.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_100_0055.jpg',
'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_34SA3409.jpg'],
links: [],
titles:[],
image_border_width:2,
image_border_color:'black'
});
</script></div>



i actually want it to go horizontal...if you can e-mail me or something for the exact script i would greatly appreciate it... c_porte79@yahoo.com...

oh btw....here is the site i'm trying to put the slideshow in....
http://www.peoplefromguam.com/user.asp?id=22859

The stuff in your first post worked fine for me. Changing from vertical to horizontal is simply a matter of changing

direction:'top',

to

direction:'left',

The problem is probably with your page. I was going to looking at your code, but when your page started popping up those annoying alert boxes, I killed the window. I also tried running it through W3's validator - here - but that failed.

I suggest posting in the html forum, get some help getting the page working working/valid, then try the carousel again.

im sorry...
 

okay ive removed the alet boxes.... pls take a look at it...

okay i fixed my page and tried to put the code again.. it just shows the word vertical on it.....

I looked at it, the error I see immediately isyou need to use just the image urls. LikeSeriously though, you need to fix the rest of your HTML. I got the validator to look at it here. Of the 247 errors it found, a good 100 or so are serious. I designed my slideshow to tolerate a lot, but you've got way too many problems on that page. Fix the HTML, then we can get the carousel working. If the validator's output isn't enough to help you, start a thread in the HTML/CSS forum.

IE blank image??
 

Harry, or whomever can help.

I saw your image carousel on DD and thought I would give it a stab as my thumbnail slideshow. Works great in firefox - but everyones favorite IE decides to insert a blank image at the end of the carousel (very annoying)

How do I get rid of it??

Also wondered if you could give me some help sizing the images linked to the iframe. I want them all to come out 100% x 100% of the iframe. Any suggestions??

Thanks

Andy

The blank image in IE is most likely from a typo in setting up the images. If you have a link to your page, I'll peek at the source and see if there's a problem.

Getting linked images to expand to the size of your iframe is simple (if tedious). Give each full-sized image its own basic page, setting the width and height in the <img src="fullsize.jpg"....> tag to match your iframe. Then link to those pages, instead of directly linking to the images.

@Harry: BIG RESPECT :thumbsup:

I really love that javascript. Wonderful programming. I just added it to my page:

http://www.4fr.de/vids/index.html

What do I have to change if I want it without the "Carousel" effect? Meaning that it just moves the images (not changing the imagesize) inside the given space?

Thanks for your inovations Harry. I love them!

Thanks for the compliments, Nils. :)

The script is pretty specialized around the carousel-effect; it would require significant rewriting to convert it into a conveyer-belt slideshow. I've thought about making other versions (conveyer-belt, book-flip, fade-in, etc), but I'm currently buried in a PHP/MySQL project. Perhaps in a couple weeks...

In the meantime, this is good conveyer belt script. Heck, I've even used it!

thanks pal. I already included that one. Wonderful work!

All I need now is a perloader for my WMV files. Any suggestions ?

http://www.4fr.de/vids/videos.html

Would be a really big help.

I tried to convert them to SWF but the file sizes gets really big and the quality worse....so I need some kind of preloader infront of the WMV inside the iframe

Thanks in Advance

Nils