Carousel Slideshow [Archive] - CodingForums.com

Harry Armadillo

05-10-2005, 07:14 PM

A question was posted in the Dynamic Drive forum about this slideshow script (http://www.dynamicdrive.com/dynamicindex14/carousel.htm). I liked the effect, but hated the scripting...so I reverse engineered it.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Carousel Slideshow</title>
<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>More steps (affects speed slightly)
<script type='text/javascript'>
carousel({id:'carousel_0',
border:'',
size_mode:'image',
width:75,
height:75,
sides:18,
steps:8,
speed:7,
direction:'top',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon13.gif',
'http://www.codingforums.com/images/icons/icon12.gif',
'http://www.codingforums.com/images/icons/icon11.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: [],
titles:[],
image_border_width:2,
image_border_color:'black'
});
</script></div>
<div id=right_pub style='width:90px;float:right;'>
<h4>Vertical!</h4>Less steps (affects speed slightly)
<script type='text/javascript'>
carousel({id:'carousel_5',
border:'',
size_mode:'carousel',
width:75,
height:430,
sides:18,
steps:4,
speed:7,
direction:'bottom',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon13.gif',
'http://www.codingforums.com/images/icons/icon12.gif',
'http://www.codingforums.com/images/icons/icon11.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: [],
titles:[],
image_border_width:2,
image_border_color:'black'
});
</script></div><div id='header' style='height:175;padding:10px;background-color:#eee;width:570px'><div style='float:left'>
<script type='text/javascript'>
carousel({id:null,
border:'',
size_mode:'image',
width:{},
height:'big',
sides:'several',
steps:8/0,
speed:'really fast',
direction:'whatever',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: ['http://www.google.com/search?q=happy',
'http://www.google.com/search?q=angry',
'http://www.google.com/search?q=sad',
'http://www.google.com/search?q=big+grin',
'http://www.google.com/search?q=look+here',
'http://www.google.com/search?q=bright+idea',
'http://www.google.com/search?q=caution',
'http://www.google.com/search?q=question',
'http://www.google.com/search?q=cool'],
titles:['Happy',
'Angry',
'Sad',
'Big Grin',
'Look Here',
'Bright Idea',
'Caution',
'Question',
'Cool!'],
image_border_width:1,
image_border_color:'red'
});
</script></div><div style='float:left'>
<script type='text/javascript'>
carousel({id:'carousel_2',
border:'',
size_mode:'carousel',
width:144,
height:100,
sides:4,
steps:20,
speed:8,
direction:'right',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: ['http://www.google.com/search?q=happy',
'http://www.google.com/search?q=angry',
'http://www.google.com/search?q=sad',
'http://www.google.com/search?q=big+grin',
'http://www.google.com/search?q=look+here',
'http://www.google.com/search?q=bright+idea',
'http://www.google.com/search?q=caution',
'http://www.google.com/search?q=question',
'http://www.google.com/search?q=cool'],
titles:['Happy',
'Angry',
'Sad',
'Big Grin',
'Look Here',
'Bright Idea',
'Caution',
'Question',
'Cool!'],
image_border_width:1,
image_border_color:'red'
});
</script></div><h1 style='float:right;'>Oooo, spinning!</h1><div style='clear:left'>
<script type='text/javascript'>
carousel({id:'carousel_7',
border:'',
size_mode:'carousel',
width:287,
height:35,
sides:24,
steps:5,
speed:11,
direction:'right',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon13.gif',
'http://www.codingforums.com/images/icons/icon12.gif',
'http://www.codingforums.com/images/icons/icon11.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: ['http://www.codingforums.com/',
'http://www.codingforums.com/',
'http://www.codingforums.com/',
'http://www.codingforums.com/'],
titles:[],
image_border_width:1,
image_border_color:'blue'
});
</script></div>
</div>
<script type='text/javascript'>
carousel({id:'Photos Courtesy of Dynamic Drive',
border:'',
size_mode:'image',
width:138,
height:225,
sides:6,
steps:23,
speed:5,
direction:'left',
images:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
links: ['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
titles:[],
image_border_width:0,
image_border_color:'blue'
});
</script>
</body></html>
Yes, it's a whopping big closure! :) Any other comments/suggestions?

Now with vertical!
Speed parameter altered - now roughly equals carousel rpm.
New size_mode parameter! See posts below

05-10-2005, 07:50 PM

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...

Basscyst

05-10-2005, 08:04 PM

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

Basscyst

Harry Armadillo

05-10-2005, 08:15 PM

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...

05-10-2005, 08:42 PM

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,

Harry Armadillo

05-10-2005, 09:14 PM

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....

05-10-2005, 09:17 PM

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!

glenngv

05-11-2005, 04:34 AM

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.

carousel({id:'carousel_2',
border:'1px solid grey',
BTW, Is there any special reason why you used document.write instead of createElement?

Harry Armadillo

05-11-2005, 09:20 AM

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!

05-11-2005, 09:19 PM

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.

Harry Armadillo

05-11-2005, 10:27 PM

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.

The carousel will now spin at a revolutions per minute rate roughly equal to the speed parameter. Due to differences in processing load, the same speed with different numbers of steps will result in slightly different net speeds (I've tries to compensate but machine/browser variances matter).

05-16-2005, 03:37 AM

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!

Harry Armadillo

05-16-2005, 07:52 PM

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.

Vladdy

05-17-2005, 07:19 AM

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

05-20-2005, 12:37 AM

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.

Harry Armadillo

05-20-2005, 12:54 AM

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

05-23-2005, 11:21 PM

I've gone ahead and posted the script on DD: http://www.dynamicdrive.com/dynamicindex14/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!

OutboundIndex

05-26-2005, 10:51 PM

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

davidjovan

05-26-2005, 11:22 PM

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:

Harry Armadillo

05-27-2005, 12:06 AM

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.

davidjovan

05-27-2005, 06:59 PM

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

Harry Armadillo

05-29-2005, 09:13 AM

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:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Carousel Slideshow</title>
<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(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/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, targ, attr, faraway;

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";
}
faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
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]=faraway;
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]!=''){
targ=params.lnk_targets&&params.lnk_targets[i]||params.lnk_base||'new';
if(targ=="_blank"){
attr=(params.lnk_attr&&params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
}
else if(targ.substr(0,1)=="_"){
images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
}
else{
attr=(params.lnk_attr&&params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
}
images[i].style.cursor=document.all?'hand':'pointer';
}

if(params.titles&&params.titles[i]&&params.titles[i]!='')
images[i].title=params.titles[i];
if(document.all)
images[i].alt=images[i].title;
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':faraway;
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]=faraway;
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()',100);
}
</script>
</head><body>
<div id='jake' style='width:180px;float:left;'>
<h4>Linkage</h4>All of these images will open a google search in single (reused) window.
<script type='text/javascript'>
carousel({id:'carousel_2',
border:'',
size_mode:'carousel',
width:144,
height:100,
sides:4,
steps:20,
speed:8,
direction:'right',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: ['http://www.google.com/search?q=happy',
'http://www.google.com/search?q=angry',
'http://www.google.com/search?q=sad',
'http://www.google.com/search?q=big+grin',
'http://www.google.com/search?q=look+here',
'http://www.google.com/search?q=bright+idea',
'http://www.google.com/search?q=caution',
'http://www.google.com/search?q=question',
'http://www.google.com/search?q=cool'],
lnk_base:'google',
titles:['Happy',
'Angry',
'Sad',
'Big Grin',
'Look Here',
'Bright Idea',
'Caution',
'Question',
'Cool!'],
image_border_width:1,
image_border_color:'red'
});
</script></div>
<div id='wendel' style="width:300px;float:right">
<h4>More Linkage</h4>Two photos share a single window, closing/reopening it with each click to allow the attributes to change. One photo opens in a _blank window, with another window added each click. The last photo opens in an iframe.
<script type='text/javascript'>
carousel({id:'Photos Courtesy of Dynamic Drive',
border:'',
size_mode:'image',
width:140,
height:225,
sides:6,
steps:20,
speed:5,
direction:'left',
images:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
links:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
lnk_base:'',
lnk_targets:['photo',
'photo',
'_blank',
'_steve' ],
lnk_attr:['width=200,height=300,top=200,menubar=yes',
'width=300,height=200,left=400,scrollbars=yes',
'width=150,height=250,left=300,top=100',
''],
titles:['Opens in \'photo\' window',
'Opens in \'photo\' window',
'Opens in blank window',
'Opens in iframe'],
image_border_width:0,
image_border_color:'blue'
});
</script></div>
<iframe name='steve' style="margin-top:20px;width:300px;height:300px;border:0px solid white"></iframe>
</body></html>

davidjovan

05-31-2005, 04:47 AM

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!

05-31-2005, 08:45 AM

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. :)

Harry Armadillo

05-31-2005, 08:57 AM

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!

05-31-2005, 10:27 AM

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/dynamicindex14/carousel2.htm

Harry Armadillo

05-31-2005, 10:43 AM

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

Rad2

06-03-2005, 04:55 AM

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

Harry Armadillo

06-03-2005, 10:12 AM

Where you have<div align="center">
<script type='text/javascript'>
carousel({id:'carousel_3',change it to<div style='text-align:center;'>
<div style='text-align:left;width:468px;margin:auto;'>
<script type='text/javascript'>
carousel({id:'carousel_3',
And down a little lower, </script>
</div>
</body>
should become </script>
</div></div>
</body>

chareen

06-08-2005, 11:15 PM

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...

chareen

06-08-2005, 11:18 PM

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

Harry Armadillo

06-09-2005, 10:05 AM

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 (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.peoplefromguam.com%2Fuser.asp%3Fid%3D22859&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional) - but that failed.

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

chareen

06-09-2005, 11:02 PM

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

chareen

06-10-2005, 03:13 AM

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

Harry Armadillo

06-10-2005, 11:11 AM

I looked at it, the error I see immediately isimages:[<a href="http://i5.photobucket.com/albums/y160/cpobleteporte/1st%20album/100_0180.jpg" target="_blank"></a>,
you need to use just the image urls. Likeimages:['http://i5.photobucket.com/albums/y160/cpobleteporte/1st%20album/100_0180.jpg',

Seriously though, you need to fix the rest of your HTML. I got the validator to look at it here (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.peoplefromguam.com%2Fuser.asp%3Fid%3D22859&charset=iso-8859-1+%28Western+Europe%29&doctype=HTML+4.01+Transitional&ss=1&verbose=1). 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.

samohtwerdna

06-26-2005, 12:23 AM

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

Harry Armadillo

06-26-2005, 01:10 AM

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.

Nils

06-26-2005, 04:24 PM

@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!

Harry Armadillo

06-27-2005, 04:02 AM

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 (http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm). Heck, I've even used it!

Nils

06-27-2005, 04:05 AM

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

Harry Armadillo

06-27-2005, 05:01 AM

I haven't a clue about embedding flash or videos. I suggest starting a thread in the Multimedia forum (http://www.codingforums.com/forumdisplay.php?f=32).

samohtwerdna

06-28-2005, 10:15 PM

Harry,

Thanks for the help. I was to quick to blame IE for weirdness when I mistakenly included a "," after the last image. So I fixed the script. Thank again.

If you still want to see my application I'm in the middle building the photo gallery here: http://www.kitchenstrand.us/gallery/accessories/index.php

Andy

samohtwerdna

07-15-2005, 03:52 PM

Hello again,

I love the script and every thing is working fine on my photo gallery. However, the people I'm developing the site for want to have "previous" and "next" buttons under the iframe.

Idealy it would be nice if the buttons would actulay load the previous image loaded by the image carousel rather than just scrolling through the list of image links, but I can't figure out how to find what file is loaded into my iframe in the first place?

Can you help??

canadianjameson

08-11-2005, 07:09 PM

Harry, you're a MONSTER.

good job. I'm in Cambridge right now so the php script has taken a back seat. I'll be back beginning of sept.

I may use this script for my mothers art webpage which i am currently creating.

Cheers and thanks again, i'll have a pint for ya :)

volcamp

08-14-2005, 04:44 PM

This is an awesome carousel. I have been trying to edit the code to use just the horizontal carousel. Every time I try to edit out the others, I screw it up. Is there any possible way you help me with the code for the horizontal only. I need to be able to have up to 14 sides. I am very new at this and would appreciate any help you could provide. Thanks for your time and consideration. :confused:

canadianjameson

08-16-2005, 02:27 PM

`hmmm, i was thinking.... would it be possible for you to combine this with something like the image fade script i have on my page (under the </html> at www.enviromark.ca/english/index.html).

That way, when an image starts to rotate aroound the bend in the carousel, it begins to fade aswell? could be an interesting addition.

weblite

09-02-2005, 01:34 AM

http://design.aplus.net/templates/www/screenshots/8800/8856.html

Hi Im kinda new to this - but came across this carousel and then this Flash template - I was woundering if there was a way to make the carousel look like the above link?

Thanks
Weblite

Golden Belle

09-22-2005, 04:07 AM

When I previewed the page after adding Carousel II, all 8 images were showing, links worked and titles show.

After publishing to the Internet, only the first image is visible and all links seem to work with correct titles. When publishing, images were put into the same directory as the web page http://www.rbollinger.com/html/nuhome.html

Hope the above is clear enough. Have I done something wrong - this is a great script and would love to get it working.

Thank you for any help (remember, I am at the beginning level) -

glenngv

09-22-2005, 07:50 AM

Are you sure all the images are uploaded to the server?
I tried accessing them directly in the browser but only 01VernFawlkes.gif exists.

http://www.rbollinger.com/html/01VernFawlkes.gif
http://www.rbollinger.com/html/bbobsandypeg.gif
http://www.rbollinger.com/html/rbtskate.gif
http://www.rbollinger.com/html/bdispotsm.gif

Golden Belle

09-22-2005, 09:06 AM

Glenngv, I am so dumb ! ! !

The file names are case sensitive - too embarassed to tell how many hours I spent.

Thank you for pointing out my error.

Golden Belle

09-23-2005, 01:36 PM

Is there a way to put titles under the images in the Carousel II? If no, I love the script the way it is.

Idea is to have title appear under each image instead of having to use mouseover for titles.

I know I could add the text to the image; however, each time I tried that the text is not clear.

Thank you

GenIIIMrDuece

01-26-2006, 06:17 PM

i want to be able to click on a picture and the link come up in a lower frame .... does anyone know how to do this?

glenngv

01-27-2006, 03:41 AM

The author already implemented link targetting in this script. See it here (http://www.codingforums.com/showthread.php?t=58814&page=2#post314429). (post #22)

GenIIIMrDuece

01-27-2006, 06:58 PM

i know he did... but i cant get the script to work. does anyone still have the old script with frame targeting?

glenngv

01-30-2006, 02:40 AM

If you post a link or attach your code here, then we can have a look at how you implemented it.

GenIIIMrDuece

02-01-2006, 08:20 PM

i am somewat new to this whole java thing so i guess after messing around i dont know were to change it.

glenngv

02-02-2006, 05:56 AM

Set lnk_base to the name of the lower frame where you want the images to load into.
lnk_base:'nameOfTheLowerFrame',

GenIIIMrDuece

02-03-2006, 06:19 PM

in here?

if(params.links && params.links[i] && params.links[i]!=''){
targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new';
if(targ=="_blank"){

other frame is called 'bottom'

glenngv

02-04-2006, 12:55 PM

Gil-L

02-10-2006, 05:05 PM

I just discovered the Carousel script and implemented in my web page. I love it. I am a novice at this script stuff, and was wondering if how I can alter the script to point to a subdirectory of photos instead of explicitly identifying every photo in the script. It would be nice to be able to use a directory reference perhaps with a wildcard on file types. Can anyone give me a modified script to accomplish this?
Thanks,
Gil

matd

02-27-2006, 06:05 PM

Hi,

Please would it be possible to have more options for link_attr?

I'd personally like to be able to set options such as :

leftmargin=0,topmargin=0,marginheight=0,marginwidth=0

I'd like to pop up larger images of the image that's been clicked but having set the dimensions of the _blank window to the size of the image its not showing all of it because of the default window margins, can anyone tell me where i can add or change the code so that i can control this please?

matrix2223

03-13-2006, 10:57 AM

Ok I was wondering how I could set an image to behind the carousel say like a box.gif or whatever.gif I have tried several different ways to do this but I seem to not be able to figure it out. Can someone please help me with this.

Thank you in advance

zar888

04-06-2006, 08:09 PM

Can you modify this script where you display say 3 or 4 images horizontally at once then carousel vertically? This way you always display the next 3 or 4 images when it carousels?

In the same manner, you display vertically say, 3 images at once then carousel horizontally displaying the next 3 images?

thanks in advance!

marknc

04-20-2006, 07:58 PM

I have posted this twice as I wasn't sure I was in the right place.

I have the script running with 14 unique id's each id being a different subject. What I would like to do is use a named anchor to go straight to a specific subject within the script from another page. A regular html named anchor does not work. Can anyone suggest a way that I can do this? Hope my explanation is clear.
Mark

jab

05-25-2006, 07:54 AM

Im new at this script business, im trying to learn. I think the Carousel is great. Im trying to center the Carousel. I've tried many different things. Could someone please help.:confused:
Thanks
here's the link
http://setlist.jarmblues.com
also
http://madonna.jarmblues.com

ajdyka

07-11-2006, 06:53 AM

This looks like a great alternative to creating a flash file :)

The only glitch I can find is that it doesn't work in Safari, where as Firefox in OSX displays fine.

I've tested the original carousel (http://www.dynamicdrive.com/dynamicindex14/carousel.htm) which works fine in both broswers ...

Any thoughts?

Thanks.

A.J.

pampaisd

08-22-2006, 05:34 PM

jsaint

10-08-2006, 05:06 AM

I am having trouble getting the original carousel to work as I think I understand it to work, including what appears to be a broken link behind the carousel on the left side and being unable to get the links to work.

Can you please take a look at the script and tell me what I have incorrect?

The Carousel script is on my Home Page of my web site, which is broken into two frames -- header and body. The Home Page is in the body section

http://www.halorealty.com

Any suggestions?

Thank you.

yiannist

10-08-2006, 10:36 AM

great job Harry and even greater the support from you and the users of the carusel.

We have a non profit canary club in greece.
I used the script here http://www.waterslager.gr/

and here http://www.waterslager.gr/forum/
(I am still waiting for the photos of the rest of the members(51) so i can include them on the left carusel.)

and I am very satisfied.

My request:
As you can see here http://www.waterslager.gr/worthy.htm

I am using a script to have sound on mouseover on this yellow links and if pushed they download a different file.

I found it here http://javascriptkit.com/script/script2/soundlink.shtml it is free and belong to FPMC(person)

We plan to build another site for wild birds and I am trying for days to inlude the sound in the carusel using ideas of both scripts.
absolutely failure I admit I dont know java.
I will be greatfull for any help.

Shotster

11-06-2006, 03:06 AM

Hi,
Carousell I seems to work with Safari, but version II doesn't for me and others. Is there a fix that you can tell me of?

Everyone loves the effect on our school's homepage...except for some Mac users with Safari...;-) Thanks for any help...Lee

Change the line in the script that reads...

var img=new Image();
...to...

var img = document.createElement('img');

...and it will work in Safari as well.

---
Steve

Angelstar860

01-17-2007, 07:29 PM

I need help in putting your code corousel2 into my website: http//:impressdesign.home.att.net
If you go to my site you'll have a better idea of what I'm trying to do.

When I put the code in my front page I can only see the frame of the movement (just boxes w X no pics) when in preview mode.
I can see your pics when I'm connected to internet.

I also dont know how to insert my pictures. I'd like to see my info on top as body and carousel under showing the images the way you have them but rotating with about 20 slides and larger view. I'd like for each button link to have it's own individual (different) slide show without going into another blank page or thumbnails.

I am truly a dummy at this, but your slide show is the best I've seen that would truly fit well with my theme.

Thanks for any response

MadMonkeyMan

01-21-2007, 06:44 PM

Hi

Does any one know how to make this so when clickOn opens in same window?

regards
Morten

codingmasta

01-28-2007, 07:28 PM

......nice

JulieBInOhio

01-30-2007, 07:22 PM

Hi ya all, am very new here, like today new, lol, But I have a question about a slideshow. I absolutely know this is going in the wrong forum, but have yet to work my way around here to know anything as of yet. I just seen the Author's name, and that he had posted here, sooo, hoping someone can look at this, lol

I'm using this code, first::: http://www.dynamicdrive.com/dynamicindex14/carousel2.htm

I've tested it in Firefox, I don't seem to have a problem in Opera, but for some reason, it will not show in IE. I'm not using the newer version of IE, the IE7, but have had someone using that browser look at it, and they can't see it either.

Any ideas?

Thanks bunches,

Ancora

01-31-2007, 03:45 PM

Julie:

Please check your private messages.

sfigurelli

03-02-2007, 02:40 PM

harry, i want to start by saying the code looks great.

i was hoping someone could help me out. i am new to the site and to html, in general, but i got carousel 2 to work from www.dynamicdrive.com . it looks fantastic.

the question i have is how do i get the vertical carousel to be centered in the middle of the page? as of now, it's aligned left. when i add code to center it, it actually centers the left edge of the carousel causing the visual to be very heavy to the right side of the screen - or it cuts off half the image altogether.

i'm a fifth grade teacher looking to set up a classroom page with a slideshow of pics.

any information would be very greatly appreciated!

bustya

05-23-2007, 09:12 PM

Hi folks. First let me say, great script Harry. I have a really cool project that I’d like to implement it into but it’s going to take some serious rewriting. Instead of images I’d like to have inputs (readonly with background-images). I’m thinking I’ll probably need 5 carousels with 8-12 inputs each. Once an input is clicked I’m going to have it stop (easy change there) and the value of each is passed to another field like so: carousel1’s value + carousel2’s value + etc. = the value of a hidden field… when all 5 characters are selected the form will be submitted. The submitted (collective) value is a password… the 5 carousels are the dials on a cryptex (http://waelchatila.com/images/vinci/cryptex_dis_2.jpg) like the one in the Da Vinci Code. Cool concept huh? Any idea how to modify the script for inputs instead of images? I’m going to take a whack at it; I’ll come back and post it if I figure it out. Thanks again for the script; it looks like a promising launch pad for my project.

bustya

05-23-2007, 09:22 PM

PS: to the admin... the quick reply edit didnt work, I had to "go advanced" to edit.

davidjovan

06-26-2007, 03:14 PM

Excellent job Harry! This is a really wicked & cool script. I am using it here:

www.dancehallcelebrities.com/2k7bashment to display flyers for parties

On my wish list is when someone puts the mouse over the image, the image will get bigger/magnify so that they see a larger image and when they move it off, the carousel continue on its merry way.

How superb that would be.

antimatter15

06-29-2007, 11:13 PM

Here is a quick hack, so it looks more realistic, as the size of the center image looks larger than the rest. Sadly it only works with square images, but could be easily changed to do otherwise

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Carousel Slideshow</title>
<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;' 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.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.top = "0px"
images[img_index-i].style[direction]=img_position[counter+i*params.steps];
images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
images[img_index-i].style.height=img_dimension[counter+i*params.steps];
images[img_index-i].style.top = 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>
<script type='text/javascript'>

carousel({id:'carousel_7',
border:'',
size_mode:'carousel',
width:287,
height:35,
sides:24,
steps:5,
speed:11,
direction:'right',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon13.gif',
'http://www.codingforums.com/images/icons/icon12.gif',
'http://www.codingforums.com/images/icons/icon11.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: ['http://www.codingforums.com/',
'http://www.codingforums.com/',
'http://www.codingforums.com/',
'http://www.codingforums.com/'],
titles:[],
image_border_width:1,
image_border_color:'blue'
});
</script></div>
</div>
</body></html>

missticall

06-30-2007, 06:07 PM

I love this carousel!!!
I put it on one page with 6 images and it works perfect, however when I put it on another page with 12 images each and 6 rows of carousels i have one each blank red x image in each carousel and cant figure out how to get rid of that image. I have 12 images with link and titles in each row and i renamed each row differently. Does anyone know why i would have the blank image in each carousel ? Hope I am clear !

Missticall

kwanja

07-02-2007, 01:25 PM

I am sorry to bother you, Mr. Armadilla, but could you look at my page and tell me what I have done wrong to make the box that appears under my carousel, please?

http://freepages.genealogy.rootsweb.com/~owengrantland/InMemoryofStevenForever.html

Thank you kindly for your time and assistance.

You take care now.....

Kwanja

Giocun

07-09-2007, 08:58 AM

Dear KWANJA,

I had the same problem.
Just cancel the frame created automaticaly when inserting the script and there will no more box.

How did you manage to align the carousel in the central position?

Giocun

kwanja

07-09-2007, 05:09 PM

Thank you so very much! That worked perfectly! I had not even noticed the frame insert. *bonks self*

I centered the carousel with

<div align="center">

just before the

<!!--BEGIN BODY PHOTO DISPLAY--!!>
<script type='text/javascript'>

like this

<div align="center">
<!!--BEGIN BODY PHOTO DISPLAY--!!>
<script type='text/javascript'>
carousel({id:'InMemoryofStevenForever', //Enter arbitrary but unique ID of this slideshow instance border:'', size_mode:'image', //Enter "caro

Hope that helps.

Again, thank you for the help.

You take care now.....

Phyllis J. K. Owens :thumbsup:

Website-Online

09-02-2007, 12:46 AM

Hi everyone...First post:)

Great script this...I just have one question...Can the code for the header be modified to validate as XHTML 1.0 Transitional?

I ran my page through the validator,and 59 errors occured with the & signs and it states they should be & ? But this stops the script from working.

Either that or i guess its cool to host the script and then the page validates?

Cheers anyway and nice forum/site.:thumbsup:

Neil.

liorean

09-02-2007, 02:38 PM

I ran my page through the validator,and 59 errors occured with the & signs and it states they should be & ? But this stops the script from working.Two solutions:
1. Move the script to a separate file.
2. Add //<![CDATA[ directly after the opening script tag and add //]]> directly before the closing script tag.

Website-Online

09-02-2007, 04:06 PM

Thanks for that:)

Would it be best hosting it seperately?

Ive used it on four pages,so maybe it would just tidy the pages up a little...

I suppose it wouldn't matter if the carousel id was the same or not then,and i could just reference the hosted code on each page.

Ive used it here if you click the gallery link. (http://www.lamin-x.co.uk/)

Neil.

stuart Meyer

09-20-2007, 07:07 AM

Hey, great carousel! I wanted to tweak it just a bit (or a lot?). Not being a Javascript expert, I'm trying to modify the carousel to move either left or right with a mouseover on a left or right arrow. I'm using the carousel pictures as links to slideshows and the number of links will grow with time. This way the user has more control and doesn't have to wait for the carousel to go all the way around in one direction to get to something he/she wants. Also, the user won't be distracted by the moving carousel and can concentrate on the slideshow after he/she has moved the mouse away from the arrow and clicked on the thumbnail link. Thanks in advance for any reply. This is a great forum!

Stu

ScubaVal

12-24-2007, 11:23 PM

I have a function that generates a random number, then selects a group of photos from an image directory based on the random number and puts them into an array. This works just fine.

I want to use this array in the images param for the carousel.

Can anyone help me? I noticed this thread hasn't been active lately, so I hope I can get an answer. Thanks.

jflesher

04-14-2008, 01:55 AM

I have been using this script for years; I recently found this version; which is an improvement and added features. Anything I use something I have to reformat it for reading, then optimize it for Compressing; I didn't add any features; just improved on a few.
I attached the files as a Zip; with the Compress file in CubeMin.zip and the UnCompressed version in the Cube.zip
To use simple add the javascipt file into your header as such
<script src="Cube.js" type="text/javascript"></script>
I don't like big scripts in my pages; including them is always better
I hope this works faster for you; the compressed version is the only one you should use in production; the uncompressed one is for view and modifying; always compress it before deploying it.
I use this YUI command

C:\PROGRA~2\Java\JRE16~1.0_0\bin\java.exe -jar C:\wamp\www\YuiCompressor\yuicompressor-2.3.5.jar --charset UTF-8 --nomunge --verbose C:\wamp\www\Javascripts\Cube\Cube.js -o C:\wamp\www\Deploy\Javascripts\Cube\Cube.js

You'll have to fix the paths; and have Java Installed
Please see detail in Cube.js in Uncompressed Zip file.
I have tested this in Firefox, IE7, IE6, Opera and Safari
If you make any improvements just post them here; if I get the time I'll incorporate them into a compressed version if you want; once you start using compress javascript files you will not go back; the speed of downloading and executing them is as fast it will will get to compiling them.
Just giving back to the community.
Thanks
Jeff

erikko

04-25-2008, 11:32 AM

jflesher

04-25-2008, 05:34 PM

i want to install this script to my blog (which is Blogger). I want to have the complete code for my blog and a guide on how to install it. you can email it at cedricvcanierro@gmail.com. thanks and goodluck to all of you

This forum thread is geared more to here it is hope your happy with it; not that I don't mind emailing it to you; its that I don't have the compress file on my hard drive any longer; I compress on the upload; hope you understand.

See Post #90: There are two attached files to download; click on the one you want to use; I would recommend both; install the compressed one to the web server and use the other for referance.

I renamed it to Cube; its shorter and easier for me: This works the way it always has; I'm just reposting this here for referance: here is an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Carousel Slideshow</title>

<script src="Cube.js" type="text/javascript"></script>

</head>
<body>
<div style="width: 100%">
<center>
<div style='position: relative; overflow: hidden;' id='amazonbooks1'></div>
Centered
</center>
<div style='position: relative; overflow: hidden;' id='amazonbooks2'></div>
<div style='position: relative; overflow: hidden;' id='carousel_3'></div>

</div>

See this thread for detailed info and docs on script: <a href="http://www.codingforums.com/showthread.php?t=58814">http://www.codingforums.com/showthread.php?t=58814</a>

<div style="margin-top: 1em; font-weight: bold;">1) Horizontal Slideshow:</div>
Each image hyperlinked and opens in same browser.
<script type='text/javascript'>
carousel({id:'amazonbooks1', //Enter arbitrary but unique ID of this slideshow instance
border:'',
size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.
width:107, //Enter width of image or entire carousel, depending on above value
height:140, //Enter height of image or entire carousel, depending on above value
sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best
steps:23, //# of animation steps. More = smoother, but more CPU intensive
speed:5, //Speed of slideshow. Larger = faster.
direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right"
images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg',
'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg',
'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg',
'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'],
links: ['http://www.dynamicdrive.com', //enter link URLs, or for no links, empty array instead (links :[])
'http://www.javascriptkit.com',
'http://www.codingforums.com',
'http://www.cssdrive.com'],
titles:['Book #1',
'Book #2',
'Book #3',
'Book #4'],
image_border_width:1,
image_border_color:'blue'
});
</script>

<div style="margin-top: 1em; font-weight: bold;">2) Horizontal Slideshow:</div>
Each image hyperlinked and opens in the new, set window (target="_blank")
<script type='text/javascript'>
carousel({id:'amazonbooks2',
border:'',
size_mode:'image',
width:107,
height:140,
sides:6,
steps:23,
speed:5,
direction:'left',
images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg', // 122x160
'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg',
'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg',
'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'],
links: ['http://www.dynamicdrive.com',
'http://www.javascriptkit.com',
'http://www.codingforums.com',
'http://www.cssdrive.com'],
lnk_base:'google', //Link target for all links (see: http://www.codingforums.com/showthread.php?t=58814&page=2)
titles:['Book #1',
'Book #2',
'Book #3',
'Book #4'],
image_border_width:1,
image_border_color:'blue'
});
</script>

<div style="margin-top: 1em; font-weight: bold;">3) Vertical Slideshow</div>
Each image is hyperlinked and opens in a pop up window or iframe. 1st and 2nd image opens in the same popup window called "photo", 3rd image a _blank widnow, and 4th image, in the iframe following called "steve". Each pop up window's attributes can be customized, such as no toolbars, width/dimension etc.
<script type='text/javascript'>
carousel({id:'carousel_3',
border:'',
size_mode:'image',
width:107,
height:140,
sides:8,
steps:8,
speed:7,
direction:'top',
images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg',
'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg',
'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg',
'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'],
links: ['http://www.dynamicdrive.com',
'http://www.javascriptkit.com',
'http://www.codingforums.com',
'http://www.cssdrive.com'],
lnk_base:'',
lnk_targets:['photo', //link target for each link (see: http://www.codingforums.com/showthread.php?t=58814&page=2)
'photo',
'_blank',
'_top.steve' ],
lnk_attr:['width=700,height=600,top=200,menubar=yes', //window attribute for each pop up (see url above for docs)
'width=700,height=600,left=400,scrollbars=yes',
'width=750,height=550,left=300,top=100',
''],
titles:['Opens in \'photo\' window',
'Opens in \'photo\' window',
'Opens in blank window',
'Opens in iframe called "steve"'],
image_border_width:1,
image_border_color:'black'
});
</script>

<iframe name="steve" style="width: 80%; height: 400px"></iframe>

</body>
</html>

piralswis

05-11-2008, 09:35 AM

Hello Harry !

Congratulations and my eternal gratitude for this coding, which saved me when I was down with my site.:thumbsup:

However, being a newbie, I've been trying in vain to make the carousel/pics show in %, not in px so that, whatever the resolution of the screen, it should always appear in a proportional size. I carefully tried to replace 'px' by '%' everywhere (except for the border width) but it doesn't work (sometimes, the carousel doesn't even appear anymore).
How would you do this, Great Master???

robspcs

06-06-2008, 06:18 AM

I am loving the script as it is so far but I have one addition that I cannot seem to get into place.

I am wanting to have the images display with an opacity effect and become full 100% opacity on a mouseover.

Another possibility would be to use an image swap on mouseover.

Where do I need to add these to the code and what is the correct object id. Would it be "images[i]" I cannot seem to get them to work.

Thank you for your help

kcaron

06-30-2008, 03:03 AM

I would like to apply the script to a Expression Web document. I'm wondering about the requirement to load the first part of the code to the "head" and the second part to the "body" of the html document. If I create those 2 layers and name them "head" and body" is it import and to have those layers in a certain order in the z-index of the form? Can you direct me to an example of this code in Expression Web format?

Thanks, it's very nice. I'd like to use it.

palominofilly

01-03-2009, 07:25 PM

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

Ok so I'm trying to do this carousel slideshow with 3 pictures and I just can't seem to get it to work in my webpage. I'm new to this, and I did not edit below where it said not to but no matter what I've tried I cannot get it to work for me. :(

npimpfellow

02-03-2009, 07:18 AM

What I'm trying to do is integrate your script with lightbox2 in wordpress

my website is here: www.nathangoodfellow.us

and as you see I'm using the carousel script to display scrolling images on my page. What I would like to do is add the following element to the link attribute in the script of:

rel="lightbox"

with the lightbox plugin I have installed in wordpress this will make the image pop open in a lightbox. I'm rather new at flash coding and I'm not sure what I need to change or do to add this element to the carousel code. Any advice given would be greatly appreciated! You did a great job on this script!

:thumbsup:

npimpfellow

02-06-2009, 08:16 AM

Check out this thread on combining Carousel with Lightbox

http://www.dynamicdrive.com/forums/showthread.php?p=183513#post183513

Drachsi

02-12-2009, 07:09 AM

I have also posted this request to DynamicForums just in case.

The Slideshow runs fine. I have created a .pgn image with the centre part transparent and using <DIV> have layered this on top of the Carousel Slideshow.

If part of the Slideshow shows above the .pgn image, I can stop it and go to the linked page.

The part I see through the "Window" in the .pgn image, does not stop or link, but images are visable.

A solution would be very much appreciated.

Regards

Drachsi

Drachsi

02-13-2009, 03:38 PM

dood

02-28-2009, 05:27 AM

is there any way that i can apply a different color border to seperate pictures or must you apply a single color to all?

dood

02-28-2009, 06:58 AM

Not certain if I explained what I mean. There are 2 examples where the script can be seen, through the window, no reaction, above the image it works.

How do I get it to work through the window?

Thanks in advance

Drachsi

http://www.drachselsried.eu/test/presentation.htm

http://www.drachselsried.eu/test/carousel2-1.htm

Your problem is the transparent space in the center of your top layer is blocking your second layer so the carousel can't see the cursor and doesn't know when it is hovering.

My suggestion is you cut the second layer image into four seperate images and then use a <div><table> to fit them together nicely, and then postition that image over layer the carousel.

the <div><table> should be formatted like this.
<div>
<table cellpadding="0" cellspacing="0" border="0" width="648" height="879"><tr><td colspan="3"><img src="images/litfass2-latest7-top.png"></td></tr><tr><td><img src="images/litfass2-latest7-left.png"></td><td width="294"> </td><td><img src="images/litfass2-latest7-right.png"></td></tr><tr><td colspan="3"><img src="images/litfass2-latest7-bottom.png"></td></tr></table>
</div>

make sure there are absolutely no spaces between any of the table component tags or the whole picture will not fit together perfect.

Jacquesgroen

03-21-2009, 11:30 PM

Wow! That is indeed a huge difference from the original and thank goodness for that. Like yours way more. Thanks for the excellent work. Keep it up

TapeBoy929

03-27-2009, 03:59 AM

Awesome, years later this script is still very useful!

Biffa

04-04-2009, 09:21 PM

Hi

This script is excellent...but i have a question which may have been answered elsewhere but I can't find it and I'm sorry if it's obvious and I've missed it....here goes..

How do I get the link to open in a new window?

Thanks in advance for your help

Black_Widow

08-03-2009, 12:15 AM

Can the iframe be placed alongside the vertical carousel?

aroyal

08-07-2009, 08:06 AM

Pl. Help to provide Javascript Code through which i can call exe .

Thanks
aroyal

dheeraj_932

11-02-2009, 05:20 PM

Why doesn't the target open in a new tab for the vertical carousel when the target is _blank ? This problem is only in IE

nt10000

12-15-2009, 09:25 AM

Hello!

I've been trying to get the Carousel Slideshow to work inside a PopUp. It works fine when I view it through my HTML Editor, but after uploading it to my website and activating the PopUp (by refreshing the page) you can't see the Carousel Slideshow in the PopUp.

Does anyone have any idea why, and what I need to do to fix? TIA.

HTML code from my Popup template is:

<html>
<head>
<script type='text/javascript'>

/***********************************************
* Carousel Slideshow II- By Harry Armadillo (http://www.codingforums.com/showthread.php?t=58814)
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Please keep this notice intact
***********************************************/

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(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/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, targ, attr, faraway;

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";
}
faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
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]=faraway;
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]!=''){
targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new';
if(targ=="_blank"){
attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
}
else if(targ.substr(0,1)=="_"){
images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
}
else{
attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
}
images[i].style.cursor=document.all?'hand':'pointer';
}

if(params.titles && params.titles[i] && params.titles[i]!='')
images[i].title=params.titles[i];
if(document.all)
images[i].alt=images[i].title;
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':faraway;
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]=faraway;
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()',100);
}
</script>

<title>Sign Up Now!</title>
</head>
<body>
<table width="400" bgcolor="#FFFFFF" border="1" cellpadding="5" cellspacing="0">
<tr valign="top">
<td>

<div align="center"><b><font size="3" face="Tahoma"><b>To view this FREE product review,<br />please leave your name and email below.</b></b><br /><br /></font></div>

<font size="2" face="Tahoma">We'll also send you the following fantastic bonuses worth over $400 <i><b>absolutely free</b></i>...</font><br /><br />

<div align="center">
<script type='text/javascript'>
window.onerror=function(){if (document.all){window.status='An error has occured'; return true}}
carousel({id:'',
border:'',
size_mode:'image',
width:155,
height:180,
sides:6,
steps:23,
speed:5,
direction:'left',
images:['http://www.homeworkfrom.com/images/bonus1.gif',
'http://www.homeworkfrom.com/images/bonus2.gif',
'http://www.homeworkfrom.com/images/bonus3.gif',
'http://www.homeworkfrom.com/images/bonus4.gif',
'http://www.homeworkfrom.com/images/bonus5.gif',
'http://www.homeworkfrom.com/images/bonus6.gif',
'http://www.homeworkfrom.com/images/bonus7.gif',
'http://www.homeworkfrom.com/images/bonus8.gif'],
links: ['',
'',
'',
'',
'',
'',
'',
''],
titles:[],
image_border_width:0,
image_border_color:'blue'
});
</script>

</div>

<font size="2" face="Tahoma"><br /><b>... <u>PLUS</u></b> you'll get some great insider secrets, marketing tutorials and free software to help turbo charge the earnings from whatever product you're researching with us!</font></div><br /><br />

<div align="center"><font size="2" face="Tahoma" color="#FF0000"><b>Don't worry, you can unsubscribe at any time from the links in our WorkFromHome Tips Newsletter. Guaranteed!</b></font></div><br />

<div align="center"><form action="http://www.homeworkfrom.com/autoresponder/subscribe.php" target="_blank" method="post" class="cmxform">
<font size="2" face="Tahoma">Enter <u>first</u> name here:</font>
<input type="text" name="subscriber[name]" /><br />
<font size="2" face="Tahoma">Enter your email here:</font>
<input type="text" name="subscriber[email]" /><br />
<input type="submit" value="Join WorkFromHome Tips Newsletter" />
</form></font>
<font size="1" face="Tahoma">Email addresses are <b><u><font color="#000000">NOT</font></u></b> released to any other parties.<br />We respect your</font> <a
href="http://www.homeworkfrom.com/privacy-policy.htm" target="_blank"><font size="1" face="Tahoma" color="0000ff"><u>email privacy</u></font></a><br /><br /><font size="2" color="#FF0000" face="Tahoma"><b>*** Give us a try. You won't be disappointed! ***</b></font></div>
</div>
</td>
</tr>
</table>
</body>
</html>

The Popup is activated from a script in the webpage:

<script type="text/javascript" src="http://www.homeworkfrom.com/popup/actionpopup-b4.php"></script>
<script>ActionPopup.onEnter = true;</script>

Thank you

Amarok

03-15-2010, 07:46 PM

Hi!

I made a small addition: there's a new Param called "pause", intended to set a number of milliseconds to pause the script after each step (where step means a whole picture change). I try to indicate the changes in red within the code.

It is my very first encounter with JavaScript, so use at your own risk!! :o

Hope someone find it useful.

/***********************************************
* Carousel Slideshow II- By Harry Armadillo (http://www.codingforums.com/showthread.php?t=58814)
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Please keep this notice intact
***********************************************/

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(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/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;
pause=isNaN(params.pause)?interval:params.pause;
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, targ, attr, faraway;

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";
}
faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
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]=faraway;
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]!=''){
targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new';
if(targ=="_blank"){
attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
}
else if(targ.substr(0,1)=="_"){
images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
}
else{
attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
}
images[i].style.cursor=document.all?'hand':'pointer';
}

if(params.titles && params.titles[i] && params.titles[i]!='')
images[i].title=params.titles[i];
if(document.all)
images[i].alt=images[i].title;
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':faraway;
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(){
if ((counter+1)>=params.steps){
millis=pause;
}else{
millis=interval;
}

setTimeout('document.getElementById("'+cdiv.id+'").rotate()',millis);
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]=faraway;
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()',100);
}

Ursulo

01-24-2011, 08:17 PM

Im also doing reverse engenering and got this function to send the link to a iframe.
function C_LdLnk()
{

if(this.lnk)
{
document.getElementById("iframeName").src=this.lnk;
this.src=C_Pre_Img[i].src;
}
}

joaqs

09-29-2011, 09:31 AM

Great job! :thumbsup: I tried to make a similar effect and use it as a sort of online presentation for my project. Unfortunately, the outcome is not what I expected. I’m trying to check this script and see if there are possible parameters that I forgot to define.