Create an Image Rotator with Description (CSS/jQuery)

demogar May 5th, 2009

Really great tut. Thanks for this one!

vocal May 5th, 2009

very good tut, and it’s clearly and useful, thanks.

and for advance effect, I think you can add some animation effect for the big images, such as fade, slidedown,and so on.

Ariyo May 5th, 2009

Great tut and excellent idea. I’m so making this. Thanx!

alex May 5th, 2009

Nice tut I have sth to share too. I think people would like to know integrate feature article content slide show into wordpress

cat3y3 May 5th, 2009

How can you rotate this automatically? (After 5 second, the next item)?

Great tutorial. I like the clean and usable design.

HieuUk May 5th, 2009

Good effect, I would suggest to use it with my ImageSwitch to create a better transaction effect. Also, if you don’t use that plugin, you should integrate some kind of preload or loading effect.

izzat aziz May 5th, 2009

nice tutorial. pretty useful especially for my latest project. but one think though, when click into the text instead of picture it will only change the description but picture remain the same. It not much of problem since it can be alter right?

thank for tutorial.

izzat aziz May 5th, 2009

sorry. it the picture actually change too but a lil bit late compare to description. sorry about that.

Steven Snell May 5th, 2009

Izzat,
On my connection the image changes immediately after the description. But on a slower connection there may be a little delay.

Mike May 5th, 2009

Nice little tutorial.
As has already been pointed out, there is quite a time lag between the text changing and the image changing. But once the images have been cached, ie. the second time around, it’s fine.
Perhaps it might help to preload the images.

Len May 5th, 2009

Really nice effect and implementation. Re: the lag between text and image loading — I have that problem too. Is there a way to preload all images via jQuery? That’d really make this sing. Ld

Archane May 5th, 2009

Great article, I’ll be incorporating this in to a business site I’m developing!

izzat aziz May 5th, 2009

Steven Snell,

thank for telling me. so its my connection speed the real problem is.

mark May 5th, 2009

This is awesome, could do with speeding the image transition up slightly. Good to see a tut clearly labelled too

roni May 5th, 2009

@steve @izzat
Probably because image swaps before text.
May be add somewhere, before swap text=”" onFinish=changeText, could that be possible ?

So that the text only displays when image is actually loaded ?

I honestly have no idea of the feasability of such idea.

BTW.. ppl… click on the ads !!

Thanks.
Keep on the good content.

PS:
I am more into prototypeJS (for client’s reasons) but I am thinking about moving to JQuery, and I feel your tut is really well written. A real tut !! Step by step. Even if, I must admit I only “scanned” the whole content.
Nevertheless, I bounced from cssglobe… but I will, for sure, come back !
I shall, if time pops up, ty to come up with same efffect on prototype.

Rahul May 5th, 2009

Cool tutorial, just what I needed for the this time.

Kai Chan Vong May 5th, 2009

Hey, great tutorial. One suggestion would be to use a CSS-Sprite so that all the images load up together and then you wouldn’t see any delay varying from the user’s bandwidth capabilities.

Keep up the good work!

insic May 7th, 2009

looks nice. perfect to integrate for wordpress theme.

Gabriel Paiva May 7th, 2009

Hello,

Just GREAT ! Thanks !

Is there a way to make the pictures to change after 10 seconds ? So the user does not have to click in teh link …

Thanks in advance

Steven Snell May 8th, 2009

Hey Soh,
Thanks for adding that link, looks pretty cool. Great tutorial as always.

Mauricio May 8th, 2009

I can’t see the demo no working links

http://www.sohtanaka.com/web-design/examples/image-rotator/
or
http://www.sohtanaka.com/web-design/examples/image-rotator/index2.htm

Steven Snell May 9th, 2009

Hi Mauricio,
Soh had some difficulty with his web host. It seems to be fine now.

Robin May 10th, 2009

Just what i was looking for!! Except I really needed the automated rotation

Looking forward to the next version.

Fred75 May 11th, 2009

Me too, I wait for the next version, with automated rotation and maybe fadin

Markus Koljonen May 11th, 2009

Awesome!

What about Flickr? How would you use this to display the latest from items your photo stream?

cjbates May 13th, 2009

Nice tutorial, very clean looking interface. One thing you might want to add is a simple “return false;” in the toggle hide/show option. This will keep the page from following the link to “#” and scrolling up to the top when the collapse button is clicked.

$(“a.collapse”).click(function(){
$(“.main_banner .block”).slideToggle();
$(“a.collapse”).toggleClass(“show”);
return false;
});

mblack May 13th, 2009

This plugin is really fantastic, but there’s one thing I can’t seem to figure out how to do. I’m trying to have the picture change by clicking a text link instead of the thumbnail image. Every jquery plugin I’ve found so far uses thumbs as the base point for the image swap.

To be more specific, I’d want the image to change by clicking on the title of the piece (ex. Slowing Down) and having that change the image and getting rid of the thumb all together.

Any way to do this?

EthanJ May 14th, 2009

Great tut. Unlike 90% of rotators it degrades really nicely. Very easily skinable and hackable. 10/10. Thank you.

Tonyk May 14th, 2009

It would be great if the list on the left had an up/down slider so you could have like 20 entries in the list and move up/down without extending the page length.

Great tutorial!

randy johnson May 18th, 2009

Is there a way to download all of the files at once? Or can one just use the demo site? I can’t seem to find usage info, for our small family website.

Lochlan May 19th, 2009

I’ve made it so it rotates automatically, using the fade effect mentioned above and will also respond to click events. I’m sure there’s nicer ways to do this, but here’s what I’ve done:

jQuery(function(){

$(“.main_image .desc”).show(); //Show Banner
$(“.main_image .block”).animate({ opacity: 0.65 }, 1 ); //Set Opacity
$(“.image_thumb ul li:first”).addClass(‘active’); //Add the active class (highlights the very first list item by default)

//runs function on click
$(“.image_thumb ul li”).click(function () {
$active = $(this);
slideSwitchClick();
})
.hover(function(){ //Hover effects on list-item
$(this).addClass(‘hover’); //Add class “hover” on hover
}, function() {
$(this).removeClass(‘hover’); //Remove class “hover” on hover out
});

//runs function, set timer here
$(function() {
setInterval( ’slideSwitchTimed()’, 6000 );
});

});

function slideSwitchTimed() {
$active = $(‘.image_thumb ul li.active’).next();
if ( $active.length == 0 ) $active = $(‘.image_thumb ul li:first’); //goes back to start when finishes
slideSwitch();
}

function slideSwitchClick() {
slideSwitch();
}

function slideSwitch() {
var $prev = $(‘.image_thumb ul li.active’);

//Show active list-item
$prev.removeClass(‘active’);
$active.addClass(‘active’);

//Set Variables
var imgAlt = $active.find(‘img’).attr(“alt”); //Get Alt Tag of Image
var imgTitle = $active.find(‘a’).attr(“href”); //Get Main Image URL
var imgDesc = $active.find(‘.block’).html(); //Get HTML of the “block” container
var imgDescHeight = $(“.main_image”).find(‘.block’).height(); //Find the height of the “block”

if ($(this).is(“.active”)) { //If the list item is active/selected, then…
return false; // Don’t click through – Prevents repetitive animations on active/selected list-item
} else { //If not active then…
//Animate the Description
$(“.main_image img”).animate({ opacity: 0}, 250 );
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
return false;
}

Robin May 19th, 2009

Nice one Lochlan!

Is there anyway of stopping it rotating if the user clicks one of the options? Because at the moment it will suddenly switch if the user selects something and it’s close to rotation time.

Mo May 19th, 2009

I can’t see the demo working either. any advice?

Lochlan May 19th, 2009

Hey Robin,

Sure, replace:

//runs function, set timer here
$(function() {
setInterval( ’slideSwitchTimed()’, 6000 );
});

with:
//pauses on hover
$(‘.highlight’).hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});

Just change ‘.highlight’ to whatever element you want to cause the animation to pause when the user hovers their mouse over.

Lochlan May 19th, 2009

Sorry, I forgot a bit, replace with:

//runs function, set timer here
$(function() {
//setInterval( ’slideSwitchTimed()’, 6000 );
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});

//pauses on hover
$(‘.highlight’).hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});

Nick Sumpter May 20th, 2009

I have used this tutorial as the basis for the ‘front page redesign’ of our companies site. I have altered the code so that the ‘thumbs’ are in the same box as the ‘main image’ and therefore you can do all kinds of fancy layering effects using transparency. Working example is under development at http://www.envogen.co.uk and the code should be visible if you want it.

Anyone with design suggestions please get in touch because I am by no means a professional web designer

Thanks again Soh, the tutorial was superb.

Ryan May 21st, 2009

This is a great tool to implement onto a site. One thing I think is missing is ‘paging (Next, Previous)’. I am working on putting it together, once it is complete I will post it for you guys.

BenHen May 21st, 2009

Nick Sumpter, your script does work with google chrome

BenHen May 21st, 2009

Sorry, it’s work now, it was my conputer :$

Colows May 22nd, 2009

no zip files?

carl May 22nd, 2009

Hi -
I like this jquery feature alot! Thanks.
One problem I can’t figure out as I attempt to make use of it is why the images on mine do not switch – only the first image shows up!
I even tried copy and pasting the demo of this tutorial line for line (substituting my own images of same name and size) yet still no luck having the images rotate.

Please advise if you can thik of anything oobvious that I may be neglecting to do/include etc.

Thank you very much!

Sincerely

carl

kelik May 28th, 2009

what can create that script to joomla module?

Ludo May 29th, 2009

Excellent!!!

Just an automated version to complete the work

Carlos May 29th, 2009

@ Lochlan I’ve tried to replace the original code with yours for automatic slide but it is not working, where I should put your new code? I need to leave the one described in the tutorial plus the one you did? it is not working for me.

I will appreciate if somebody can guide me.

Thank you.

David June 2nd, 2009

is there a way to add a scroll bar for the thumbnail section? if so, what is the code?

Maverick June 6th, 2009

wow, very very nice script……. looks great

Brandon June 7th, 2009

This was a super amazing tutorial and answered something I’ve been looking for ages.

When I first put up my website I wanted a simple news ticker like various big sites like nba.com, espn.com and mtv.com. I found a few flash tutorials and also could easily make a flash script that I could manually update… which was inconvenient. I had been looking for a css script that I could implement with wordpress and make it more automatically updated.

http://brandonmitchell.org/?page_id=123 – you can see the old flash script I used, it works and looked fine but was a pain to update.

http://brandonmitchell.org/ – this is the new version that your tutorial helped me make. It’s all generated by posts in wordpress, so I just add a post fill out a few fields (upload image, description) and it updates on its own without editing any code. It works amazing and has solved something huge for me (I’m still finishing up everything but so far it does what I want it to do… I’m still working on getting the auto image change to work).

I’d like to thank you Soh for your amazing tutorial, I’ll be sure to credit you when I’m done fixing my website

Tom June 8th, 2009

great tutorial. Will test it out right away

Constantine June 10th, 2009

Love it. Thank you.

joxe June 12th, 2009

thanks for this, but i have 1 dude, how can i show the desc box out of the jpg, at the bottom for have more space to xplain my product, i did try but i cant, hope your help, many thanks.

joxe June 15th, 2009

please somebody help me

John June 16th, 2009

Is it possible to add more to the list under image_thumb Section and not push the container down? It will slide vertically instead if there are more to that list? Right now there are 6. What if I have 12?

mblack June 22nd, 2009

this is probably a question with an obvious solution, but how do I make it so the description is in the “hide” state by default, as opposed to showing up on load?

apt June 22nd, 2009

Can i have the Nick Sumpter example slide automaticaly ?

thanks !

apt June 23rd, 2009

Hi lochlan,

Here is the code i put, and that does not work with me:

/************/

jQuery(function(){

$(”.main_image .desc”).show(); //Show Banner
$(”.main_image .block”).animate({ opacity: 0.65 }, 1 ); //Set Opacity
$(”.image_thumb ul li:first”).addClass(’active’); //Add the active class (highlights the very first list item by default)

$(”.main_image img”).stop().animate({ opacity: 0}, 650 );
$(”.main_image .block”).stop().animate({ opacity: 0, marginTop: -imgDescHeight }, 650 , function() {
$(”.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginTop: “0?}, 1700 );
$(”.main_image img”).stop().attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 650 );

//runs function on click
$(”.image_thumb ul li”).click(function () {
$active = $(this);
slideSwitchClick();
})
//runs function on click “next”
$(”.nextTour”).click(function () {
clearInterval(playSlideshow);
$active = $(’.image_thumb ul li.active’).next();
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
if ( $active.length == 0 ) $active = $(’.image_thumb ul li:first’); //goes back to start when finishes
slideSwitch();
})

//runs function on click “prev”
$(”.prevTour”).click(function () {
clearInterval(playSlideshow);
$active = $(’.image_thumb ul li.active’).prev();
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
if ( $active.length == 0 ) $active = $(’.image_thumb ul li:last’); //goes back to start when finishes
slideSwitch();
})

.hover(function(){ //Hover effects on list-item
$(this).addClass(’hover’); //Add class “hover” on hover
}, function() {
$(this).removeClass(’hover’); //Remove class “hover” on hover out
});

//runs function, set timer here
$(function() {
//setInterval( ’slideSwitchTimed()’, 6000 );
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});

//pauses on hover
$(’.highlight’).hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});

});

function slideSwitchTimed() {
$active = $(’.image_thumb ul li.active’).next();
if ( $active.length == 0 ) $active = $(’.image_thumb ul li:first’); //goes back to start when finishes
slideSwitch();
}

function slideSwitchClick() {
slideSwitch();
}

function slideSwitch() {
var $prev = $(’.image_thumb ul li.active’);

//Show active list-item
$prev.removeClass(’active’);
$active.addClass(’active’);

//Set Variables
var imgAlt = $active.find(’img’).attr(”alt”); //Get Alt Tag of Image
var imgTitle = $active.find(’a’).attr(”href”); //Get Main Image URL
var imgDesc = $active.find(’.block’).html(); //Get HTML of the “block” container
var imgDescHeight = $(”.main_image”).find(’.block’).height(); //Find the height of the “block”

if ($(this).is(”.active”)) { //If the list item is active/selected, then…
return false; // Don’t click through – Prevents repetitive animations on active/selected list-item
} else { //If not active then…
//Animate the Description
$(”.main_image img”).animate({ opacity: 0}, 250 );
$(”.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(”.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0? }, 250 );
$(”.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
return false;
}//Close Function

/************/

thank you in advance to make corrections to this code.

Eddie Gear June 27th, 2009

Hi there,

Just wanted to say, this is AWESOME!

Cheers,
Eddie Gear

robb June 28th, 2009

why didn’t i see it really rotate ?
cos all i can see is just like a static non-animated slideshow.
am i missing something ?

hash July 1st, 2009

hi guys,
i have a question. Im sorta new to jquery and css but im was playing around with this. I got most of it working but i dont know if i did my main_page div right. here it is:

Close Me!

Helping Hands
8/11/2009
OMG this is so annoying idk what i am doing.

hash July 1st, 2009

ok last comment failed to show my problem. i shoould have put it in comments here it is again:

//***

Close Me!

Helping Hands
8/11/2009
OMG this is so annoying idk what i am doing.

***//

banny July 2nd, 2009

hi
great tut
what if i have to rotate the items of the list on left side how would u randomize the list items for pics like i want another or different pic to be at first node and selected eevery time a page is visited or refreshed
thnx for help
plz help me on this thnx

viki July 8th, 2009

this is relay great features. u can animated the pictures nice dear just try it

A2b July 12th, 2009

nice work…,
@ Lochlan, please can we see demo for the update that u have done ??

thanks a lot

mblack July 14th, 2009

I don’t think anyone responded before when I asked this, and it could just be that the answer is incredibly obvious, but how can I change the description to be in the “hide” state by default?

Also, anyone interested can check out my application of this plug-in on my website, mattblackdesign.com.

theINtoy July 14th, 2009

\r\nHi.\r\n\r\nI have been following this tut — great — THANKS!.\r\n\r\nI am stuck. I have many images that I want to rotate, and they are all different sizes. They all have the same size thumbnails, which is good, but I wanted to write a handler so that the larger image was normailised to the size of the main image container.\r\n\r\nThis is my first attempt at writing jQuery/JS. I have been around the web and got close to a solution…\r\n\r\nThe problem I have is that the image size never updates. The only image size I get is the image size of the original image. \r\n\r\nHow do I force the DOM (?) anything else to update to the size of the new big image so that I can calculate its size?\r\n\r\nEverything is the same as in the tut except:\r\n\r\n…\r\n $(\”.main_image .block\”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)\r\n $(\”.main_image .block\”).html(imgDesc).animate({ opacity: 0.85, marginBottom: \”0\” }, 250 ); //swap the html of the block, then pull the block container back up and set opacity \r\n $(\”.main_image img\”).attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag);\r\n $(\”.main_image img\”).load(function(){ \r\n centerImage();\r\n }).animate({ opacity: 1}, 250 );\r\n });\r\n…\r\n\r\nAnd I have this function too:\r\n\r\nfunction centerImage() {\r\n var newImg = $(\”.main_image img\”);\r\n var mainImageHeight = $(\”.main_image\”).height(); //Find the height of the \”block\”\r\n var mainImageWidth = $(\”.main_image\”).width(); //Find the height of the \”block\” \r\n var width = $(newImg).width();\r\n var height = $(newImg).height();\r\n // alert( \”1: \” + width + \” x \” + height + \” [\" + mainImageWidth + \" x \" + mainImageHeight + \"]\” );\r\n if(width===0){width = $(newImg).attr(\”width\”);}\r\n if(height===0){height = $(newImg).attr(\”height\”);}\r\n \r\n //alert( \”2: \” + width + \” x \” + height + \” [\" + mainImageWidth + \" x \" + mainImageHeight + \"]\” );\r\n \r\n var top = (mainImageHeight – height) / 2;\r\n var left = (mainImageWidth – width) / 2;\r\n if ( ( mainImageWidth < width ) || ( mainImageHeight heightRatio)\r\n {\r\n ratio = widthRatio; \r\n top = 0;\r\n left = 0; \r\n }\r\n \r\n // calculate the new sizes from the ratio…\r\n width = Math.round(width/ratio);\r\n height = Math.round(height/ratio); \r\n //$(newImg).width(width).height(height);\r\n }\r\n //alert( \”3: \” + width + \” x \” + height + \” [\" + mainImageWidth + \" x \" + mainImageHeight + \"]\” );\r\n $(newImg).css({\r\n marginTop: (mainImageHeight – height) / 2,\r\n marginLeft: (mainImageWidth – width) / 2,\r\n width: width,\r\n height: height\r\n });\r\n \r\n};\r\n\r\n\r\nWithin centerImage, the calls \r\n\r\nvar newImg = $(\”.main_image img\”);\r\n…\r\nvar width = $(newImg).width();\r\nvar height = $(newImg).height();\r\n\r\nALWAYS return the width and height of the 1st image. How do I force it to use the width and height of the newImage?\r\n\r\nAny help would be appreciated.\r\n\r\nThanks.\r\n\r\n

theINtoy July 14th, 2009

Hi.

I have been trying to post the above message for a few days without success here is some of the code:

/************/

…
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 ); //swap the html of the block, then pull the block container back up and set opacity
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag);
$(“.main_image img”).load(function(){
centerImage();
}).animate({ opacity: 1}, 250 );
});
…

Next part to follow in next comment…

theINtoy July 14th, 2009

Part 2:

And I have this function too:

function centerImage() {
var newImg = $(“.main_image img”);
var mainImageHeight = $(“.main_image”).height(); \/\/Find the height of the “block”
var mainImageWidth = $(“.main_image”).width(); \/\/Find the height of the “block”
var width = $(newImg).width();
var height = $(newImg).height();

if(width===0){width = $(newImg).attr(“width”);}
if(height===0){height = $(newImg).attr(“height”);}

var top = (mainImageHeight – height) / 2;
var left = (mainImageWidth – width) / 2;
if ( ( mainImageWidth < width ) || ( mainImageHeight heightRatio)
{
ratio = widthRatio;
top = 0;
left = 0;
}

// calculate the new sizes from the ratio…
width = Math.round(width/ratio);
height = Math.round(height/ratio);
//$(newImg).width(width).height(height);
}

$(newImg).css({
marginTop: (mainImageHeight – height) / 2,
marginLeft: (mainImageWidth – width) / 2,
width: width,
height: height
});

};

Within centerImage, the calls

var newImg = $(“.main_image img”);
…
var width = $(newImg).width();
var height = $(newImg).height();

ALWAYS return the width and height of the 1st image. How do I force it to use the width and height of the newImage?

Any help would be appreciated.

Thanks.

noodlez July 21st, 2009

Hey mblack,

Try this to hide the caption:
//Show Banner
$(“.main_image .desc”).show(); //Show Banner
$(“.main_image .block”).hide();
$(“.main_image .block”).animate({ opacity: 0.85 }, 1 ); //Set Opacity

For everyone trying to get Lochlan’s code to work you will have to fix/retype all his single and double quote tags if you copy and paste from this page. His code does work and makes it auto play but it messes with the captions at the same time.

tiko ilk. July 24th, 2009

how can i have the same script of hide/show but for each picture with out the thumb’s.

in my page i want to have each picture a hide/show button with info on the product instead of having thumbs on the side.

thanx.

Wes July 26th, 2009

Really cool. Got a question…

Is there a way for the image is that is put into the main image box (when the thumbnail is clicked) to be automatically cropped to fit the box?

Or for the window to dynamically change size depending on the size of the original image?

banny July 29th, 2009

hi guys this is what i wanna achieve by rotation of tabs
for eg tab 1 tab 2 tab 3 tab 4 <—this is on first page load tab 2 tab 3 tab 4 tab 1 <—- this is on 2nd page load or refresh tab 3 tab 4 tab 1 tab 2 <—– this is on 3rd page load and so on or i wont mind a total tab rotation regardless of which tab comes first like tab 4 tab 2 tab 1 tab 3 etc i hope u got it wat i meant by rotation so plz help me and hint me regarding this thanx

Matt August 3rd, 2009

I can’t get the automatic image rotating to work?

Can anyone help.

This is a gret tut though.

Matt August 3rd, 2009

The best image rotator i’ve seen on the web so far is on

http://www.bbc.co.uk/radio1/

Check it out, its got a hover and resize etc…

Carlo August 3rd, 2009

BBC rotator Is really cool…

Matthew Hartman August 3rd, 2009

Awesome work! Thanks for adding the fade effect, really simply and effective! Keep up the awesome work!

Bradford Sherrill August 4th, 2009

Great solution for a portfolio site

haberler August 4th, 2009

hi,

Very useful article i will use it.Thank you.

Peter Stacho August 5th, 2009

How would I go about making the description hidden by default?

Currently it shows the expanded description, but I want it to only show the toggle button by default.

Daro August 7th, 2009

Is very cool, but… i need your help!
I need to add 2 arrows for left (previous) and right (next)
Is it possible?

Thank’s! and sorry for my english :S

Noel Wiggins August 7th, 2009

Thanks for the tremendous tutorial.

The final effect is truly awesome and I can’t wait to try it out

Thanks & Regards
Noel from nopun.com
a professional graphic design studio

Thomas August 8th, 2009

Wow Great Tuts, thanks. I don’t know how I missed it.

Unibands August 12th, 2009

Sweet! jQuery clearly showing it’s the best library for JS out there. Thanks for this so much! Might convince my boss to use this instead of MooTools!

darkcable August 12th, 2009

Are you apart of this as well?
http://newsrotator.codeplex.com/

منتديات ماى بكتشرز August 13th, 2009

jQuery clearly showing it’s the best library for JS out there.

Nikola August 14th, 2009

hi,

can you explain a bit more, how to make it automated rotation?

jatropha August 18th, 2009

Really nice effect and implementation. Re: the lag between text and image loading — I have that problem too. Is there a way to preload all images via jQuery? That’d really make this sing. Ld

Jake Knight August 21st, 2009

Thanks for the great tutorial. I’ve really learned a lot by working with the code.
Here’s my version of the tutorial

http://www.wkdesignstudio.com/indexNew.htm

Brad August 21st, 2009

Very nice article. Found exactly what I was looking for.

Dave August 23rd, 2009

Great effect using Jquery…space saver too!

Dave

Kevin Mario August 25th, 2009

Hi guys,

I’m building a version of this here:
http://lunarist.com/studentedge/content-slider-2009/index-slider.html

and I’m having trouble of getting it to auto-rotate.. I’ve followed lochlans method but still can’t get it right.

At the moment I’m quite desperate and am willing to pay ( through Paypal or any payment method you prefer ) so if anyone is confident they can do this, please email me at: kevin.mario at gmail dot com

Looking forward to replies!

raiylo August 27th, 2009

why this slider dont wanna show image ? :/ it looks like that slider cant load image :/

please reply

banny August 28th, 2009

can we use image maps instead of just images with this thing ?

benoit September 14th, 2009

here’s my code with a timer when you click on item

$(document).ready(function() {
$(“.main_image .desc”).show(); //Show Banner
$(“.main_image .block”).animate({ opacity: 0.65 }, 1 ); $(“.image_thumb ul li:first”).addClass(‘active’); //runs function on click
$(“.image_thumb ul li”).click(function () {
var imgAlt = $(this).find(‘img’).attr(“alt”);
var imgTitle = $(this).find(‘a’).attr(“href”);
var imgDesc = $(this).find(‘.block’).html();
var imgDescHeight = $(“.main_image”).find(‘.block’).height();

if ($(this).is(“.active”)) {
return false;
} else {
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt});
});
}

$(“.image_thumb ul li”).removeClass(‘active’);
$(this).addClass(‘active’);
return false;$active = $(this);
slideSwitchClick();
})
.hover(function(){

$(this).addClass(‘hover’);
clearInterval(playSlideshow);
playSlideshow = setInterval(’slideSwitchTimed()’, 7000 );
}, function() {
$(this).removeClass(‘hover’);
});

//runs function, set timer here
$(function() {
playSlideshow = setInterval(’slideSwitchTimed()’, 7000 );
});
});

function slideSwitchTimed() {
$active = $(‘.image_thumb ul li.active’).next();
if ( $active.length == 0 ) $active = $(‘.image_thumb ul li:first’);
slideSwitch();
}

function slideSwitchClick() {
slideSwitch();
}

function slideSwitch() {
var $prev = $(‘.image_thumb ul li.active’);

//Show active list-item
$prev.removeClass(‘active’);
$active.addClass(‘active’);

//Set Variables
var imgAlt = $active.find(‘img’).attr(“alt”);
var imgTitle = $active.find(‘a’).attr(“href”);
var imgDesc = $active.find(‘.block’).html();
var imgDescHeight = $(“.main_image”).find(‘.block’).height();

if ($(this).is(“.active”)) {
return false;
} else {

$(“.main_image img”).animate({ opacity: 0}, 250 );
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
return false;
}

PSD to HTML September 14th, 2009

This is really awesome. It is very unique and exactly what I have been looking for. This will go nicely for a project I am working on.

Thanks for this. Keep up the good work amigo, greatly appreciated.

Archane September 17th, 2009

I’m wondering if anyone can help me with a minor niggle I have found. The opaque box that contains the text is obviously designed to have a degree of transparency, however, this also gets applied to the html within it, making text lose is smoothness, any suggestions on how this be avoided?

Irwin September 23rd, 2009

Is it possible to link to a specific image within the rotator?

AnubisibunA September 29th, 2009

anyone tried this using the jQuery UI [ tabs ] as the list items?

I’ve used something like the following on another slider w/good results

$(“#id”).tabs({
event:’mouseover’,
fx:{opacity:’toggle’, duration:’fast’}
// following is needed to prevent image jump
}).mouseout(function(){
$(this).tabs(‘abort’);
});

PorKy October 2nd, 2009

Hi everyone I’ve been reading all your comments since a little moment now but when I try “apts” or “benoits” script like this:

$(document).ready(function() {
$(”.main_image .desc”).show(); //Show Banner
$(”.main_image .block”).animate({ opacity: 0.65 }, 1 ); $(”.image_thumb ul li:first”).addClass(’active’); //runs function on click
$(”.image_thumb ul li”).click(function () {
var imgAlt = $(this).find(’img’).attr(”alt”);
var imgTitle = $(this).find(’a’).attr(”href”);
var imgDesc = $(this).find(’.block’).html();
var imgDescHeight = $(”.main_image”).find(’.block’).height();

if ($(this).is(”.active”)) {
return false;
} else {
$(”.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(”.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(”.main_image img”).attr({ src: imgTitle , alt: imgAlt});
});
}

$(”.image_thumb ul li”).removeClass(’active’);
$(this).addClass(’active’);
return false;$active = $(this);
slideSwitchClick();
})
.hover(function(){

$(this).addClass(’hover’);
clearInterval(playSlideshow);
playSlideshow = setInterval(’slideSwitchTimed()’, 7000 );
}, function() {
$(this).removeClass(’hover’);
});

//runs function, set timer here
$(function() {
playSlideshow = setInterval(’slideSwitchTimed()’, 7000 );
});
});

function slideSwitchTimed() {
$active = $(’.image_thumb ul li.active’).next();
if ( $active.length == 0 ) $active = $(’.image_thumb ul li:first’);
slideSwitch();
}

function slideSwitchClick() {
slideSwitch();
}

function slideSwitch() {
var $prev = $(’.image_thumb ul li.active’);

//Show active list-item
$prev.removeClass(’active’);
$active.addClass(’active’);

//Set Variables
var imgAlt = $active.find(’img’).attr(”alt”);
var imgTitle = $active.find(’a’).attr(”href”);
var imgDesc = $active.find(’.block’).html();
var imgDescHeight = $(”.main_image”).find(’.block’).height();

if ($(this).is(”.active”)) {
return false;
} else {

$(”.main_image img”).animate({ opacity: 0}, 250 );
$(”.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(”.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(”.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
return false;
}

it just doesn’t work . I’m a JS beginner so if someone could help me I would really appreciate it .

PorKy October 2nd, 2009

It’s ok guys it works just forgot to write something in my script. So the mistake came from me

The scripts work perfectly thanks !

mark October 6th, 2009

Cool. very cool, but it would be nice if it has a loading before the picture goes up..

NICKD October 10th, 2009

Can I find a source code of this somewhere?

Steven Snell October 10th, 2009

Nickd,
I’m not sure what you’re asking for. Soh has provided all of the code in the tutorial.

apt October 10th, 2009

The code still does not work with me.

I do not know how he has run at Porky?

Can you tell us what you do Porky, or simply put your code that works here?

Thank you.

Travis October 16th, 2009

When I use Benoit’s code everything seems to be working wonderfully except for the show/hide button to hide the “.block” of text (or the preview text on the opacity layer).

I added:

$(“a.collapse”).click(function(){
$(“.main_banner .block”).slideToggle();
$(“a.collapse”).toggleClass(“show”);
return false;
});

because there was no reference to “a.collapse” in Benoit’s code but it still doesn’t work. Any ideas?

Did I place it in my script wrong? Here’s where I put it:

[top of script goes here]
……..
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
return false;

// I added this
$(“a.collapse”).click(function(){
$(“.main_banner .block”).slideToggle();
$(“a.collapse”).toggleClass(“show”);
return false;
});
// this is the last of what I added

}

tops-post.com October 16th, 2009

Great tut

Great effect using Jquery

i like it !

tutorial blog October 19th, 2009

thank for share.

it very useful

Just some guy October 22nd, 2009

For those of you having trouble getting the auto rotate scripts to work – watch the character encoding when you copy and paste the code from the comments section. Make sure all double and single quotes are correct according to your encoding.

Jeff October 22nd, 2009

Can the thumbs on the right side be repeated as well on the left side? I would like to have four on each side of the main image than six on one side. How to go about this?

jyoseph October 23rd, 2009

Freaking really solid instruction and demo dude, nicely done. Thanks for sharing!

mackem October 26th, 2009

Hi,
Great tutorial, love the effect. Modified it for an index page:

http://web.mydns.net.nz/explorenz.co.nz/index.html

Got a couple of glitches. The 2nd line of the small text in the main image box is flush left to the box for some reason. Other problem is loading of the main images. Very slow sometimes. Needs at least one complete cycle of clicks before it will work smoothly.

stylin328 October 27th, 2009

Anyway to make it so the big images are clickable to a url? Not just the download now button but the main big image?

working on this : http://dev.pure9studios.com/_djbooth/JQ/

neill October 29th, 2009

Benoits script is almost perfect except for me, the image only fades on the auto rotate?

If you click one of the buttons, the image pops straight up and doesnt fade in.

Anybody else got this problem.

Steve October 29th, 2009

Excellent! Top stuff!

snick October 31st, 2009

The image loads lit bit slow.Can increase the speed.

Jessica November 1st, 2009

I love your image rotator! Excellent design! What I was wondering was if it is possible to have more than 5 images and if it can automatically go to the next image on the list or have a next button?

Thanks in advance!

Marcelo Gomes November 6th, 2009

Hi,
I like very much this script.

But, I made a little modification to use with news. Got the original code with effect, add a few lines with rotation and change few tags in div for Google SEO. The link cannot point to a imagem, but the final url.

All code and css can be view in http://www.bebidaboa.com.br

Enjoy!

Norm Works November 6th, 2009

Hello
Thank you.
Nice aplication.

tuna November 10th, 2009

good tutorial, thanks..

saidawy November 12th, 2009

nice tutorial

Thanks for this so much!

Trisha November 14th, 2009

This is amazing! Gorgeous and it totally works, even for a non programmer. Im gonna use it all the time… Soh, you can design your ass off.

Jessica November 15th, 2009

Thank you Marcelo! This a great riff off the original which is also terrific!

Michael Azar November 16th, 2009

This is awesome, i did notice there is a delay after the image changes. So you click, the descr block goes down and comes up with new descr, then the image swaps. is there any way to correct this? In my sample the images are all < 50k. Can anyone help me please? here is my link:

http://dev.linkedinfaith.com/dev/slideViewer/slideViewer_barNav.cfm

Thanks, great job!

saidawy November 17th, 2009

Great tutorial

Thank you

paigrove November 18th, 2009

to travis:

$(document).ready(function() {
$(“.main_image .desc”).show(); //Show Banner
$(“.main_image .block”).animate({ opacity: 0.65 }, 1 ); $(“.image_thumb ul li:first”).addClass(‘active’); //runs function on click
$(“.image_thumb ul li”).click(function () {
var imgAlt = $(this).find(‘img’).attr(“alt”);
var imgTitle = $(this).find(‘a’).attr(“href”);
var imgDesc = $(this).find(‘.block’).html();
var imgDescHeight = $(“.main_image”).find(‘.block’).height();

if ($(this).is(“.active”)) {
return false;
} else {
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt});
});
}
$(“a.collapse”).click(function(){
$(“.main_image .block”).slideToggle();
$(“a.collapse”).toggleClass(“show”);
});

$(“.image_thumb ul li”).removeClass(‘active’);
$(this).addClass(‘active’);
return false;$active = $(this);
slideSwitchClick();
})
.hover(function(){

$(this).addClass(‘hover’);
clearInterval(playSlideshow);
playSlideshow = setInterval(’slideSwitchTimed()’, 7000 );
}, function() {
$(this).removeClass(‘hover’);
});

//runs function, set timer here
$(function() {
playSlideshow = setInterval(’slideSwitchTimed()’, 7000 );
});
});

function slideSwitchTimed() {
$active = $(‘.image_thumb ul li.active’).next();
if ( $active.length == 0 ) $active = $(‘.image_thumb ul li:first’);
slideSwitch();
}

function slideSwitchClick() {
slideSwitch();
}

function slideSwitch() {
var $prev = $(‘.image_thumb ul li.active’);

//Show active list-item
$prev.removeClass(‘active’);
$active.addClass(‘active’);

//Set Variables
var imgAlt = $active.find(‘img’).attr(“alt”);
var imgTitle = $active.find(‘a’).attr(“href”);
var imgDesc = $active.find(‘.block’).html();
var imgDescHeight = $(“.main_image”).find(‘.block’).height();

if ($(this).is(“.active”)) {
return false;
} else {

$(“.main_image img”).animate({ opacity: 0}, 250 );
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
return false;
}

john November 25th, 2009

Hi ,
I am new to jquery and please help me out to accomplish this small feature in this gallery.
How can i change image source of thumbnail on active/selected and hover.
Many Thanks,
John

joh November 25th, 2009

how can i change the thumbnail image on hover or selected.
Thanks

Lala November 25th, 2009

Thank you for share this tutorial,
I’ll practice it shortly

Sabrina November 26th, 2009

Hello,

This is exacly what i am looking for. but one question.

(see my website) http://www.mellowmedia.nl/test

The Hover where there come an arrow that should stay if it is active…

how do i do that?????

( i’ll hope i’m clear enough…)

greets

Sabrina

jazio November 28th, 2009

By adding the property display:none to .main_image .block you can set the .desc of the .main_image to stay hide until the button is hit. This is useful when you find the image description annoying.

Regards

apt November 29th, 2009

I am looking how to get the mouseover effect on small images to see larger image corresponding

jazio December 2nd, 2009

Soh it would be useful to have the big picture clickable so I can point to a page section which the picture describes.

I noticed you only can set one anchor for all six pictures which is inconvenient. The other anchors are occupied. I also tried to set the onclick (window.open… handler on anchors but it won’t work. Do you have an idea?

Many thanks and appreciation

Jazio

Mustafa December 2nd, 2009

GREAT !

indialike December 3rd, 2009

Great tutorial, I like very much this script. thanks

insaat December 7th, 2009

was really good work thanks:)

sahibinden December 7th, 2009

I did this work was very good:)

C Kent December 9th, 2009

Hi,

Does anyone have sample code they could share regarding putting this into wordpress. The part I am stuck on is the “main_image”? I know I can while loop through the image_thumb list.

Thank you

jazio December 10th, 2009

Watch http://www.jazio.net for a demo.

Hein December 11th, 2009

Great Suff!!! Exactly what i’m looing for! Going to change the skin abit and put this home page on MyanmarBagan.com.

andreas December 21st, 2009

in case you are linking images from another server, so as to avoid this delay that some of you might be experiencing, you can preload your images:
(put this script directly under before anything else)

jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("”).attr(“src”, arguments[i]);
}
}

$.preloadImages(“here you add the links to your images”,
“http://www.sohtanaka.com/web-design/examples/image-rotator/banner2.jpg”,
“http://www.sohtanaka.com/web-design/examples/image-rotator/banner4.jpg”);

Kevin Mario December 21st, 2009

I just realized that the link to my example is broken, please visit:

http://www.lunarist.com/studentedge/new-website-2009/index-slider-general.html

instead for a tried-and-tested case example implementation of Soh’s Image Rotator

Kev

pkj December 22nd, 2009

how to call the fn in reverse? That is on loading the the marker should hide and not in toggle case. please help me

Michel December 22nd, 2009

I could use some help. I’m trying to get this really cool Rotator in my Magento website.

JQuery is installed trough the Magento System:

The javascript code for this rotator:
http://www.bengeltje.com/js/jquery/banner.js

The CSS code for this rotator:
http://www.bengeltje.com/skin/frontend/default/f002/css/banner.css

I hope you can help me!

James December 25th, 2009

Fabulous tutorial. Helped a lot in my site redesign. Thanks.

Rob December 29th, 2009

This is an awesome feature. I really appreciate the work.

I have one problem I am hoping I can get help with though. I have everything set to auto rotate but the images do not change.

Here is my site:

http://www.pierevents.com/

and here is the code:

// Code for News Rotation… Need jQuery
// Changed by Marcelo Gomes – marcelo@webemsegundos.com.br
function slideSwitchTimed() {
$active = $(‘.image_thumb ul li.active’).next();
if ( $active.length == 0 ) $active = $(‘.image_thumb ul li:first’); //goes back to start when finishes
$active.trigger(“rodatempo”);
}
$(document).ready(function() {

//Show Banner
$(“.main_image .desc”).show(); //Show Banner
$(“.main_image .block”).animate({ opacity: 0.85 }, 1 ); //Set Opacity

$(“.main_image img”).click(function(){
if ($(this).attr(“codlink”) != ”) {
document.location = $(this).attr(“codlink”);
}
});
$(“.main_image .block”).click(function(){
if ($(this).attr(“codlink”) != ”) {
document.location = $(this).attr(“codlink”);
}
});

$(“.image_thumb ul li”).bind(“rodatempo”, function(){
//Set Variables
var imgAlt = $(this).find(‘img’).attr(“alt”); //Get Alt Tag of Image
var imgTitle = $(this).find(‘a’).attr(“img”); //Get Main Image URL
var imgDesc = $(this).find(‘.block’).html(); //Get HTML of block
var imgDescHeight = $(“.main_image”).find(‘.block’).height(); //Calculate height of block

if ($(this).is(“.active”)) { //If it’s already active, then…
return false; // Don’t click through
} else {
//Animate the Teaser
$(“.main_image img”).animate({ opacity: 0}, 250 );
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image .block”).css(“margin”, “0px 0px 0px 5px”).css(“fontSize”, “14px”).css(“fontWeight”, “bold”);
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}).css(“cursor”,”pointer”).animate({ opacity: 1}, 250 );
});
}

$(“.image_thumb ul li”).removeClass(‘active’); //Remove class of ‘active’ on all lists
$(this).addClass(‘active’); //add class of ‘active’ on this list only
return false;

}) .hover(function(){
$(this).addClass(‘hover’);
}, function() {
$(this).removeClass(‘hover’);
});

//Click and Hover events for thumbnail list
$(“.image_thumb ul li:first”).addClass(‘active’);
$(“.image_thumb ul li”).click(function(){
clearInterval(playSlideshow);
$(this).trigger(“rodatempo”);
});

//Toggle Teaser
$(“a.collapse”).click(function(){
$(“.main_image .block”).slideToggle();
$(“a.collapse”).toggleClass(“show”);
});

playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
$(“#main_image”).css(“display”, “none”);
$(“.image_thumb”).css(“display”, “block”);

});
// End Code for News Rotation

Any Ideas???

Jeff December 29th, 2009

Maybe I missed it, but has anyone found a way to inject html (ajax call) into where the main image shows & maybe showing a loading gif while it loads?

Any urls or pointers in the right direction would be greatly appreciated.

Rob December 29th, 2009

I also just noticed that when you click the links on the right it just pulls up the image it is referencing and not changing the rotator.

Guillem December 31st, 2009

Very nice piece of code we have here!

But according to W3C we can’t have divs embeded into lists.
To make it degrade, this is no big deal, you just have to use HTML anchor to make it work.

Thanks to you I make my move to Jquery, Mootools is okay but not as powerfull as JQ.

Thor January 7th, 2010

Wery nice.
I did add this but I have proplem with adding my text as we use special like æ, ö, þ and I cant use thta?

How can I fix that?

Thanks

Guillem January 7th, 2010

@Thor :

You just have to change the charset of your HTLM code to UTF-8, then it should work

Thor January 7th, 2010

Hi and thanks.
I already has it in UTF-8 ? I did add this to Prestashop open source website on my localserver but I´m still having proplem b.c of this.

Guillem January 7th, 2010

Well then, you better post your source code somewhere on the net so we can help.

It could be your sql server returning raw data into your html document.

Jeff Schram January 7th, 2010

I know I’m pretty late to this post, I was recently looking for a rotator and was happy with this. I needed to automate it, as many of you did too. I think I came up with a pretty simple solution, I added just a few extra lines and a couple functions. I’m not a jQuery wiz, there might be better ways of doing this, but it works. I even made the rotation stop when you hover over the main image area.

Here’s the code, I notated where I made the changes to the original.

ps, I added my contact info in the notations not to get credit, but just to give my email if you have any questions.

$(document).ready(function() {

//Show Banner
$(“.main_image .desc”).show(); //Show Banner
$(“.main_image .block”).animate({ opacity: 0.85 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$(“.image_thumb ul li:first”).addClass(‘active’);

// * Code added by Jeff Schram, SchramDesign, http://schramdesign.com, email@schramdesign.com
// * Adds a class ‘last’ to the last li to let the rotator know when to return to the first
$(“.image_thumb ul li:last”).addClass(‘last’);

$(“.image_thumb ul li”).click(function(){
//Set Variables
var imgAlt = $(this).find(‘img’).attr(“alt”); //Get Alt Tag of Image
var imgTitle = $(this).find(‘a’).attr(“href”); //Get Main Image URL
var imgDesc = $(this).find(‘.block’).html(); //Get HTML of block
var imgDescHeight = $(“.main_image”).find(‘.block’).height(); //Calculate height of block

if ($(this).is(“.active”)) { //If it’s already active, then…
return false; // Don’t click through
} else {
//Animate the Teaser
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt});
});
}

$(“.image_thumb ul li”).removeClass(‘active’); //Remove class of ‘active’ on all lists
$(this).addClass(‘active’); //add class of ‘active’ on this list only
return false;

}) .hover(function(){
$(this).addClass(‘hover’);
}, function() {
$(this).removeClass(‘hover’);
});

//Toggle Teaser
$(“a.collapse”).click(function(){
$(“.main_image .block”).slideToggle();
$(“a.collapse”).toggleClass(“show”);
});

// * Code added by Jeff Schram
// * if we are hovering over the image area, pause the clickNext function
// * by default, our new pauseClickNext variable is false
pauseClickNext = false;
$(“.main_image”).hover(
function () {
pauseClickNext = true;
},
function () {
pauseClickNext = false;
}
);

// * Code added by Jeff Schram
// * Define function to click the next li
// * notice that it checks for a class of ‘last’, we added that above
var clickNext = function(){
if(!pauseClickNext) {
/// find the next li after .active
var $next_li = $(“li.active”).next(“li”);
if($(“li.active”).hasClass(“last”) ){
$(“.image_thumb ul li:first”).trigger(“click”);
} else {
$next_li.trigger(“click”);
}
}
};

// * Code added by Jeff Schram
// * setTimeInterval to run clickNext
setInterval(clickNext, 5000);

});//Close Function

SmashDesign January 8th, 2010

great toturial

thanks a lot

izdelava strani January 10th, 2010

having difficulties with this one, but its so intriging i have to try it and set it up to work

Mark Lee January 18th, 2010

Here you can see better results.www.accesstibettravel.com/default.aspx

Corey Jones January 19th, 2010

Great Tutorial. This is perfect for a project I am currently working on. I will post final when I am done!

swine January 25th, 2010

I can’t figure out how to make the large image clickable so when it does come up, then you just have to click the large banner instead of the link provided in the tag.????????

mackem January 27th, 2010

Hi, used it on the index page of http://www.explorenz.co.nz
Doesn’twork in Safari 2. Any ideas?

Seamus Fitzpatrick February 2nd, 2010

Just wondering, is it possible to add a next and previous buttons to this gallery??as well as having the option to click to the next image

Corey Jones February 4th, 2010

As promised…here is a link to my version of the rotator.

http://www.organic-baby-resource.com

I wish I could get some help on the auto-rotate. I’ve tried to paste a few of the codes here, and they haven’t worked, so I stayed basic.

Has anyone worked it out? I’m currently a jQuery newbie.

Kevin Mario February 4th, 2010

@Corey Jones:

Check by case example:
http://www.lunarist.com/studentedge/new-website-2009/index-slider-general.html

it’s got custom auto-rotate enabled

Eoin Casey February 5th, 2010

Anyone able to get the slideshow, fade in, forward backward buttons and the “open/close” text captions? Im having trouble with it, as all work, besides when you click on close on the captions!

Corey Jones February 5th, 2010

@Kevin

Hmmm…that didn’t work for me for some reason. Just straight replacing the code did not produce an auto-rotate sequence. IT was still static, except now the description window changed dimensions, which I’m sure I can figure out how to change it back. In fact, when I clicked on the banner to load into the window, the first picture faded out and then I went immediately to the article. The thumbnail did not load into the main image window.

Corey Jones February 5th, 2010

you can find a link to the test here.

http://www.thejoneslife.net/chosenway/Clients/organicbaby/articlerotator.html

David McKillen February 8th, 2010

It would also be nice to be able to make the larger images (that appear) hyperlinks – as from a usability perspective many people might think to click on the main image – or think it to be a link. I suppose you might be able to do something with $(“.main_image”).onclick( …. great tut though!

Alan February 9th, 2010

I managed to get my custom design with the timer working great now. Thanks for the great tutorial and help guys.

http://www.itsfilmtastic.co.uk/contentslider/contentslider.html

David McKillen February 9th, 2010

Here is another version of the code that includes rotation but prevents it from moving forward if you are mousing over the list of nav links on the right. It also adds the ability to put a link on the larger image too if you want (not just the slide up box text content). For the image link bit you will have to give each image a class name (eg: ) -> here I just added class=”ramp” so now the javascript can act on it on click. Feel free to email if I’ve messed anything up or you spot something: david@mckillen.net. Huge tribute though to Soh and Jeff Schram too – nice work guys.

$(document).ready(function() {

//Show Banner
$(“.main_image .desc”).show(); //Show Banner
$(“.main_image .block”).animate({ opacity: 0.80 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$(“.image_thumb ul li:first”).addClass(‘active’);

// * Code added by Jeff Schram, SchramDesign, http://schramdesign.com, email@schramdesign.com
// * Adds a class ‘last’ to the last li to let the rotator know when to return to the first
$(“.image_thumb ul li:last”).addClass(‘last’);

$(“.image_thumb ul li”).click(function(){
//Set Variables
var imgAlt = $(this).find(‘img’).attr(“alt”); //Get Alt Tag of Image
var imgTitle = $(this).find(‘a’).attr(“href”); //Get Main Image URL
var imgDesc = $(this).find(‘.block’).html(); //Get HTML of block
var imgDescHeight = $(“.main_image”).find(‘.block’).height(); //Calculate height of block

if ($(this).is(“.active”)) { //If it’s already active, then…
return false; // Don’t click through
} else {
//Animate the Teaser
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 ,
function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.80, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt});
});
}

$(“.image_thumb ul li”).removeClass(‘active’); //Remove class of ‘active’ on all lists
$(this).addClass(‘active’); //add class of ‘active’ on this list only
return false;

}) .hover(function(){
$(this).addClass(‘hover’);
}, function() {
$(this).removeClass(‘hover’);
});

// * Code added by Jeff Schram
// * if we are hovering over the image area, pause the clickNext function
// * by default, our new pauseClickNext variable is false
pauseClickNext = false;

$(“.main_image .ramp”).hover(
function ()
{
pauseClickNext = true;
}
,
function ()
{
pauseClickNext = false;
}
);

… code continued in next post due to some posting glitch. >>>

David McKillen February 9th, 2010

$(“.main_image .ramp”).hover(
function ()
{
var obj= document.getElementById(“main-image”);
obj.style.cursor=’pointer’;
}
);

$(“.main_image .ramp”).click(
function ()
{
if ( document.getElementById(“one”).className == “active”)
{
window.location=”http://www.google.com”;
}
else if ( document.getElementById(“two”).className == “active”)
{
window.location=”http://www.mckillen.net”;
}
else if ( document.getElementById(“three”).className == “active”)
{
window.location=”http://www.hoo.com”;
}
else if ( document.getElementById(“four”).className == “active”)
{
window.location=”http://www.tape.com”;
}
else if ( document.getElementById(“five”).className == “last active”)
{
window.location=”http://www.ask.com”;
}
}
);

//Toggle Teaser
$(“a.collapse”).click(function(){
$(“.main_image .block”).slideToggle();
$(“a.collapse”).toggleClass(“show”);
});

$(“.image_thumb”).hover(
function ()
{
pauseClickNext = true;
}
,
function ()
{
pauseClickNext = false;
}
);
// * Code credit to Soh Tanaka http://designm.ag/ and Jeff Schram, SchramDesign, http://schramdesign.com
// * Define function to click the next link
// * notice that it checks for a class of ‘last’, we added that above
var clickNext = function(){
if(!pauseClickNext) {
/// find the next li after .active
var $next_li = $(“li.active”).next(“li”);
if($(“li.active”).hasClass(“last”) ){
$(“.image_thumb ul li:first”).trigger(“click”);
} else {
$next_li.trigger(“click”);
}
}
};

// * Code added by Jeff Schram
// * setTimeInterval to run clickNext
setInterval(clickNext, 7000);

});//Close Function

http://www.mckillen.net web design

David McKillen February 9th, 2010

Sorry – image example didn’t come through …. it was:

a class=”ramp” href=”http://www. … etc.