Create a CSS/jQuery Image Rotator with Descriptions

by Jake Rocheleau

September 2, 2013 in Tutorials

This original tutorial was created by Soh Tanaka and published back in 2009. Unfortunately his demo has since gone offline and I managed to find an old copy of the source codes. People in the comments have been asking for automatic rotation between the slides and I updated the codes with this feature.

So in this tutorial I am reintroducing some of Soh’s original codes on how to build this dynamic automatic rotator. The jQuery is contained within the same index file and it is easy to follow along. It should also work even running the latest copy of jQuery on your website. Feel free to download a copy of the updated source codes or check out my live demo from the links below.

jquery image rotator tutorial preview screenshot

Getting Started

First we need to create a new document index.html which contains the slider and the JavaScript. I’ll be including a local copy of jQuery but we could also use the CDN-hosted version instead.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Image Rotator w/ Desc - CSS & jQuery Tutorial</title>
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>

The document is written using HTML5 schema with only two external files. The jQuery library from the original tutorial is v1.3.2 which is a much older copy. But I tested by replacing with the jQuery v1.10.1 and it still works fine. The main codes do not change much from different releases but you can update the animations in any way you like.

Now the internal HTML is a bit easier to understand as it is broken into smaller div blocks. We can find a single div with the class .main_image which contains the bigger picture you see on the left. It also has blocks for the description text which gets re-animated for each new slide.

<div id="main" class="container">
	<div class="main_image">
		<img src="images/banner01.png" alt="- banner1" />
		<div class="desc">
			<a href="#" class="collapse">Close Me!</a>
			<div class="block">
				<h2>Luigi's Mansion</h2>
				<small>08/27/2013</small>
				
				<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork By Glenn Jones</a> </p>
			</div>
		</div>
	</div>

Below this we find a collection of smaller blocks which contain the thumbnail image. It also holds a title for the photo along with the publication date. This information is pulled out via jQuery and then appended into the main image container.

<div class="image_thumb">
	<ul>
		<li>
			<a href="images/banner01.png"><img src="images/banner01_thumb.png" alt="Luigi Mansion" /></a>
			<div class="block">
				<h2>Luigi's Mansion</h2>
				<small>08/27/2013</small>
					
				<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork by Scott Balmer</a> </p>
			</div>
		</li>

Now this is just one example of a list item from the full set. But you can get an idea of the formatting which contains the headline, date, and a brief description. This is all contained within a single div using the class .image_thumb which then holds an unordered list.

Design Styles

The CSS stylesheet is fairly typical which does not use a whole bunch of resets. We remove all the original margins and padding from elements using the wildcard selector(*). The main image preview container has a lot of fixed styles to keep everything in order. You may need to adjust these sizes in order for them to blend nicely within your own website.

.main_image {
	width: 598px; height: 456px;
	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(images/icon_cal.gif) no-repeat 0 center; 
	font-size: 1em; 
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}

The list item styles are also fairly typical which include their own hover class. It is built using a class which gets applied via jQuery instead of the typical :hover effect. But this can be easily updated as needed. However the .active class is still necessary to ensure that we can switch between different items automatically.

.image_thumb {
	float: left;
	width: 299px;
	background: #f0f0f0;
	border-right: 1px solid #fff;
	border-top: 1px solid #ccc;
}
.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(images/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: 180px;
}

Building with jQuery

The final piece to this tutorial revolves around the image rotation. The script is fairly lengthy but some of the code is just duplicated into a separate function. I will break it down into segments so that everything is easier to understand.

var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions

$(document).ready(function() {	

	// Comment out this line to disable auto-play
	intervalID = setInterval(cycleImage, slidetime);

	$(".main_image .desc").show(); // Show Banner
	$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity
	$(".image_thumb ul li:first").addClass('active');

All of these codes will execute right when the document has loaded. We create a new interval variable which keeps track of the auto-rotation. You may edit slidetime to be any amount in milliseconds between the individual slides. The line which calls setInterval() may be commented out to disable auto-play. This line of code references a custom function cycleImage() which I will explain a bit later.

	$(".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');
	});

This larger block of code waits to execute until the user clicks on an internal list item. We first generate some variables to update the big image URL and the internal description HTML. If the current list item is already active then we use return false to stop the function. Otherwise we animate the new content into place and then update the .active class onto the new list item.

You’ll also notice towards the bottom we are using the .hover() event listening method to apply a hover class onto the list item as well. jQuery allows chaining of multiple different events together onto the same selector. Without any excess code this might be read as $(“.image_thumb ul li”).click().hover() which is completely valid syntax.

The brief toggle functions also come afterwards, but this is very basic jQuery which doesn’t need much explanation. Look up the jQuery .slideToggle() method to understand more.

    // Function to autoplay cycling of images
    // Source: http://stackoverflow.com/a/9259171/477958
    function cycleImage(){
    var onLastLi = $(".image_thumb ul li:last").hasClass("active");       
    var currentImage = $(".image_thumb ul li.active");
    
    
    if(onLastLi){
      var nextImage = $(".image_thumb ul li:first");
    } else {
      var nextImage = $(".image_thumb ul li.active").next();
    }
    
    $(currentImage).removeClass("active");
    $(nextImage).addClass("active");
    
		// Duplicate code for animation
		var imgAlt = $(nextImage).find('img').attr("alt");
		var imgTitle = $(nextImage).find('a').attr("href");
		var imgDesc = $(nextImage).find('.block').html();
		var imgDescHeight = $(".main_image").find('.block').height();
					
		$(".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});
		});
  };

Now this last function cycleImage() is only used by the automatic slider variable. Remember if you want to disable this functionality just comment out the intervalID variable which calls the setInterval() method. I was searching for a basic solution and found this helpful answer on Stack Overflow. I’ve customized the variables to properly target the elements within this tutorial and it all cycles perfectly even back to the beginning.

Much of the animation code has been duplicated from the original click event handler. onLastLi is a variable which checks if the very last item in the list is currently active. If so then our rotator needs to target the very first item moving back to the beginning. The auto-rotate system only requires a currentImage with a nextImage and it can run indefinitely without delay.

jquery image rotator tutorial preview screenshot

Conclusion

There are many auto-rotating jQuery plugins out there but many have their own pre-formatting interface. This can be great if it matches up with your own layout. But sometimes it is much easier to craft your own rotator from scratch, as we have done here.

I do hope this tutorial can prove useful to other developers who need a solution for dynamic image rotation. Many of the jQuery codes are easy to transport over into your own project if you can update the selectors. Also feel free to download a copy of the tutorial codes and use this demo as a template for structuring your unique image rotator.

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+

  • demogar

    May 5th

    Really great tut. Thanks for this one!

  • vocal

    May 5th

    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

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

  • alex

    May 5th

    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

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

    Great tutorial. I like the clean and usable design.

  • HieuUk

    May 5th

    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

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

  • izzat aziz

    May 5th

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

  • Steven Snell

    May 5th

    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

    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

    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

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

  • izzat aziz

    May 5th

    Steven Snell,

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

  • mark

    May 5th

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

  • roni

    May 5th

    @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

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

  • Kai Chan Vong

    May 5th

    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

    looks nice. perfect to integrate for wordpress theme.

  • Gabriel Paiva

    May 7th

    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

  • Soh Tanaka

    May 8th

    Thanks to all who commented and gave back some constructive feed back :-)

    For those who would like to fade the image in and out you can add 2 more lines of code like so:

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

    As for the automated rotations, I would check out this tutorial for an idea: http://jonraasch.com/blog/a-simple-jquery-slideshow

    I will try to include these kind of solutions on my next tutorial as an option :-) Thanks again~

  • Soh Tanaka

    May 8th

    Here is the live demo for what i was talking about above: http://www.sohtanaka.com/web-design/examples/image-rotator/index2.htm

  • Steven Snell

    May 8th

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

  • Steven Snell

    May 9th

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

  • Robin

    May 10th

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

    Looking forward to the next version.

  • Fred75

    May 11th

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

  • Markus Koljonen

    May 11th

    Awesome!

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

  • cjbates

    May 13th

    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

    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

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

  • Tonyk

    May 14th

    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!

  • Soh Tanaka

    May 16th

    @cjbates Great point! I was hoping no one would catch that :-p I noticed that as well after I had already submitted the article. Good catch!

    @mblack The thumbnail can just be taken out since jQuery is targeting the list item as a whole. If you want it to degrade well w/out the thumbnail, you can just link the text instead of the thumbnail :-)

  • randy johnson

    May 18th

    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

    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

    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

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

  • Lochlan

    May 19th

    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

    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

    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

    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

    Nick Sumpter, your script does work with google chrome ;)

  • BenHen

    May 21st

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

  • Colows

    May 22nd

    no zip files?

  • carl

    May 22nd

    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

    what can create that script to joomla module?

  • Ludo

    May 29th

    Excellent!!!

    Just an automated version to complete the work ;-)

  • Carlos

    May 29th

    @ 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

    Jun 2nd

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

  • Maverick

    Jun 6th

    wow, very very nice script……. looks great

  • Soh Tanaka

    Jun 6th

    David, the easiest way to add a scroll bar is to add a overflow: auto; to your image_thumb class~ You can also look into js scroll bars to make it look nicer~

  • Brandon

    Jun 7th

    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

    Jun 8th

    great tutorial. Will test it out right away

  • Constantine

    Jun 10th

    Love it. Thank you.

  • joxe

    Jun 12th

    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

    Jun 15th

    please somebody help me

  • John

    Jun 16th

    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

    Jun 22nd

    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

    Jun 22nd

    Can i have the Nick Sumpter example slide automaticaly ?

    thanks !

  • apt

    Jun 23rd

    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

    Jun 27th

    Hi there,

    Just wanted to say, this is AWESOME!

    Cheers,
    Eddie Gear

  • robb

    Jun 28th

    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

    Jul 1st

    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

    Jul 1st

    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

    Jul 2nd

    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

    Jul 8th

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

  • A2b

    Jul 12th

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

    thanks a lot

  • mblack

    Jul 14th

    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

    Jul 14th

    \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

    Jul 14th

    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

    Jul 14th

    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

    Jul 21st

    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.

    Jul 24th

    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

    Jul 26th

    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

    Jul 29th

    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

    Aug 3rd

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

    Can anyone help.

    This is a gret tut though.

  • Matt

    Aug 3rd

    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

    Aug 3rd

    BBC rotator Is really cool…

  • Matthew Hartman

    Aug 3rd

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

  • Bradford Sherrill

    Aug 4th

    Great solution for a portfolio site

  • haberler

    Aug 4th

    hi,

    Very useful article i will use it.Thank you.

  • Peter Stacho

    Aug 5th

    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

    Aug 7th

    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

    Aug 7th

    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

    Aug 8th

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

  • Unibands

    Aug 12th

    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

    Aug 12th

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

  • منتديات ماى بكتشرز

    Aug 13th

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

  • Nikola

    Aug 14th

    hi,

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

  • jatropha

    Aug 18th

    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

    Aug 21st

    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

    Aug 21st

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

  • Dave

    Aug 23rd

    Great effect using Jquery…space saver too!

    Dave

  • Kevin Mario

    Aug 25th

    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

    Aug 27th

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

    please reply

  • banny

    Aug 28th

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

  • benoit

    Sep 14th

    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

    Sep 14th

    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

    Sep 17th

    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

    Sep 23rd

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

  • AnubisibunA

    Sep 29th

    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

    Oct 2nd

    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

    Oct 2nd

    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

    Oct 6th

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

  • NICKD

    Oct 10th

    Can I find a source code of this somewhere?

  • Steven Snell

    Oct 10th

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

  • apt

    Oct 10th

    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

    Oct 16th

    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

    Oct 16th

    Great tut

    Great effect using Jquery

    i like it !

  • tutorial blog

    Oct 19th

    thank for share.

    it very useful

  • Just some guy

    Oct 22nd

    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

    Oct 22nd

    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

    Oct 23rd

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

  • mackem

    Oct 26th

    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

    Oct 27th

    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

    Oct 29th

    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

    Oct 29th

    Excellent! Top stuff!

  • snick

    Oct 31st

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

  • Jessica

    Nov 1st

    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

    Nov 6th

    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

    Nov 6th

    Hello
    Thank you.
    Nice aplication.

  • tuna

    Nov 10th

    good tutorial, thanks..

  • saidawy

    Nov 12th

    nice tutorial

    Thanks for this so much!

  • Trisha

    Nov 14th

    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

    Nov 15th

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

  • Michael Azar

    Nov 16th

    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

    Nov 17th

    Great tutorial

    Thank you

  • paigrove

    Nov 18th

    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

    Nov 25th

    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

    Nov 25th

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

  • Lala

    Nov 25th

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

  • Sabrina

    Nov 26th

    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

    Nov 28th

    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

    Nov 29th

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

  • jazio

    Dec 2nd

    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

    Dec 2nd

    GREAT !

  • indialike

    Dec 3rd

    Great tutorial, I like very much this script. thanks

  • insaat

    Dec 7th

    was really good work thanks:)

  • sahibinden

    Dec 7th

    I did this work was very good:)

  • C Kent

    Dec 9th

    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

    Dec 10th

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

  • Hein

    Dec 11th

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

  • andreas

    Dec 21st

    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

    Dec 21st

    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

    Dec 22nd

    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

    Dec 22nd

    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

    Dec 25th

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

  • Rob

    Dec 29th

    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

    Dec 29th

    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

    Dec 29th

    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

    Dec 31st

    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

    Jan 7th

    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

    Jan 7th

    @Thor :

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

  • Thor

    Jan 7th

    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

    Jan 7th

    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

    Jan 7th

    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

    Jan 8th

    great toturial

    thanks a lot

  • izdelava strani

    Jan 10th

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

  • Mark Lee

    Jan 18th

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

  • Corey Jones

    Jan 19th

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

  • swine

    Jan 25th

    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

    Jan 27th

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

  • Seamus Fitzpatrick

    Feb 2nd

    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

    Feb 4th

    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

    Feb 4th

    @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

    Feb 5th

    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

    Feb 5th

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

  • David McKillen

    Feb 8th

    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

    Feb 9th

    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

    Feb 9th

    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

    Feb 9th

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

    Feb 9th

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

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

  • Eoin Casey

    Feb 9th

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

  • swine

    Feb 9th

    @Eoin Casey

    You should load the banners in a display:none div like so: (right after the tag)

    @David McKillen
    I can’t get the BIG image to click?? Is there another way, not in the JS, but in the html????

  • swine

    Feb 9th

    @Eoin Casey







  • mike

    Feb 11th

    im having the same problem as @Eoin Casey. the picture fades comes back up and then switches to the other picture.

  • Matthew

    Feb 11th

    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

    Feb 12th

    Hey,

    Great script, very nice!

    I’m trying to work out how to select which div by default is shown. I want different divs to be shown first depending on the page the visitor is on, but on each page load it returns to the first div in the list.

    Can anyone help?

    Thanks

  • David McKillen

    Feb 12th

    @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
    david@mckillen.net
    Twitter: davidmckillen

  • David McKillen

    Feb 12th

    @Darren

    … sorry it kicked my bit of code in the last post :)

    li class=”active” … instead of …. li class=””

    Dave :)

  • David McKillen

    Feb 12th

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

  • Darren

    Feb 13th

    @David McKillen,

    Thank you so much for the advice, it worked.

    I didn’t do everything you specified, partly because the site I’m developing required a slightly different approach.

    As you rightly illustrated, the two-step approach of changing the first slide on shown to be identical to the one you want to appear, and then changing the li class to active on that particular slide was the trick in making it appear like it was set to that one by default.

    Thank you for the help.

    Darren

  • David McKillen

    Feb 14th

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

    David McKillen
    Twitter: davidmckillen

  • ky

    Feb 14th

    hi!

    thanks for this. i try to use this on prestashop. the developer of my theme seems to use your code ( http://dgcraft.free.fr/blog/index.php/themes-prestashop/element-theme-prestashop/ ) but i think there’s a problem.
    please help. the rotator gets all product-titles/desc at the same time for the main-image-title/desc. you can see this at my page http://www.cool-japan.eu please help! here i post his code:

    {literal}

    $(document).ready(function() {

    //Show Banner
    $(“.main_image .desc”).show(); //Show Banner
    $(“.main_image .bloc”).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(‘.bloc’).html(); //Get HTML of block
    var imgDescHeight = $(“.main_image”).find(‘.bloc’).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 .bloc”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
    $(“.main_image .bloc”).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 .bloc”).slideToggle();
    $(“a.collapse”).toggleClass(“show”);
    });

    });//Close Function

    {/literal}

    {foreach from=$products item=product name=homeFeaturedProducts}
    {assign var=’productLink’ value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}
    ($smarty.foreach.homeFeaturedProducts.total – ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}”>

    {$product.name|escape:htmlall:’UTF-8′|truncate:30}
    {$product.description_short|strip_tags|truncate:60:’…’}
    {displayWtPrice p=$product.price}
    {l s=’view it’ mod=’homefeatured’}

    {/foreach}

    {foreach from=$products item=product name=homeFeaturedProducts}
    {assign var=’productLink’ value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}
    ($smarty.foreach.homeFeaturedProducts.total – ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}”>

    {$product.name|escape:htmlall:’UTF-8′|truncate:30}
    {$product.description_short|strip_tags|truncate:60:’…’}
    {displayWtPrice p=$product.price}
    {l s=’view it’ mod=’homefeatured’}

    {/foreach}

  • ky

    Feb 14th

    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?

  • amjad

    Feb 17th

    can anyone tell me how to save these coading step by step ?
    like html coding index.html , css coding style.css please tell me how to saveall these coding ? help me please

  • Ce.

    Feb 17th

    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!

  • James

    Feb 17th

    Does anyone have a final copy of the working code where it is fully automated they can post ?

    Thanks

  • ky

    Feb 17th

    sorry man!

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

    won’t happen again
    peace
    ky

  • Eoin Casey

    Feb 17th

    @swine

    Thanks for the help, but it still didnt work :( Do the images need to be preloaded? Or can they?

  • Steve

    Feb 17th

    Love this code! Excellent and powerful!

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

    Thanks,
    Steve

  • apt

    Feb 17th

    steve,

    but it lacks something …

    when I put the mouse over small images normally face it will receive the corresponding detail

    then the effect on mouse over is not manage in this script!

  • Matt Wright

    Feb 18th

    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 mwright4@cs.com – Basically I need to output 5 records from a DB and use the pics and info in those records into this code…

  • Alex

    Feb 19th

    Anyone know what licence this rotator comes under?

    Am i free to use it for any templates i create from themeforest?

    I’ll of course give the author credit (that goes without saying).

  • Steven Snell

    Feb 19th

    Alex,
    Yes, it can be used for templates or themes.

  • Alex

    Feb 19th

    Great stuff. Thanks for the speedy reply Steven.

  • Daniel Boone

    Feb 25th

    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?

  • Mike

    Feb 25th

    Can anyone tell me why the image fades then the same image shows back up then the image changes? And it only happens on the first go around of the slider, in the second time the slider goes, I do not have this problem. Can anyone tell me why this is happening?

  • Alex

    Feb 25th

    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.

  • Mike

    Feb 25th

    @alex thanks for the response. yea it look very bed when it fades and comes back to the same image then switches .5 seconds after. It actually hurts my head to see it. I just cant figure how to fix it.

  • advertising

    Feb 28th

    Thank you for sharing this tutorial,

  • scarlett

    Mar 1st

    Loving it, and had an easy enough time skinning the design.

    Read through all the comments & tried to implement several directions for auto-advancement, and also pause on hover selection.

    I seem to not get it quite right each time. I know there’s the issue of removing curly quotes from @Lochlan’s code (which seemed promising), and I’ve been able to get thumbnails to advance, but not pull the correlating .main_image div, etc (always something).

    I’d be much obliged if someone could take a look at my implementation thus far and offer some help for auto-slide-advancement & slide pause on hover.

    The main image is the same for all at the moment.

    Cheers!
    Scarlett

  • scarlett

    Mar 1st

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

  • Jeff

    Mar 1st

    $(“a.collapse”).click(function(){
    $(“.main_banner .block”).slideToggle(); //Toggle the description (slide up and down)
    $(“a.collapse”).toggleClass(“show”); //Toggle the class name of “show” (the hide/show tab)
    });

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

  • Hannah

    Mar 2nd

    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.

  • Daniel Boone

    Mar 2nd

    any one have an idea on how to pass video segments instead of still images? Any help would be great..

  • teorico

    Mar 3rd

    very thanks, great tutorial…

  • Tom D

    Mar 3rd

    Great Tutorial. I’m wondering if anyone has an example of the code used to integrate this into word press? Any help would be great.

  • Ethno Urban

    Mar 5th

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

  • Laura

    Mar 5th

    has anyone had trouble using a .png file inside the div class=’block’ ?
    My png file is a curve.
    It can be viewd fine alone but after applying the javascript it doesn’t keep its opacity and has a black pixelated line along the edge.
    I have used all the png fixes out there with no luck. This happens only in IE 7.
    Thanks. Great tutorials and comments very helpful!

  • Laura

    Mar 5th

    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

  • Laura

    Mar 5th

    anyone having problems with css drop down menus falling behind the jquery image rotator? In IE7

  • seminyak villas

    Mar 8th

    wow…

    this is what i’m looking for.
    thx…

  • Hakim

    Mar 10th

    Great.Thanks for the Article.

    But there is a slight difficulty.When I add one more Image to block.
    The Image_Thumb will get resized.

    Is there a way using Jquery to give a slider effect to Image_thumb division.

    I would really appreciate the help.Thanks in advance.

    Regards
    Hakim

  • Hannah

    Mar 13th

    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?

  • David McKillen

    Mar 16th

    @ChrisMolnar:

    Chris – I have posted a working demo on what you were looking for here: http://www.mckillen.net/topbox.html

    Which includes the fading images and the linking larger/main images. I just made a few tiny tweaks to the existing code but it works the way I wanted it to now :) – hope you can take a look there and see if that helps? Again it might not be pretty but it works!

    Follow me on Twitter (if you dare :) ): davidmckillen
    david@mckillen.net

  • David McKillen

    Mar 16th

    @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
    david@mckillen.net

  • James

    Mar 16th

    I kind of got my one working as well, but the problem I have is that I have other UL / LI tabs on the page and they now change automatically as well now ?
    Is there any way I can change it ?

    Thanks

  • David McKillen

    Mar 16th

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

  • James

    Mar 16th

    I have kept the same code as above,with my new UL/LI i have them as a class called “tabs” and they run on using there own JQuery function. Its a bit hard to explain really and I don’t want to start pasting code here. You can have a look at my website above, its the tabs on the lower right hand side,

    If I were to add classes to my ul li how would I add that to the JQuery code above ? my css is all over the place really…

    Thanks

  • Daniel Boone

    Mar 16th

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

  • Angela Karinn

    Mar 24th

    Great Plugin! But, does anyone else have problems with it not working as an external script? I am using this on several pages & don’t like having redundant code. I’m baffled as to why it only works when it’s local to the page.

  • David McKillen

    Mar 25th

    @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

  • James

    Mar 25th

    You can check out my website as an example.

  • David

    Mar 30th

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

  • Daniel Boone

    Mar 30th

    David-

    Hey man, I found a way to add in video using lightbox and mov files.

    fusioncorpdesign.com/beta/UK

    If you are interested. Let me know I can point you in the right direction

  • Nauman Akhtar

    Apr 5th

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

  • James

    Apr 5th

    @Nauman,

    Don’t you want something like that have on the Skynews.com website ?

  • Glenn

    Apr 5th

    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

  • Richard

    Apr 5th

    Nice tut we will be looking to use in our bookkeeping services website.

    thnaks
    Richard

  • John

    Apr 6th

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

  • Michael Joens

    Apr 8th

    Is there a way to scale this down to fit withing a 400px place on a webpage… if so what all options do you change…. I’ve tried changing the CSS but then it goes all crazy?

    Thanks

  • Rafal

    Apr 9th

    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.

  • Stephen McCann

    Apr 13th

    Hi all,

    Just a heads up for anyone with the preloading images issue (the images appear after a delay).

    After looking into preloading using JavaScript (which I’m not the best at) I found a simpler CSS alternative.

    First add a div with an id such as “imageCache” and insert all the images you use in your rotator with the exception of the first image that is displayed eg:

    Then go into your CSS and set the display property of this div to none eg:

    # imageCache{
    display: none;
    }

    This means that when your page is loaded the browser will cache the specified images into memory but will not display them – then when the JavaScript for the rotator requests the images they are gathered from cache and not downloaded on the fly (which is the cause of the delay).

    Hope this helps anyone – PS check my usage of the code at

    http://dev.rhoderickdhu.com/ – still in development.

    Stephen.

  • Stephen McCann

    Apr 13th

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

  • Mike

    Apr 14th

    @Stephen McCann, thank you so much! It is the perfect solution to the problem! YOU ARE THE BEST!!

  • Stephen McCann

    Apr 15th

    No problemo Mike, glad I could help!

  • Alex

    Apr 19th

    Anyway of adding a text link to another page on my site inside the sidebar ?
    The problem i’m having is, because the panel acts like a giant button, if i add a small text link link that will not work. I’m guessing its related to this: $(“.image_thumb ul li”).click(function(){

    Any ideas?

  • dupledge

    Apr 22nd

    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

  • dupledge

    Apr 22nd

    rafal

    the html file did not display I shall try again

    flash html file

    Main html file create a element where you want to load the flash

    I hope it works this time

  • dupledge

    Apr 22nd

    how do I submit html code for people to view

  • Steven Snell

    Apr 22nd

    Dupledge,
    I’d recommend using http://pastie.org/ and then place a link to your pastie here in the comments.

  • Jake Knight

    Apr 22nd

    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.

  • Nikola

    Apr 25th

    how can i integrate this script in drupal cms?

  • Boldis Media

    Apr 28th

    Indeed, this is very useful tuorial for our programmer!

  • dupledge

    Apr 29th

    I use this demo to load files into the span however I cannot get it to load from a link in the page that gets loaded. For example when you click my “products” btton it loads a section of the “products.html” file into the span. Now when I click a link in this load portion the page it refers to breaks out into a new tab or window. I would like this page to load (and overwrite) the existing content in the span. Any ideas?

  • Ralph

    May 2nd

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

    magazinecds at gmail.com

    Thank You!

  • Keato

    May 3rd

    Im having issues with IE when viewing the image thumbs, the thumbs will drop below the rotator. When I view it in Safari and Firefox it works perfectly can someone please tell me what im missing.

  • dupledge

    May 3rd

    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

  • Carlitos

    May 4th

    Hey nice tuto, I asking you permission to write a wordpress plugin for my blog and for the wordpress comunity using this jquery rotator, I will give you the rights of desing, of course only if you let me use it I will do it.

    Ok thannks.

  • Steven Snell

    May 4th

    Carlitos,
    You would have to check with Soh Tanaka, the author of the tutorial.

  • 男婚女嫁

    May 6th

    it’s good~~

  • mark

    May 7th

    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.

  • Hacer una Web

    May 19th

    Awesome work.

    Thanks a lot.

  • Todd

    May 22nd

    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

  • Todd

    May 22nd

    Sorry guys, ignore me, has been a long day. Implemented noConflict() but forgot to change all the “$’s” to “jQuery” in the js. Brainfreeze!

  • Todd

    May 22nd

    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.

  • Mihir

    May 26th

    good wp jq hack :)
    tx

  • Hevyweb

    May 26th

    To complicated!:(

  • davetiye

    Jun 5th

    thank you wey much

  • Rob

    Jun 8th

    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

  • calcio

    Jun 9th

    Thanks a lot. It’s so cool.

    But one thing, for IE6.

    ‘div.desc’ goes out of the ‘div.main_image’, and it set under the ‘div.main_image’.

    I tried to add some code in CSS for IE6, like ‘margin-right:-3px;’, ‘display:inline;’, or add extra blank div etc., but not success.

    IE8 and IE7 are no problem, only IE6!!

    If someone know how to correct it, please let me know.

    Thanks in advance.

  • Mohammad

    Jun 9th

    Thank you very Much … I’ll use it

  • 123doing

    Jun 10th

    It’s very good.
    I like this.
    Thanks for share.
    And I wrote something to introduce this project for my readers.
    You can find the post about this in my website.
    If something is wrong,pls figure it out.thanks.

  • Wandtattoo

    Jun 12th

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

  • senthilvelan

    Jun 15th

    Hi this one is great, but in hide/show example how defalutly hide the content and shown only show button clicking this will show the content.

    can anyone guide me Please.

    Thanks in advance.

  • FireRoxy

    Jun 16th

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

  • unique

    Jun 19th

    I couldn’t get it work. Where am I going wrong?

  • Mel

    Jun 21st

    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

  • JB

    Jun 25th

    Works fine for me in IE6 :)

  • Vacations in India

    Jun 26th

    hey ! thts great guide
    will try on my blog soon

    thanks

  • SEO Divers

    Jun 26th

    Definitely using this in our next project! Thanks

  • Virtulian

    Jun 30th

    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

    Jul 3rd

    dupledge
    Thanks for the flash code. In fact im struggling with proper implementing it, so if you are willing to explain it more I will be very gratefull :) The effect I want to achieve is to flip between jpg’s and flash files that are in the same, main tag

  • Dupledge

    Jul 3rd

    Rafal

    contact me directly via my email address

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

    cheers

    dupledge

  • Den

    Jul 6th

    A very nice image rotator!! thanks alot for the tutorial :D

    greetz

  • Micah Boswell

    Jul 6th

    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!

  • woiweb

    Jul 8th

    it’s so easy to use, very well.

  • Mithun PAL

    Jul 8th

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

  • Raghib suleman

    Jul 14th

    Creating an Image Rotator: Thanks for sharing Dear
    http://www.raghibsuleman.com/jquery-image-rotator-teaser

  • Remonty

    Jul 15th

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

  • psdlance

    Jul 16th

    yeah this is a great tutorial. Tanaka always provides good stuff, especially on his site. I’ve implemented a lot of his tutorials in some of my projects. Its just good quality stuff.

  • kai

    Jul 19th

    oke tha’t great … i wanna this app…

  • Ted Robinson

    Jul 21st

    Over a year later and this tutorial keeps on giving!… here is my variation on it, and a big thank you to Soh.

    http://www.tedrosrobinson.com/work.html

  • Laura

    Jul 21st

    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.

  • Ted Robinson

    Jul 22nd

    I sure don’t have a preloader… Thanks Laura, I knew I forgot something :) And thank you for the kind words.

  • vuitton hanbags

    Jul 23rd

    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…

  • wendy's replica

    Jul 27th

    wow

  • Sems

    Jul 31st

    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!

  • suhas

    Aug 3rd

    too bad idea, there are may way to do this in simple ,5-6 lines of code only.

  • javier murillo

    Aug 3rd

    omg,i love it !!

  • Sems

    Aug 4th

    @suhas,

    Can you post that code then of yours, please?

    Thanks!

  • maik

    Aug 5th

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

  • smita

    Aug 6th

    I actually was looking out for this code since long…

    Thanks for putting up such great resource :)

    Many thanks
    Smita

  • Chuse

    Aug 6th

    ¡ Magnífico !

  • stefan

    Aug 8th

    nice plugin!

    you might wanna change your demo-filenames though…
    Safari AdBlock keeps the images from loading!

  • lv

    Aug 10th

    Definitely using this in our next project! Thanks

  • Shubham

    Aug 21st

    hey, thanks for the tutorial…I implemented it to one of my clients….he loved it ;-). But the problem with the image rotator was that once we click on another tab it fades in and fades out the same image for a second and then load the next image in the rotator(happens only first time when the tab is clicked). Well any idea’s how to get it fixed?

  • Jon Paul

    Aug 22nd

    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

  • anadikt

    Aug 25th

    Thank you very Much for this great content

  • Edd Tillen

    Aug 27th

    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?

  • jesudas

    Aug 28th

    Not able to see other main and image when on click.. can give full zip for download..

  • Damir

    Aug 28th

    Hello,

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

  • Lucas

    Aug 30th

    Great Thanks

  • Vincent

    Aug 31st

    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.

  • Bruno Monteiro

    Sep 1st

    To auto-play slides, it works for me:

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

    Note: replace all the “, and ‘.

  • Infopitcher

    Sep 3rd

    Thank you man.

    This is EXACTLY what I was looking for.

    Keep rocking

  • noizeone

    Sep 5th

    Thanks for the script !
    My problem is i want to use it with lightbox, i want main image to be clickable and to spawn lightbox window.
    Can someone help ?

  • yasser tadj

    Sep 5th

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

  • va Infotech

    Sep 7th

    very usefull for me

    I am Website Designer in india

  • vainfotech

    Sep 7th

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

  • volkan

    Sep 9th

    thanks very usefel image rottor jquery and css

  • Silviya Howe

    Sep 10th

    This will save me a lot of time. Thank you

  • Pablo

    Sep 10th

    to Bruno Monteiro:

    Hey Bruno, How can I stop sliding after click??

  • Remo

    Sep 13th

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

  • OCMC

    Sep 14th

    Can anyone help me about how use this but with videos into main_images ?

    Thanks in advance

    OCMC

  • Bruno Monteiro

    Sep 14th

    @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 ‘? :-)

  • Bruno Monteiro

    Sep 14th

    @Pablo, sorry, forgot something:

    You need to put the class “stop” in every of the slider. :)
    It will be like , so, when someone hover the mouse above the it will stop.

  • Bruno Monteiro

    Sep 14th

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

  • Neeraj Rawat

    Sep 16th

    Thank for a great tutorial.

    Can we add a slider on this example.

    I have more than 8 images and i don’t want to increase my website height. Is it possible if we add a slider in that example?

    Thanks in advance.

  • kewlmonk

    Sep 16th

    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]

  • Kissimmee Carpet Cleaning

    Sep 17th

    Hey awesome job posting this, one of the best designed Jquery sliders I’ve come across. Many thanks!

  • Neeraj Rawat

    Sep 18th

    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

    Sep 24th

    you can view a mock up that i have at http://www.christ-nation.com/slidertest

  • Isiah

    Sep 29th

    kewlmonk you da man!!!!

  • uganda jobs

    Sep 29th

    hi thanks for the code…it worked greatly

  • uganda news

    Sep 29th

    great code…i will recommned evryone to use this

  • Neeraj Rawat

    Sep 30th

    Thank you very much kewlmonk……….

    you are gr8 :)

  • becer

    Sep 30th

    Thank you very much bro

  • I am Gooner

    Oct 4th

    Thanks everyone!
    If you having a problem getting it all to work, try Bruno Monteiro’s or kewlmonk’s versions.
    Don’t forget to replace all the “,’;. as per Bruno’s instructions.

    Cheers again :)

  • Matt Allen

    Oct 4th

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

  • Stuart Kirkland

    Oct 6th

    Great stuff this looks really well, do you by any chance have this as full download at all? I cant get it to work?

    Kind regards

    Stuart Kirkland

  • stubbieieie

    Oct 10th

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

  • Jen Smith

    Oct 11th

    Great tutorial, absolutely love the rotator. Only problem I’m having is that lochlan’s code doesn’t rotate through the images. The first image just keeps reloading, rather than moving through the li’s. Has anyone else had this problem and found a fix?

  • First Class Trader

    Oct 13th

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

  • Vider

    Oct 13th

    You already have a new 100% fan!

  • Vyache

    Oct 13th

    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

  • JAW

    Oct 15th

    I am using Bruno’s code which works great but I’m having the same problem as Jen Smith…The first image just keeps reloading, rather than moving through the li’s. I know its probably something small i’m forgetting.

  • Anussin

    Oct 17th

    Please. Submit a downloable version.

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

    A example will be very educational

  • Edd Tillen

    Oct 24th

    Thanks loads for this tutorial. I’ve finally got around to implementing it in my site, and it gave me a really good introduction to a bunch of stuff I’d never used before. And with a few tweaks, it’s almost unrecognisable. Here’s the link if you’d like to see: http://www.latitudejourney.com/bolivia.htm. There’s just one thing that bugs me, that I’m sure must have a simple solution. I’ve set the colours to change on the links when the h2 tag is in the hover state. When it is in the active state, the background then changes colour, so far so good. But when it is in the active state, the hover state property still affects, so text turns to the same colour as the background. I’d like it to just stay black, and not do anything particularly interesting on hover. Any quick and dirty solutions to that one will be gratefully received.

  • Joe

    Oct 30th

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

  • Georgie Buchann

    Oct 31st

    extravagant tally you’ve get hold of

  • dkarantonis

    Nov 4th

    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

  • Faro

    Nov 4th

    Really usefull tutorial.
    I saw some questions about a demo with the fade and the auto transitions.
    Ive made one : http://www.faro-designs.nl/test
    You can see the code in the source, good luck with it;)

  • Tarabass

    Nov 6th

    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.

  • Shrikrishna Meena

    Nov 8th

    Hey, Thanks for the script… Jquery seems to be an important tool, Little bit complex but helpful.
    Thanks again!

  • Adam

    Nov 10th

    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

  • tolga

    Nov 10th

    easly editable plugin.i loved it.cheers and thanks.

  • MTJ

    Nov 11th

    thanks a lot. Great WOrk!
    Good!

  • Ramon Pose

    Nov 17th

    well i’ve integrated the slideshow successfully and would thank you for this really great plugin.
    take a look at:

    http://www.hojac.ch

    so now i have one question. i use this plugin as teaser from a website (shop) to show to the direct responding clients (index.php) a bit of our product range. well now i want to link each image with the corresponding category in the store (deeplink). How can i realize it fine? i tried it with following source:

    when the client clicks the image it opens the wished link. so far it works. but when the client hovers the image whitout clicking there is no pointing cursor that shows the link….

    how can i realize this? with CSS?

    im not really a nerd and java i don’t understand at all. html and css not much but a bit.

    can anybody shows me the way to my target?

  • Ramon Pose

    Nov 17th

    how can i publish source code in this blog?

  • iDesigns Studio

    Nov 18th

    Thanks for this tut! very awesome, check out what i did with it: http://www.razoesdocorpo.com/

  • Marley

    Nov 21st

    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

  • Ramon Pose

    Nov 22nd

    did you upload the pictures in the folder that is defined in the css?

  • marley001

    Nov 22nd

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

  • marley001

    Nov 22nd

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

  • Marley

    Nov 22nd

    yeah i did

  • Marley

    Nov 22nd

    i dont know hwy it wont work…i cant figure it out

  • EMunster

    Nov 23rd

    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.

  • stone crusher

    Nov 23rd

    i dont know hwy it wont work…i cant figure it out

  • Marley

    Nov 24th

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

  • Matt

    Nov 29th

    PLEASE HELP…

    How can I make the main image click through to the next image in the list?

    I’m sorry if anyone has already discussed and solved this – i couldn’t find the answer when scanning down all the user comments (there is a lot).

    Thanks in advance.
    Matt

  • Mor

    Nov 30th

    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

  • Design 71

    Dec 1st

    NOT WORKING!!!!

  • Milan Domény

    Dec 7th

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

  • Karen

    Dec 8th

    This is a really good tutorial and I’m just discovering about jQuery. Very powerful! I’ve managed to reproduce the demo except for one thing which I couldn’t work out. It’s probably very simple but I just can’t find it. The hide/show button when it toggles, I can’t find the reference to the show button. I can only see the reference to the hide button (btn_collapse.gif) in the css. Any pointers would be greatly appreciated. Thanks!

  • Karen

    Dec 8th

    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!

  • kadin

    Dec 8th

    Thanks. I’ll use it in my web site.

  • Karen

    Dec 8th

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

  • Marley

    Dec 8th

    I am having somewhat of the same problem with the show/hide button only mine does not show up at all. I can not figure out why. i posted my code a few posts up so if anyone could look at it and maybe help me out, that would be awsome.

  • Karen

    Dec 8th

    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!

  • Marley

    Dec 8th

    Ohhhh ok thank you. It works now but i only have the show button…do you know how to set a button so that once the box is visible it changes to a hide button?

  • Karen

    Dec 8th

    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!

  • Marley

    Dec 8th

    Ohhh ok. Well I will continue to try and figure it out and, if successful, I will post how I did it.

  • Marley

    Dec 9th

    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.

  • Karen

    Dec 9th

    Marley, maybe you can help me with this then. I don’t have any button if I didn’t set the button (background image of .main_image a.collapse.). If I set it, I only have the same button (hide) for both show and hide, i.e., the button doesn’t toggle.

    What I’m wondering is how you got your show button in the first place as I can’t see where else there’s an image referred to in the code. I would love to find out!

  • Marley

    Dec 9th

    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.

  • Karen

    Dec 9th

    Thanks for the tip, Marley. That was how I thought it would work but if you look at the sample codes, there’s no mention of any image for the show button. Anyway, I added the code and it’s working.

    Must say that this is a great tutorial and it is definitely very useful for me. Thanks to all who contributed here too!

  • logocasa

    Dec 11th

    thats awesome tut, thanks for sharing.

  • edd

    Dec 12th

    Karen. I don’t have all the code in front of me right now, but if memory servee, the show/hide button is a sprite (is that the right word). So the picture is put in the background in the few (in the a.collapse class I think) and then its position is changed, in the a.show class). if you were to copy the original code in this tut word for word it would work without any problem, so all I can think is that somewhere along the line your classes don’t match up. Once you’ve got it working though, you can change the sprite picture, size, position and all sorts without too much trouble, just as long as you keep all the names consistent.
    Hope that gets you on the right track.

  • Karen

    Dec 15th

    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!

  • Hashim

    Dec 15th

    o thanx.. i was looking 4 this

  • Patryk Gagan

    Dec 16th

    nice tut, thanks

  • ROSSiDEAS

    Dec 20th

    Exactly what I was looking for … thanks

  • oberoi

    Dec 21st

    Hi

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

    Regards

  • Jeff

    Dec 22nd

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

  • Megha

    Dec 23rd

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

  • Emre

    Dec 23rd

    Great work! But can anyone share all files of this tutorial in .rar ?

  • James Radford

    Dec 24th

    very nice, thanks for sharing.

  • Noor Alvi

    Dec 30th

    Great work!, It is simple, easy and professional. I really like it.

  • shishir

    Jan 6th

    very nice, thanks for sharing.

  • Spelen

    Jan 7th

    Thank you for this great tutorial. Very easy to follow steps and it works like a train :-)

    I’ll definitly add this to my favourite list of jquery sliders!

  • Jack

    Jan 11th

    Fantastic jquery slider, going to have a play now!

  • Cgbaran

    Jan 12th

    Great Tutorial thanks

  • Rhonda B

    Jan 15th

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

  • Helga

    Jan 16th

    If somebody has troubles with Bruno’s solutions, displaying the .main_image, take a look at firebug and see if in img tag there’s a src with something. If don’t change in the method slideSwitch() on the line var imgTitle = $active.find(‘a’).attr(“rel”); replace it with href.

    Good luck :)

  • rufus

    Jan 24th

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

  • ion

    Jan 24th

    great one. any leads of how can i use this multiple times in a page? like using it inside tabs…

    thanks

  • Karen

    Jan 26th

    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

  • Kevin

    Jan 27th

    Hi everybody,

    I have a question. I want to remove the ‘date’ on the image description. But i want it to be placed on the buttons on the right.

    Is this possible?

    Thanks in advance.

  • Karen

    Jan 27th

    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

  • Karen

    Jan 30th

    Oh, I’ve figured the transition out too. I had to do a function callback. Well, at least it got me thinking and I’m learning! Thanks everyone!

  • www.worldwebdesigned.com

    Feb 7th

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

  • Rahul

    Feb 7th

    so nice tutorial..I’ll definitly add this to my favourite list of jquery sliders!

  • Nicole Alston

    Feb 9th

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

  • Mukhtar

    Feb 10th

    i want to know that if we can align the products listing to left side of the page?

  • Danielle Dino

    Feb 12th

    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!

  • JeLBee

    Feb 18th

    how to autoslide the content? ex. every 10 seconds it shifts to the next content

  • FireDub

    Feb 22nd

    Thank for good script!!!

  • Jessy V

    Feb 22nd

    Do I need to download jquery ?
    Because I actually can’t to do so.

  • Karen

    Feb 22nd

    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!

  • Kelly Hendershot

    Feb 23rd

    Does anyone know how I can get the large images to each link to a different URL?

  • Kelly Hendershot

    Feb 24th

    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

  • Kelly Hendershot

    Feb 24th

    Now, does anyone know how I can have a difference main image display on page refresh?

  • casinos

    Feb 24th

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

  • Derek

    Mar 1st

    Does anyone know how to configure the javascript so that when you click on the right hand buttons they take you to a specific link? I want to keep it rotating with all the bells and whistles, but have the buttons take you to a different page.

  • Malediven

    Mar 1st

    Great thing!

  • Technology Garden

    Mar 7th

    This is really a very good tutorial. it’s really helpful to novice programmers.

  • Erwin

    Mar 7th

    Has sombody the download link with all the files include?

    please send it to; erwin713@gmail.com

  • Tamim

    Mar 9th

    Nice Site…. Thanks

  • Carolyn

    Mar 14th

    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?

  • Creative Manner Web Design DC

    Mar 18th

    Its my favorite I used in every possible way I guess thanks again man.

  • Valentine

    Mar 21st

    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!

  • Paul

    Mar 22nd

    Does anyone know how to imtegrate this into a WordPress theme? I’d like to add this slider to one of my theme.

  • steve

    Mar 23rd

    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?

  • Valentine

    Mar 29th

    I’ve already solved the problem with delay.
    If somebody interested I can tell how. It is called ‘hoverIntent’.

  • Enimz

    Mar 30th

    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)

  • Tran Kien

    Mar 31st

    Thank admin alot.
    You know, my teacher assigned us to create an image rotator using CSS or jQuery (3th assignment). In fact, I didn’t have any experiences about this technique.
    Now, It’s Ok.

    Tran

  • HelginMjorSee

    Mar 31st

    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?

  • uptrend

    Apr 3rd

    no follow!!!

  • R.J.

    Apr 7th

    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

  • cssrich

    Apr 11th

    creative and superb thanks for sharing

  • zhouing

    Apr 12th

    Love it!Really good stuff!

  • Ajay

    Apr 13th

    superb…how can i download this ?

    or where should i include above java script

  • DCS Solution

    Apr 14th

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

  • lift web design

    Apr 15th

    This looks great. Did anyone ever release a wordpress plugin for it?

  • DCS Solution

    Apr 16th

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

  • Brandon

    Apr 20th

    Does anyone know how to make this set of code restart when it reaches the last image? I like it rotating through the pics but when it reaches the last one, it needs to start over.

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

  • pfau

    Apr 25th

    Great tutorial indeed !!!

    Btw, any suggestion if I have more imageThumbs and want to display all of them with the vertical slide ?

    Many thanks !!

  • Atif

    Apr 30th

    Wow Excellent Tutorial to see about Image Rotation – Thanks so much

  • application performance monitoring

    May 2nd

    I have been searching the Internet for fun and came upon your website. Wonderful illustrated information. I thank you about that. No doubt it will be very useful for my future projects. I reed your all posts, they are really good. Would like to see some other posts on the same subject!

  • Virtega

    May 5th

    Thanks !!!

    IT’s really good !

  • Sailee

    May 6th

    Hi great tutorial.
    I have a question though, why does it not automatically rotate?

  • Naveedshaira

    May 6th

    All these examples are great but i am looking for post card type gallery, different thumbnails would be placed randomly and upon clicking any thumbnail you see its larger version like http://www.templatesrule.com/web-templates/view-template-3228.html but its paid, i need something similar but free. Please help

  • mykul

    May 6th

    Can you use this to display html and not just an image?

    Thanks!

  • hotel istanbul

    May 19th

    Very good code, but I need such image shşuld be on the left and text should be on the right side. Anyway, thanks for the sharing…

  • travel to istanbul

    May 19th

    Woow great I’ll use it for my web site. Thanks a lot.

  • Hat Yayınevi

    May 20th

    I learnt much about jquery using this code. Thanks for the share.

  • Jon Schreyers

    May 20th

    I’ve used this on my interactive CV as it looks good and your tutorial was brilliantly written.

    One thing i would add though is to tell people to surround the jquery functions with:

    $(document).ready(function() {
    // code here
    });

    as if you don’t do that then the whole thing breaks..

    Thanks again!

  • Chris Stewart

    May 20th

    You are brilliant, so easy to set up and so effective, Thanks you are a 5 star hero
    Keep well

  • Adriana

    May 21st

    I use this. Is great.

  • fatima

    May 22nd

    Hi
    Please I need your help!
    I tried to implement this tutorial on my web site, it works but there is a big problem : when I click on the second button in the right of the page for exemple, the text change but the main image still the same (I mean, it stays the first image : banner1)…I know that I forgot to add something but I don’t know exactly what…so please help me and answer me : where can I put the others images (banner2, banner3, banner4) so they appear when I click on the second, or the third or fourth button in the right of the page?
    Thanks a lot in advance

  • Lunette

    May 24th

    vous fashion.thank pour le partage

  • hotel taksim

    May 24th

    At last, I also achieved to use it. Wonderfull, thanks a lot for the coders.

  • rony

    May 24th

    it doest not work in my visual studio

  • adit

    May 25th

    Cool.. i’ll try to use to my web. thank’s

  • otakiri.net

    May 26th

    nice bud..
    i’ll try this one for my personal website

  • Roman

    May 26th

    Amazing tutorial. I just been looking for this kind of image slider. Thanks

  • croisieres

    May 30th

    brilliant – simple but effective. I will be using it very soon, and I do believe that it’s very necessary to pre-load images to avoid having a hang on the browser and animation

  • steven

    May 30th

    Thanks a lot, i was tired of those demo dreamweaver rotators.

  • end user monitoring tool

    Jun 1st

    Good concept and excellent post. I am internet marketing expert. I am always search good information on the internet. Today I found your blog and I read you article it is really good. I am looking forward some more information from your end.

  • Tamim

    Jun 5th

    Very Nice site….

  • kkhasino

    Jun 10th

    pls could you get this in a zip file? to make it easier… for starters like me….?

    nice job i must add… thanks

  • mobile phone blog

    Jun 11th

    this is a nice slider… thank you

  • casio

    Jun 16th

    thanks nice great site and i have added in my favorites list

  • Dayo

    Jun 16th

    Does anybody know if the image_thumb section will become scrollable if there are more than 6 images in the slideshow? How can i set it up to have more than 6 images in the list?

  • neda

    Jun 20th

    how to doanload complete script ?

  • askinterview

    Jun 21st

    Thanks budy.
    Really i need this kind of code you helped me a lot to make my site(www.askinterview.com) more attractive….
    thanksssssss………

  • Edd Tillen

    Jun 21st

    Months later I’m still using this and adapting it, it’s great. But one thing’s got me stumped. Is there any way I can get a small image within the .block description. Of course if I just put an image in, it really confuses the javascript that doesn’t which image it’s trying to swap out.

    The best I can come up with is to put it in the background of a div, but that’s not really what I’m after. Any better ideas?

  • Edd Tillen

    Jun 22nd

    Cracked it!! Just change any references to ‘img’ in the .js file to ‘.img’, then give the main image ‘class=”img”‘ Then you can happily put other images within the description. For saying I started out with no knowledge of javascript, I think I’m getting pretty good at this.

    Another puzzler for you though, is it possible to link tot he page and rotate to the specific image within the rotator. I am using the images within the rotator almost like individual pages, and some times I need to link to those individual pages. But instead all I can do is link to the top image, and hope people can find the bit they want.

    Maybe I should just make individual pages.

    Anyway, if you want to take a look at what I’ve done, it’s http://www.latitudejourney.co.uk/peru.htm. It’s nearly unrecognisable from the original tutorial, but all done using stuff I’ve learnt from here, so thank you all.

  • Edd Tillen

    Jun 23rd

    @Dayo: If you add
    overflow-y: auto; overflow-x: hidden
    to your .imageThumb class in the css, that’ll do it.
    If you just do scroll: auto, you can end up with a horizontal scroll bar, which looks rubbish, unless your into that kind of thing.

  • Janet C.

    Jun 25th

    I been looking for research materials that I can use on my blog. I been building 2 blog now. Then I stumbled upon your article and it after I read it, I realized this is a good material for my blog. The commenter believes that readers can find and use so many valuable information here. Surely I will recommend your site. You really helped me a lot and contributed o my researches. tenant screening

  • Web Development

    Jun 27th

    This is awesome. I was looking for this kind of image slider for my new website. Thanks for the tutorial and sharing the scripts.

  • justin

    Jun 28th

    Great tutorial! Any idea why the .main_image h2 font can not be used with Cufon ? I can’t get the title to work with it .. any ideas?

    Also, If anyone has used this and has managed to wrap everything and round its corners , I would be very grateful to know how it can be done. I have it working with latest Firefox, but that’s all… Thanks a lot!

  • Ashwin

    Jun 29th

    Hi Soh,

    Do you have the provision to add dynamic content and images through admin pages?? We only have the html files here. How do I add this to a php file??

    Thanks

  • Ashish

    Jun 30th

    You are the best deal in town.
    please keep posting !

  • estetik

    Jul 4th

    Good article i like and thank you for this article.

    tr

  • Ray

    Jul 4th

    hi

    wondering how you have the desc background transparent at the start ???

  • webtechnepal

    Jul 13th

    Really good work thanks:)

  • Los Angeles Web Design & SEO

    Jul 15th

    Wow brilliant, That is such a useful thing. Hope I’ll find more useful info here.

    Thanks for this.

  • Alvaro

    Jul 23rd

    Nice tutorial… very good slider – thanks.

  • dinesh bhusal

    Jul 24th

    thanks for your kind help

  • Cameron Redmann

    Jul 25th

    I was wondering what exactly is up with that weird gravatar

  • Cuffie Dr Dre Beats

    Jul 26th

    wondering how you have the desc background transparent at the start ???

  • طراحی وب سایت

    Jul 31st

    Excellent collections

  • tom

    Aug 2nd

    im not really familiar with codes and stuff so this might sound dumb but where do i put these codes and what do i do with them

  • mobile crusher

    Aug 3rd

    Really good work thanks:)

  • Leave a Comment

    Your email address will not be published. Required fields are marked *