Create a CSS/jQuery Image Rotator with Descriptions

Really great tut. Thanks for this one!

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

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

Great tutorial. I like the clean and usable design.

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,
On my connection the image changes immediately after the description. But on a slower connection there may be a little delay.

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

Steven Snell,

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

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

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!

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

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

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

Looking forward to the next version.

Awesome!

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

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?

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!

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.

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.

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.

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.

Nick Sumpter, your script does work with google chrome 😉

no zip files?

what can create that script to joomla module?

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

wow, very very nice script……. looks great

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 🙂

Love it. Thank you.

please somebody help me

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?

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.

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 ?

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.

***//

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

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.

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…

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.

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?

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

Can anyone help.

This is a gret tut though.

BBC rotator Is really cool…

Great solution for a portfolio site

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.

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

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

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

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

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

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!

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

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.

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

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

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

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

}

thank for share.

it very useful

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?

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.

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.

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

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!

good tutorial, thanks..

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.

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!

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;
}

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

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

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

GREAT !

was really good work thanks:)

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

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

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

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!

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 – [email protected]
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???

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.

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

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.

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 protected]
// * 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

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

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

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

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.

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!

you can find a link to the test here.

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

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

$(“.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

Anyone have the problem that the last image, when it fades out, is seen just before the next image is loaded?

@Eoin Casey

Remember too that the data sets (images, text, dates… etc) can be loaded before hand with php wish ease. Makes this very dynamic, control the jquery/css look, let php do the foot work and push in the information. This is much smoother just dropping an image into a directory, adding a description, auto time stamp on addition.

@Darren,

Depends on whether you want this done dynamically with CSS or javascript or you are just wondering how the code sets it. You could do something similar to what is done with CSS to set a navigation button as “active”. In other words, “on page load set div X as active”.

If however you are just wondering how to change the default active div statically (just hard coding it), you will notice the active div code states instead of .

Does that help at all?

David McKillen
[email protected]
Twitter: davidmckillen

@Darren

I should add – in order to change the li that the page automatically displays you will have to give each li an id and then change this line of code adding “three” or whatever id you give it:

$(“.image_thumb ul #three li:first”).addClass(‘active’);

Also you will have to change the default large picture div that displays when the page loads as currently it simply is a copy of the first li. So if for example you want the third li with id three to be the start li then you’ll have to replace the generic code for the default larger image div to be the same as that of the corresponding div for the third li. (Hard to explain but I hope that helps?? :)).

Oh! Nice work Darren, way to get it sorted man (glad I could help)

David McKillen
Twitter: davidmckillen

ps. once you change the product and come back everything is fine and it displays only one title/desc…
is there a possibility to to smth like on page load show first title and desc?

Hey you guys making code modifications why not post to pastebin or something of the like since posting your modified code into the comments area has turned into a total nightmare to go through? Especially those doing the oops my code didn’t quite post right etc… cmon guys!

sorry man!

didn’t know about that. first try.
http://pastebin.com/m25854274

won’t happen again
peace
ky

Love this code! Excellent and powerful!

See my implementation on the homepage here: – ImageArcade – Photography By Steve Ayres

Thanks,
Steve

We are looking for someone to help us integrate this code into a basic coldfusion page. Anyone interested in making a couple hundred dollars? I need this quick and don’t want to take the time to learn. Please email me at [email protected] – Basically I need to output 5 records from a DB and use the pics and info in those records into this code…

Hello-

Not sure if this is still an active discussion but does anyone know if you could pass video in this? If so could you point me in the right direction?

Its got something to do with image loading delay. You could place all your images into 1 big image and use background positioning in css. But i’m sure theres a better solution. Or better still if all the images loaded on page open. Either ways its very annoying.

Thank you for sharing this tutorial,

P.S. would like to make the whole .main_image a link as well.

it works amazing thanks a lot, JUST ONEEE little thing,
everytime i click on”hide or show information” it automatically makes my scroll bar from my window to go to the top of my page,
why? how can i fix it! it is annoying.

very thanks, great tutorial…

To Jeff:
Is there a way to make this the opposite? Hide the description and click to show it?

yeah You can do it very easyly:

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

Have a good day 😉

found this site here that is helpful but i still can not get it to work without the black outline…
http://jquery.khurshid.com/ifixpng.php

wow…

this is what i’m looking for.
thx…

I BEG FOR HELP 🙁

just one detail, when i click to hide the info, it goes down like its supposed to, but at the same time it send me to the top of my page and its annoying…¿why? what code i should use to make it stay where i am in the page?

this is the code for the click event that i have:

//Toggle Teaser

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

});//Close Function

shoul it be blocked or something so it wont move?

@ChrisMolnar:

To answer your other questions – this might not be the best way to do it but again it works:

1) When the images fade in and out the first time, they don’t transition smoothly. Would preloading the images get rid of that hiccup? – It is my understanding yes that preloading the image would fix this.

2) Is there a way to remove the “#” from the Hide/Show click? If the user is not at the top of the page, it bumps the browser to the top. – Yes, again it might not be “up-to-code” so to speak but simple removing the href=”#” fixes that. A better way would be to utilize onclick rather than a href here too but that’s a bit more coding :).

Follow me on Twitter (if you dare 🙂 ): davidmckillen
[email protected]

@James – did you try assigning your existing UL/LI tabs specific CSS classes? That way you specific their styles.

Still hoping someone could give me a point in the right direction on passing video in image fields.

@Angela

Should work if all your references to the scripts and images are correct unless I’m mistaken. Maybe check to make sure all links are accurate.

David McKillen
Spoccer.com
Twitter: Spoccer

Is there a way to embed vimeo/youtube movies in the rotator.. or has anyone a workaround for this already?
Thnx in advance!

This is nice, but image takes tooo much time to load.

Hi David,

Thanks we are a search engine marketing company and was looking for some basic layouts that clients may benefit for rather than using flash.

Cheers
Glenn

If I have a lot more thumbnail how can I make only a few visible and also scrollable with the mouse-wheel

Hi
I wanted to develope this great tutorial further with embading some swf file instead of jpg for one of the slides, but when i put in this part a swf it just doesnt display anything. Does anyone knows how to implement flash into it ?

here is the code i try :

it works for gifs but its not what im searching for.

^^^^^^^^
note – above after the e.g. the example is missing (not sure why??? I definately put it in).

I can confirm this method works. Hope this helps.

No problemo Mike, glad I could help!

Rafal

I used the the following for flash loads

First I created a small html file with a div to hold the call to the flash file like below

In the main html file that call the jquery I create a element where I wanted to display the flash file

then in the script file after the variables have been set I put the following code. (I took out the animation stuff as I did not need it for my testing.)

$(document).ready(function() {
var pageContent = “”;

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

//Set Variables
var urlPage = $(this).find(‘a’).attr(“href”); //Get Main page URL
var urlTitle = $(this).find(‘h2’).html();
var urlDesc = $(this).find(‘.block’).html(); //Get HTML of block
var urlDescHeight = $(“.contents_page”).find(‘.block’).height(); //Calculate height of block

if ($(this).is(“.active”)) { //If it’s already active, then…
return false; // Don’t click through
} else {
if (urlTitle == ‘Home’) {
pageContent = ‘.flashinsert’;// the class name where I want the flash

}
$(“.contents_page span”).load(urlPage+pageContent); //load the section into a

}

$(“.menu 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(){
$(“.contents_page .block”).slideToggle();
$(“a.collapse”).toggleClass(“show”);
});

});//Close Function

in the CSS i put the following

.flashinsert {
position: relative; /*–Declare X and Y axis base–*/
/*border: 2px red solid;*/
left: 0px;
top: 0px;
width: 766px;
}

I hope it helps. I found the code for the flash works for both IE and FF

cheers

how do I submit html code for people to view

This is my second attempt at using this check it out.

http://macbeth.wkdesignstudio.com/index.htm#

The first is at http://www.wkdesignstudio.com

Let me know what you think.

Indeed, this is very useful tuorial for our programmer!

I could not make this script work, someone could send me the files to analyze?

magazinecds at gmail.com

Thank You!

Guys
thanks for the great tutorial. I have used this as the basis for a new website that has text, images and flash. I have managed to get the script to do the following if anyone is interested.

load images (already did)
load files (or fragments)
load swf’s (when needed)

The site also uses NYROModal for image effects
the site also lets your links work

Have a look and let me know what you think

http://www.kitsheds.com.au:9100/sidach_jd/

this is only a test site and I need to get the following working

1. change menu context depending on link clicked (eg show products menu if products clicked)

I hope it helps. I am not a coder but am having fun thanks to your script

Cheers

Is there any way to disable the “desc” div and the hide/close button for the 2nd and 3rd thumbnails and only have the description for the first thumbnail. My thumbs are related to the first image and I only want a description on the first image.

Anyone else having issues running this with jQuery 1.4.2 ?

Initially got the standard “$ is not a function” error, so added

jQuery.noConflict();

… but still getting the same error. I intend to through this onto a Magento store, which is rife with issues with Scripatculous reverse integration, so wanted something very clean that degrades well.

However, I currently can’t get it running locally on 1.4.2.

Cheers,
Todd

btw – I am using the above as a starting point for a fully user-managed integrated slider. PHP/MySQL back-end, passing XML into the above so my users can manage what is appearing in the slider, and load-up specials etc… Active/Inactive flags, Ordered Lists, Transition Effect etc…

It will be skinned very specifically for a single usage, but if anyone wants the source for their own use, then get in touch.

Should be done in a few days.

To complicated!:(

Hi Soh,

Can this CSS/JQuery image gallery be used with a number of different transitions? For instance, someone above mentioned using automated fades…could a person use slides? For instance…images automatically sliding from top down or left to right…etc.?

Is this possible? Also, let’s say I only wanted 4 description panes on the right instead of 6….can this be changed easily? In other words, is this a fully customizeable gallery where size, descriptions, colors of fonts, etc. can be easily changed?

Thanks,
Rob

Thank you very Much … I’ll use it

Thank you very Much for this great content We will use it a.s.a.p.

Great tutorial and awesome slider. I love Jquery. thanks for the post.

Awesome tutorial just what I needed for a website I’m working on but I need to know if I could change the image sizes and if so could someone please explain how

Thanks

hey ! thts great guide
will try on my blog soon

thanks

Hi
I am new in css/jquery, this article is very good for me in case of css and jquery knowledge, please share like this article.

Thanks again

Rafal

contact me directly via my email address

johnadenney at bigpond dot com and I will walk you through what I did

cheers

dupledge

I need some guidance here. Based on what I’ve seen in here, I’ve created a slideshow i’m very happy with.

I’ve run into what I think is a very simple fix, but I don’t know what it is!

Can you help me integrate this:

http://bit.ly/cFQ8J4

into the slider zone here?

http://bit.ly/bZg1RS

I know for a fact that what I’m getting are conflicting CSS styles. How do I call a separate stylesheet JUST for the jquery slideshow?

Thanks in advance!

How Can i MAKE THE IMAGE SLIDE SHOW AS I CLICK ON NEXT BUTTON
THE NEXT IMAGE WILL BE SHOWN

A big piece of good work. Thanks for help on this gallery rotator. Keep up the good work!

oke tha’t great … i wanna this app…

Ted, very cool implementation. Do you preload your images? There seems to be a slight delay to show the larger image when first clicking on a thumbnail image.

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create…

Hello

I browsed all comments for a working solution for automatic rotation. I tried all solutions given, but none seems to work. Did someone have a working one for me, please?

Thanks!

omg,i love it !!

maybe someone can upload the source code? So the “plugin” as a zip?? thanks!

¡ Magnífico !

Definitely using this in our next project! Thanks

how do i add small image to the Description text, i have tryed to do this but the image changes to the background image i need a different image in the Description area then the backgrund image. Can anyone help Thank you

I only heard of jquery for the first time yesterday, and don’t really know how to use javascript really, but I still managed to follow this tutorial, it’s dead easy. Thanks so much, Soh, and every one else who provided bits of code. I haven’t finished yet, so I’ll post a link when I have, but I’m well on my way thanks to this.

One thing, and I think it’s been asked before but not answered. Is there anyway to have the main image change when you hover over the thumbnail, instead of clicking. Like on the BBC image rotator (on the home page as well as the Radio 1 link above).

In my simple head I’m trying to imaging it’s a case of putting the .hover(function()statement somewhere above the animation code. It’s obviously not that simple, else I would have done it, but I don’t imagine it is that complicated either. Any ideas?

Hello,

I can’t find anything about license for this great Image rotator. Can you tell me how can I use rotator? Thanks!

Cheers for this awesome tutorial! One thing I would like to add is that currently in this version the content for the first item must be duplicated: once in the main_image Section html and then once again as the first list item under the image_thumb Section html.

If you would prefer to only have to enter the html content once here is a solution. Add this to your javascript before all other javascript:

jQuery(function(){
$itemOne = $(‘.image_thumb > ul > li > div:first’).clone();
$(‘.main_image > div > div’).replaceWith($itemOne);
});

In doing so the content contained within your image_thumb Section html will replace the default loaded content. This also means you can insert a fallback message into your main_image Section html for users who have javascript turned off.

I hope this is helpful to someone out there.

Thank you man.

This is EXACTLY what I was looking for.

Keep rocking

can any one tell me if i can to use it on php and how to do it ?

It is very Useful for me and i am also web developer in ahmedabad.

This will save me a lot of time. Thank you

@Bruno
does’nt work, it doesnt show images in Looping..

@Pablo

Try this:
$(‘.stop’).hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval( ‘slideSwitchTimed()’, 7000 );
});

And you put in all your a class called “stop”.
Hope it helps you. 😉

@Remo

No, you’re wrong. It works, i’m using it, lol.
You have replaced all the “, and ‘? 🙂

Aw… I can’t type HTML here, sorry for the flood!
I was trying to say to put the class “stop” in all “li”.

Here is what i have with autorotate and default description in down(hidden) position

[code]

$(document).ready(function() {

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

//Click and Hover events for thumbnail list
$(“.image_thumb ul li:first”).addClass(‘active’);
$(“.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”);
});

/* mdm – 3/4/10
————— */

timing = 7000; // Change the speed here. “1000” == 1 sec
rotate = setInterval(“triggernext()”, timing);

// .bind below requires js lib 1.4, if using 1.3 change to:
//mouseover $(…).hover(function() {
//mouseout }, function() {

$(‘#main’).bind({

mouseenter: function() {
clearInterval(rotate);
},
mouseleave: function() {
rotate = setInterval(“triggernext()”, timing);
}
});

}); //Close $(document).ready([…]);

function triggernext() {
slides = $(“.image_thumb ul”);
if((slides.find(“li.active”).index() + 1) == slides.find(“li”).length) {
slides.find(“li:first”).trigger(‘click’);
} else {
slides.find(“li.active”).next().trigger(‘click’);
}
}
//Close Function

[/code]

Thank you very much kewlmonk for your quick response.

I really appreciate it.

But my page is not working properly as per your autorotate code may be i’m not very technical person. Do you have a example or your auto-rotate code. So that i’ll learn.

kewlmonk you da man!!!!

great code…i will recommned evryone to use this

Thank you very much bro

@kewlmonk – Great stuff man, Thanx!!

Is there a way that one might be able to rotate out an entire div of content rather than just images?

i’ve been browsing this kind of tut!
i’ll use this for my website, thank you for sharing..!

Here is a version we implemented with auto rotate and pop out images:
http://www.firstclasstrader.com

Although we have had some issue with an older version of Firefox/Vista combination that makes the images continuously rotate and never pause on hover.

So if anyone else notices that problem and has a solution it would be greatly appreciated!!

I found this code very fun to implement.

It helped my project out big time.

Thank you!

Here is something for you all to for my thanks!
http://l33t.razerzone.com/index.php?user_dtl=2f19d9aa2413f3265b58d130ca4865ea

Please. Submit a downloable version.

I try do it, but don’t get do run

A example will be very educational

How can I cause the images to cross-fade instead of fading to black in between?

Hi to all,

very nice article indeed and easy to implement.

I am building a portal that needs a vertical image rotator – like the one here – that loads images dynamically, so the image number is not fixed. Only the height of the rotator should be fixed.

Maybe, i could write some code to display a vertical slider to the right of the thumbnails filmstrip whenever the thumbnails are larger than the filmstrip area.

Could someone provide some guidance on this?

thanks in advance

Nice tut you wrote. And love the comments, they where very useful. I’ve wrote my own script based on the tut first, and later on added the SlideSwitcher from Faro’s demo. I added some code to hide the description and only show it on hovering. Also I replaced the href of the a-tag with the rel-attribute, so beware of that.

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

//Click and Hover events for thumbnail list
$(“.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(“rel”); //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;

// SlideSwitcher
$active = $(this);
slideSwitchClick();
// —

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

// SlideSwitcher
clearInterval(playSlideshow);
playSlideshow = setInterval(‘slideSwitchTimed()’, 3000);
// —

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

// SlideSwitcher
//runs function, set timer here
$(function() {
playSlideshow = setInterval(‘slideSwitchTimed()’, 3000 );
});
// —

$(‘.main_image’).hover(function() {
$(“.main_image .desc”).slideToggle();
//$(“a.collapse”).toggleClass(“show”);
//$(“a.collapse”).text(“show”);
}, function() {
$(“.main_image .desc”).slideToggle();
//$(“a.collapse”).toggleClass(“show”);
//$(“a.collapse”).text(“hide”);
});

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

// SlideSwitcher
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(“rel”);
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;
}
// —

@dkarantonis
Search for codaslider or nivoslider, both very nice sliders without thumbnails and so on. Just plain sliders like you want.

First of all what a fantastic tutorial!

I’ve got it all working up until the point of the hide show button, I have tried making my own gif within Photoshop but it does not change depending on the state (show/hide).

What is the easiest way of creating this button?

Thanks

thanks a lot. Great WOrk!
Good!

how can i publish source code in this blog?

Why is my show/hide button not working?

body {
margin-top: 0px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: underline;
color: #FFF;
}
a:active {
text-decoration: none;
}

$(document).ready(function(){

$(“.main_image .description”).show();
$(“.main_image .block”).hide();
$(“.main_image .block”).animate({ opacity: .98 }, 1);

$(“.image_thumbs ul li:first”).addClass(‘active’);
$(“.image_thumbs ul li”).click(function(){

var imgAlt = $(this).find(‘img’).attr(“alt”);
var imgTitle = $(this).find(‘a’).attr(“href”);
var imgDescription = $(this).find(‘.block’).html();
var imgDescriptionHeight = $(“.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: -imgDescriptionHeight}, 250 , function() {
$(“.main_image .block”).html(imgDescription).animate({ opacity: .98, marginBottom: “0” }, 250);
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({opacity: 1}, 250);

});
}

$(“.image_thumbs ul li”).removeClass(‘active’);
$(this).addClass(‘active’);
return false;

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

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

});

@charset “UTF-8”;

body {
margin: 0;
padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
background-color: #212121;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

h1 {
font: 3em normal Georgia, “Times New Roman”, Times, serif;
color: #fff;
text-align: center;
background: #036;
text-indent: -99999px;
margin: 100px 0 10px;
}

.container {
overflow: hidden;
width: 900px;
margin: 0 auto;
}

#main {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;

}
#logo {
height: 70px;
width: 152px;
float: left;
}
#top_wrap {
width: 920px;
margin-right: auto;
margin-left: auto;
padding-bottom: 40px;
height: 50px;
padding-top: 20px;
}
#navigation {
width: 709px;
float: left;
height: 25px;
padding-left: 59px;
padding-top: 50px;
padding-bottom: 5px;
}
#gray_bar {
height: 15px;
width: 678px;
margin-right: auto;
margin-left: auto;
padding-left: 242px;
margin-top: 10px;
}

a {color: #fff;}

.main_image {
background: #333;
float: left;
height: 465px;
width: 600px;
overflow: hidden;
position: relative;
color: #fff;
}

.main_image h2 {
font-size: 2em;
font-weight: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
.main_imageh6 {
font-size: 2em;
font-weight: normal;
padding: 10px;
margin: 0 0 5px;
}

.main_image p {
font-size: 1.5em;
line-height: 1.6em;
margin: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
}

.description {
}

.block small {
font-size: 1.3em;
padding: 0 0 0 0
px;
}

.main_image .block small {
margin-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
h3 {
font-family: Helvetica;
font-size: 14px;
font-weight: bold;
color: #FFF;
padding-bottom: 5px;
padding-left: 15px;
text-decoration: none;
}

.main_image .description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: none;
}
#lightbox_link {
height: 50px;
width: 200px;
padding-left: 10px;
}

.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}

main_image a.collapse {
height: 27px;
width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
background-repeat: no-repeat;
background-position: left top;
background-image: url(../images/collapse_btn.png);
}

.main_image a.show {
background-position: left bottom;
}

.image_thumbs {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;

}

.image_thumbs img{
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;

}

.image_thumbs ul {
margin: 0;
padding: 0;
list-style: none;

}

.image_thumbs ul li{
margin: 0;
padding: 12px 10px;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
background-color: #f0f0f0;
}

.image_thumbs ul li.hover {
background: #ddd;
cursor: pointer;
}

.image_thumbs ul li.active {
background: #FFF;
cursor: default;
}

.image_thumbs ul li h2{
font-size: 1.5em;
margin: 5px 0;
padding: 0;
}

.image_thumbs ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 200px;
}

.image_thumbs ul li .block #one{
float: left;
margin-left: 10px;
padding: 0;
width: 200px;
}

.image_thumbs ul li p{display: none;}
.more_images {
background-color: #090;
height: 50px;
width: 400px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
}
.more_thumbs {
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

<body

Description

yeah i did…i dont know why it wont work.

yeah i did

Is there any way to add video (such as YouTube) as the main image in the slider? It sort of works if I embed it in the Description area, but it jumps when I click to the next slide.

yeah…it is really making me frustrated…ive tried a lot of different things but it wont put a picture there

Thanks for a great tutorial!

One question: In one of the websites I am building, we want to have 5 tabs (script is from http://flowplayer.org/tools/tabs/index.html), and for each of the tabs we would like to have 3 thumbnails to show.

Before clicking on any thumbnails, if the user click on the tabs, the big view image and the thumbnails are showing correctly. however, if the user click on one of the thumbnails, and then switch to a different tab, the big view image is still from the other tab, although that tab have inline style of display:none. The li under the thumbnail list have class:active.
Any idea why this happens?
TIA
Mor

It´s perfect working!!! Thanx for the solutions in comments! I work hard today with this tutorial :))) and have a great result for my new project..

Here is slideshow rotator I made: http://rotator.fine.sk/

It´s also very simple to integrate SHOW/HIDE function, but in this I dont used it.

The big images are clickable!!!

Actually, I’ve decided to do something really different now and won’t need the show/hide functionality. I would like to change the image thumbs to the bottom (horizontal) and the main desc to the side. I’ve managed to change their position by manipulating the css but I’m not sure if there’s something else I need to update as well.

I can see that there are other parts of the code that refer to the show/hide functionality and it’s working alright even if I don’t remove them but I prefer to clean it up. So if someone has done this before and can advise, that would be much appreciated. Thanks again!

I have been working on this and I’ve finally been able to come up with something. Here’s my code for the horizontal thumbs nav (there could be redundant stuff in the css as I haven’t got around to checking which bits needs to be removed). Special thanks to Soh Tanaka (of course!) and Faro 🙂

body {
background: #1d1d1d;
margin: 0; padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
h1 {
font: 3em normal Georgia, “Times New Roman”, Times, serif;
color: #fff;
text-align: center;
background: url(h1_bg.gif) no-repeat;
text-indent: -99999px;
margin: 100px 0 10px;
}
.container {
overflow: hidden;
width: 900px;
margin: 0 auto;
}
#main {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
}
a {color: #fff;}

/*–Main Image Preview–*/
.main_image {
width: 898px; height: 400px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.block small {
padding: 0 0 0 20px;
background: url(icon_calendar.gif) no-repeat 0 center;
font-size: 1em;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
top: 0; right: 0;
width: 298px;
display: none;
}
.main_image .block{
width: 100%;
background: #333;
border-top: 1px solid #000;
}
.main_image a.collapse {
background: url(btn_collapse.gif) no-repeat left top;
height: 27px; width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px; right: 20px;
}
.main_image a.show {background-position: left bottom;}

.image_thumb {
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
display:inline;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0; padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0; padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float:left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}

$(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’);
$(“.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 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 );
});
}

$(“.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;$active = $(this);
slideSwitchClick();

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

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

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;
}

Hi Marley, just a quick look at the code you’ve posted, it looks like you’re missing a dot in the css part. Instead of “main_image a.collapse”, it should be “.main_image a.collapse”. That should do something to display the show/hide button, I think. Hope that helped!

I’m glad I managed to help 🙂 With the toggling of the hide/show button, I’d like to know how it works too (see my first comment). I’ve spent almost half a day to try to find it and then I figured I didn’t need it anyway, so I gave up!

Karen…I figured it out, it’s pretty simple, just set the background image of .main_image a.collapse to whatever you want the “hide” image to be and it will change. Hope that helps…it worked for me.

Yeah, that is all that I did. To set the show button, I simply set the background image of .main_image a.collapse and it showed up. And to set an image for the show, I just set the background image to that class as the show button.

thats awesome tut, thanks for sharing.

Hi edd, I think you’re right. I just couldn’t get hold of the sprite button so I created a standard image which obviously didn’t change when clicked. Now the mystery is solved. Thanks!

nice tut, thanks

Hi

Thanks for the great tutorial. But can i use it for commercial purpose ?

Regards

Its working wonderfully. Thanks for such an amazing guide!!

very nice, thanks for sharing.

very nice, thanks for sharing.

Fantastic jquery slider, going to have a play now!

Impressive! This tutorial is very detailed and easy to follow. Thanks!

Is possible to add an href on the main center image ?
I need to use the center image like an hyperlink
thanks in advance

I’ve successfully used this as is but now I’m trying to customise it to be without the main image description so basically it just shows the image. It should be easier and I’ve been trying to learn more about jquery but so far, I’ve not yet figured it out. I can manage the CSS bits because that’s just the main image and no others but the jquery I can’t figure out.

So when I click on the thumb, nothing changes or blank (the part where the image goes). This should be easier to achieve that the one with the description that toggles but because I have very limited (almost none!) knowledge of jquery, I can’t get it to work properly. I was hoping someone can give me some advice. Thanks in advance!

Cheers, Karen

Ok, I’ve fixed it and I’ve also implemented the example by David McKillen (Jeff Schram). Here’s my page as an example.
http://abacusmind.com/prototype/jquery/index_test.html

However, I find my transition/fade very abrupt. I wonder if anyone can help me improve it. I’ve been looking at the plugin for the effects but that didn’t seem to work.

I have learnt a lot about jquery just from this example alone. Thanks to the author and all who shared!

Cheers,
Karen

cool image rotator… really really cool… thank you for share..

Good tips about dogs. I have an 8 yr old golden retriever and I love him to death. Will come back for sure! .

Can you please make this a wordpress plugin so it’s easier for us ‘non’ coders. This slideshow is THE BEST one I’ve ever seen- it’s so perfect for a project but I do not have the jquery and/or php skills to know how to integrate this into my wordpress page. Awesome work though!

Thank for good script!!!

Hi Jessy, you need to downloade jquery. There’s a link in this article to the basics of jquery. If you can’t find it, here it is.
http://docs.jquery.com/Main_Page

This script is great. I learnt lots about jquery too. So credit to the author and all who contributed here!

I figured out how to make the main image link.

I changed:

var imgTitle = $(this).find(‘a’).attr(“href”); //Get Main Image URL

to:

var imgTitle = $(this).find(‘a’).attr(“rel”); //Get Main Image URL

and added:

var imgLink = $(this).find(‘a’).attr(“href”); //Make Main Image Link

sincerely interested in your page that offers me a choice of reading.

Great thing!

Has sombody the download link with all the files include?

please send it to; [email protected]

Hey this is a great tutorial and it’s working nicely for me in Firefox. the descending class looks like stairs in safari. Any css fixes?

Great!
I’d like to add hover event instead of click:
$(“.image_thumb ul li”).hover(function(){ …
It’s ok, BUT!
If you look at slider http://www.kremlin.ru, there is a pause when you hover on tab. How can I make such an effect in current script? Thanks!

Hi there, I’m new to jQuery and I want to add a doubleclick event to the main image that navigates to a new url based on the selection of the thumbnail choice any ideas?

Thank you so much, I have used your tutorial on my blog and it works! Please, if you have any tutorials on images that shows and hides description (like alt in image tag)

Hi! I have never used JQuery and i have a couple of (probably silly) questions. Can i use the code in these sample in Visual Web Developer? If not, what setup do i need to start using JQuery?

Very slick rotator! Is there anyway to add multiple instances of this on the same page?

I would like to be able to use this along with a jquery slider…

Thanks

Love it!Really good stuff!

Check out our 3D jQuery Image Gallery: http://www.dcs-solution.com/blog/?p=11#more-11

Hi, check out our 3D Image Gallery at http://www.dcs-solution.com/blog/?p=11