Create a CSS/jQuery Image Rotator with Descriptions

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.

0 shares
Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.
  1. May 5, 2009

    Really great tut. Thanks for this one!

  2. May 5, 2009

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

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

  3. May 5, 2009

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

  4. Pingback: popurls.com // popular today

  5. May 5, 2009

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

  6. cat3y3
    May 5, 2009

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

    Great tutorial. I like the clean and usable design.

  7. May 5, 2009

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

  8. May 5, 2009

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

    thank for tutorial. 😀

  9. May 5, 2009

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

  10. May 5, 2009

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

  11. Mike
    May 5, 2009

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

  12. May 5, 2009

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

  13. May 5, 2009

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

  14. Pingback: Create an Image Rotator with Description (CSS/jQuery) | vitali software

  15. May 5, 2009

    Steven Snell,

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

  16. mark
    May 5, 2009

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

  17. Pingback: Create an Image Rotator with Description (CSS/jQuery) : Design Newz

  18. Pingback: Grumpy Git . org » Blog Archive » Links for 2009-05-04 [del.icio.us]

  19. roni
    May 5, 2009

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

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

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

    BTW.. ppl… click on the ads !!

    Thanks.
    Keep on the good content.

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

  20. May 5, 2009

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

  21. Pingback: links for 2009-05-05 « Minesa IT

  22. May 5, 2009

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

    Keep up the good work!

  23. Pingback: links for 2009-05-05 « Mandarine

  24. Pingback: Image Rotator with Description (CSS/jQuery) « blog.joeldelane.com

  25. Pingback: How to Create an Image Rotator with jQuery and CSS | Business Marketing Experts

  26. Pingback: jQuery Image Rotator with Description

  27. May 7, 2009

    looks nice. perfect to integrate for wordpress theme.

  28. Pingback: [jQuery] Create an Image Rotator with Description (CSS/jQuery) « Lab of Chowky

  29. May 7, 2009

    Hello,

    Just GREAT ! Thanks !

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

    Thanks in advance

  30. May 8, 2009

    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~

  31. May 8, 2009

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

  32. May 8, 2009

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

  33. May 9, 2009

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

  34. Robin
    May 10, 2009

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

    Looking forward to the next version.

  35. Fred75
    May 11, 2009

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

  36. May 11, 2009

    Awesome!

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

  37. Pingback: Danny Chapman » Blog Archive » Fun with Javascript

  38. Pingback: links for 2009-05-13 - somaninn.net - Blog de Somaninn Prok - Liens - Web - Cambodge

  39. cjbates
    May 13, 2009

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

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

  40. mblack
    May 13, 2009

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

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

    Any way to do this?

  41. Pingback: Image Rotator jQuery | Ajax Plugins

  42. EthanJ
    May 14, 2009

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

  43. Tonyk
    May 14, 2009

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

    Great tutorial!

  44. Pingback: Rebekah Renford [New Media] » Blog Archive » Running for President

  45. May 16, 2009

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

  46. randy johnson
    May 18, 2009

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

  47. Lochlan
    May 19, 2009

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

    jQuery(function(){

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

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

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

    });

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

    function slideSwitchClick() {
    slideSwitch();
    }

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

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

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

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

  48. Robin
    May 19, 2009

    Nice one Lochlan!

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

  49. Mo
    May 19, 2009

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

  50. Lochlan
    May 19, 2009

    Hey Robin,

    Sure, replace:

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

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

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

  51. Lochlan
    May 19, 2009

    Sorry, I forgot a bit, replace with:

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

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

  52. May 20, 2009

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

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

    Thanks again Soh, the tutorial was superb.

  53. Pingback: Archane » Blog Archive » Finally, ‘ the front page’ is ticked off my to-do list!

  54. Ryan
    May 21, 2009

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

  55. May 21, 2009

    Nick Sumpter, your script does work with google chrome 😉

  56. May 21, 2009

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

  57. Colows
    May 22, 2009

    no zip files?

  58. carl
    May 22, 2009

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

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

    Thank you very much!

    Sincerely

    carl

  59. Pingback: » links for 2009-05-25

  60. May 28, 2009

    what can create that script to joomla module?

  61. Ludo
    May 29, 2009

    Excellent!!!

    Just an automated version to complete the work 😉

  62. Carlos
    May 29, 2009

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

    I will appreciate if somebody can guide me.

    Thank you.

  63. Pingback: Rotacionar imagens com descrição | Links Web

  64. David
    June 2, 2009

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

  65. Pingback: FreeDownloadSecrets.com » Blog Archive » 45+ Stunning Tutorials, Inspirations And Resources For Designers To Discover The Best Of The Web In May

  66. Pingback: 45+ Stunning Tutorials, Inspirations And Resources For Designers To Discover The Best Of The Web In May @ SmashingApps

  67. Pingback: 21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs @ SmashingApps

  68. Pingback: 21 Stylish CSS / jQuery Beautify solutions for your web design | Internet Resources

  69. June 6, 2009

    wow, very very nice script……. looks great

  70. June 6, 2009

    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~

  71. Brandon
    June 7, 2009

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

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

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

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

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

  72. Pingback: 21 Beautiful CSS/ jQuery Solutions For Your Websites » De Web Times - Sharing Useful Resources.

  73. June 8, 2009

    great tutorial. Will test it out right away

  74. Pingback: 25 Useful MooTools Tutorials

  75. Pingback: 21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs « Dogfeeds——IT Telescope

  76. June 10, 2009

    Love it. Thank you.

  77. joxe
    June 12, 2009

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

  78. joxe
    June 15, 2009

    please somebody help me

  79. John
    June 16, 2009

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

  80. Pingback: The Friday Fix | Inspiredology

  81. mblack
    June 22, 2009

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

  82. apt
    June 22, 2009

    Can i have the Nick Sumpter example slide automaticaly ?

    thanks !

  83. apt
    June 23, 2009

    Hi lochlan,

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

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

    jQuery(function(){

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

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

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

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

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

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

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

    });

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

    function slideSwitchClick() {
    slideSwitch();
    }

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

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

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

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

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

    thank you in advance to make corrections to this code.

  84. June 27, 2009

    Hi there,

    Just wanted to say, this is AWESOME!

    Cheers,
    Eddie Gear

  85. Pingback: Create an Image Rotator with Description (CSS/jQuery) - Tutorial Pro

  86. June 28, 2009

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

  87. hash
    July 1, 2009

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

    Close Me!

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

  88. hash
    July 1, 2009

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

    //***

    Close Me!

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

    ***//

  89. banny
    July 2, 2009

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

  90. Pingback: 10 Cool Accessible jQuery and Ajax Plugins - Blog Reign

  91. July 8, 2009

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

  92. A2b
    July 12, 2009

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

    thanks a lot

  93. July 14, 2009

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

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

  94. July 14, 2009

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

  95. July 14, 2009

    Hi.

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

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


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

    Next part to follow in next comment…

  96. July 14, 2009

    Part 2:

    And I have this function too:

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

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

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

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

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

    };

    Within centerImage, the calls

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

    var width = $(newImg).width();
    var height = $(newImg).height();

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

    Any help would be appreciated.

    Thanks.

  97. Pingback: XOCOLAT » 10 motivos ♥ para el Viernes.

  98. Pingback: 20 Of My Favorite Javascript Codes and Blogs — Resources Weekly

  99. noodlez
    July 21, 2009

    Hey mblack,

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

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

  100. Pingback: Tutoriales de la web para tu web » Blog Archive » Crear una imagen con Rotator Descriptivo (CSS/jQuery)

  101. tiko ilk.
    July 24, 2009

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

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

    thanx.

  102. Pingback: Create an Image Rotator with Description (CSS/jQuery) | AJAX Collection & Research

  103. Pingback: XanelaWeb – Diseño y Web » Galerías de imágenes con jQuery

  104. Wes
    July 26, 2009

    Really cool. Got a question…

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

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

  105. banny
    July 29, 2009

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

  106. Pingback: Mastering CSS: Styling Design Elements | CSS | Smashing Magazine

  107. Pingback: Mastering CSS, Part 1: Styling Design Elements « Tech7.Net

  108. Matt
    August 3, 2009

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

    Can anyone help.

    This is a gret tut though.

  109. Matt
    August 3, 2009

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

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

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

  110. August 3, 2009

    BBC rotator Is really cool…

  111. August 3, 2009

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

  112. Pingback: Mastering CSS, Part 1: Styling Design Elements - Programming Blog

  113. Pingback: AMB Album » Mastering CSS, Part 1: Styling Design Elements

  114. Pingback: Shopping Mall » Mastering CSS, Part 1: Styling Design Elements

  115. August 4, 2009

    Great solution for a portfolio site

  116. August 4, 2009

    hi,

    Very useful article i will use it.Thank you.

  117. Peter Stacho
    August 5, 2009

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

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

  118. Pingback: Myfreepedia.com » Blog Archive » Mastering CSS, Part 1: Styling Design Elements

  119. Pingback: 25 jQuery Image Gallery/Slider Tutorials and Plugins | Vandelay Design Blog

  120. Daro
    August 7, 2009

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

    Thank’s! and sorry for my english :S

  121. August 7, 2009

    Thanks for the tremendous tutorial.

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

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

  122. Pingback: 25 Tutoriais e Plugins jQuery para Sliders e Galerias de Imagens | Webgrafismo

  123. Pingback: links for 2009-08-07 « toonz

  124. August 8, 2009

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

  125. Pingback: Advertisers Blog » Mastering CSS, Part 1: Styling Design Elements

  126. Pingback: Mastering CSS, Part 1: Styling Design Elements | YABIBO.COM - YOUR WEB WORLD

  127. August 12, 2009

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

  128. darkcable
    August 12, 2009

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

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

  130. Pingback: 25 jQuery Image Gallery/Slider Tutorials and Plugins « Web And Graphics Design Tutorials

  131. Nikola
    August 14, 2009

    hi,

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

  132. Pingback: Create an Image Rotator with Description (CSS/jQuery) | ShareUnlimited.net - free download, sharing free for all.

  133. Pingback: 12 Easy-to-Implement jQuery effects for your Website « Web Design / Development Blog :: Alt Creative

  134. August 18, 2009

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

  135. Pingback: JQuery: Die 20+ besten Content – Plugins (Scroll, Accordion, Slide) | BLOGRAMMIERER

  136. August 21, 2009

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

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

  137. August 21, 2009

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

  138. August 23, 2009

    Great effect using Jquery…space saver too!

    Dave

  139. August 25, 2009

    Hi guys,

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

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

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

    Looking forward to replies!

  140. raiylo
    August 27, 2009

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

    please reply

  141. banny
    August 28, 2009

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

  142. Pingback: » Mastering CSS, Part 1: Styling Design Elements endo – luxury coding

  143. Pingback: 40+ Fresh And New jQuery Plugins Of Slider’s And Gallery’s - Themeflash : One Stop For All Your Web Resources

  144. September 14, 2009

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

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

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

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

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

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

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

    function slideSwitchClick() {
    slideSwitch();
    }

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

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

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

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

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

  145. Pingback: 60+ Helpful Resources for Portfolio Design | Vandelay Design Blog

  146. September 14, 2009

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

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

  147. September 17, 2009

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

  148. Pingback: Create an Image Rotator with Description using jQuery and CSS | jQuery Wisdom

  149. Pingback: 35+ Create Amazing Image Effects and Sliders with These Awesome jQuery Plugins | tripwire magazine

  150. Pingback: 60+ best Resources of Portfolio Design | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money

  151. Irwin
    September 23, 2009

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

  152. September 29, 2009

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

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

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

  153. PorKy
    October 2, 2009

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

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

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

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

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

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

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

    function slideSwitchClick() {
    slideSwitch();
    }

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

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

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

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

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

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

  154. PorKy
    October 2, 2009

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

    The scripts work perfectly thanks !

  155. mark
    October 6, 2009

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

  156. October 10, 2009

    Can I find a source code of this somewhere?

  157. October 10, 2009

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

  158. apt
    October 10, 2009

    The code still does not work with me.

    I do not know how he has run at Porky?

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

    Thank you.

  159. Travis
    October 16, 2009

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

    I added:

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

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

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

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

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

    }

  160. October 16, 2009

    Great tut

    Great effect using Jquery

    i like it !

  161. October 19, 2009

    thank for share.

    it very useful

  162. Pingback: 10+ astonishing jQuery resources to spice up your website

  163. Pingback: 10 Superb Image Effects and Slider Tutorials with Jquery – Designzzz

  164. Just some guy
    October 22, 2009

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

  165. October 22, 2009

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

  166. October 23, 2009

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

  167. Pingback: Plugins And Tutorials To Enhance The Images Of Your Website With jQuery | PV.M Garage

  168. October 26, 2009

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

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

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

  169. October 27, 2009

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

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

  170. October 29, 2009

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

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

    Anybody else got this problem.

  171. October 29, 2009

    Excellent! Top stuff!

  172. October 31, 2009

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

  173. November 1, 2009

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

    Thanks in advance!

  174. Pingback: 20 Most Sexiest Jquery Plugins and Tutorials – Designzzz

  175. November 6, 2009

    Hi,
    I like very much this script.

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

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

    Enjoy!

  176. Pingback: 5 Attractive Content Sliders with Featured list Layout | Seventy Seven

  177. November 6, 2009

    Hello
    Thank you.
    Nice aplication.

  178. Pingback: JQuery Script Sammlung | astBlog

  179. Pingback: jQuery Image Galleries « Developer Suite

  180. November 10, 2009

    good tutorial, thanks..

  181. November 12, 2009

    nice tutorial

    Thanks for this so much!

  182. November 14, 2009

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

  183. November 15, 2009

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

  184. November 16, 2009

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

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

    Thanks, great job!

  185. November 17, 2009

    Great tutorial

    Thank you

  186. paigrove
    November 18, 2009

    to travis:

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

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

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

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

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

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

    function slideSwitchClick() {
    slideSwitch();
    }

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

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

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

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

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

  187. November 25, 2009

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

  188. joh
    November 25, 2009

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

  189. November 25, 2009

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

  190. November 26, 2009

    Hello,

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

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

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

    how do i do that?????

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

    greets

    Sabrina

  191. November 28, 2009

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

    Regards

  192. apt
    November 29, 2009

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

  193. December 2, 2009

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

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

    Many thanks and appreciation

    Jazio

  194. December 2, 2009

    GREAT !

  195. December 3, 2009

    Great tutorial, I like very much this script. thanks

  196. December 7, 2009

    was really good work thanks:)

  197. December 7, 2009

    I did this work was very good:)

  198. C Kent
    December 9, 2009

    Hi,

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

    Thank you

  199. December 10, 2009

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

  200. December 11, 2009

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

  201. andreas
    December 21, 2009

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

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

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

  202. December 21, 2009

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

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

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

    Kev

  203. pkj
    December 22, 2009

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

  204. December 22, 2009

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

    JQuery is installed trough the Magento System:

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

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

    I hope you can help me!

  205. December 25, 2009

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

  206. December 29, 2009

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

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

    Here is my site:

    http://www.pierevents.com/

    and here is the code:

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

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

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

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

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

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

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

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

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

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

    });
    // End Code for News Rotation

    Any Ideas???

  207. December 29, 2009

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

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

  208. December 29, 2009

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

  209. Guillem
    December 31, 2009

    Very nice piece of code we have here!

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

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

  210. Thor
    January 7, 2010

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

    How can I fix that?

    Thanks

  211. Guillem
    January 7, 2010

    @Thor :

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

  212. Thor
    January 7, 2010

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

  213. Guillem
    January 7, 2010

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

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

  214. January 7, 2010

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

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

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

    $(document).ready(function() {

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

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

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

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

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

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

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

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

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

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

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

    });//Close Function

  215. January 8, 2010

    great toturial

    thanks a lot

  216. January 10, 2010

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

  217. January 18, 2010

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

  218. January 19, 2010

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

  219. swine
    January 25, 2010

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

  220. January 27, 2010

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

  221. February 2, 2010

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

  222. February 4, 2010

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

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

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

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

  223. February 4, 2010

    @Corey Jones:

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

    it’s got custom auto-rotate enabled 😉

  224. February 5, 2010

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

  225. February 5, 2010

    @Kevin

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

  226. February 8, 2010

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

  227. February 9, 2010

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

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

  228. February 9, 2010

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

    $(document).ready(function() {

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

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

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

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

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

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

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

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

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

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

  229. February 9, 2010

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

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

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

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

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

    });//Close Function

    http://www.mckillen.net web design

  230. February 9, 2010

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

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

  231. February 9, 2010

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

  232. swine
    February 9, 2010

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

  233. swine
    February 9, 2010

    @Eoin Casey







  234. mike
    February 11, 2010

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

  235. Matthew
    February 11, 2010

    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.

  236. Darren
    February 12, 2010

    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

  237. February 12, 2010

    @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

  238. February 12, 2010

    @Darren

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

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

    Dave 🙂

  239. February 12, 2010

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

  240. Darren
    February 13, 2010

    @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

  241. February 14, 2010

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

    David McKillen
    Twitter: davidmckillen

  242. February 14, 2010

    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}

  243. February 14, 2010

    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?

  244. amjad
    February 17, 2010

    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

  245. Ce.
    February 17, 2010

    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!

  246. February 17, 2010

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

    Thanks

  247. February 17, 2010

    sorry man!

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

    won’t happen again
    peace
    ky

  248. February 17, 2010

    @swine

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

  249. February 17, 2010

    Love this code! Excellent and powerful!

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

    Thanks,
    Steve

  250. apt
    February 17, 2010

    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!

  251. February 18, 2010

    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…

  252. February 19, 2010

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

  253. February 19, 2010

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

  254. February 19, 2010

    Great stuff. Thanks for the speedy reply Steven.

  255. Daniel Boone
    February 25, 2010

    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?

  256. Mike
    February 25, 2010

    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?

  257. February 25, 2010

    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.

  258. Mike
    February 25, 2010

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

  259. February 28, 2010

    Thank you for sharing this tutorial,

  260. scarlett
    March 1, 2010

    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

  261. scarlett
    March 1, 2010

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

  262. Jeff
    March 1, 2010

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

  263. Hannah
    March 2, 2010

    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.

  264. Daniel Boone
    March 2, 2010

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

  265. March 3, 2010

    very thanks, great tutorial…

  266. Tom D
    March 3, 2010

    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.

  267. March 5, 2010

    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 😉

  268. Laura
    March 5, 2010

    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!

  269. Laura
    March 5, 2010

    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

  270. Laura
    March 5, 2010

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

  271. March 8, 2010

    wow…

    this is what i’m looking for.
    thx…

  272. Hakim
    March 10, 2010

    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

  273. Hannah
    March 13, 2010

    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?

  274. March 16, 2010

    @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

  275. March 16, 2010

    @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

  276. James
    March 16, 2010

    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

  277. March 16, 2010

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

  278. March 16, 2010

    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

  279. Daniel Boone
    March 16, 2010

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

  280. March 24, 2010

    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.

  281. March 25, 2010

    @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

  282. March 25, 2010

    You can check out my website as an example.

  283. David
    March 30, 2010

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

  284. March 30, 2010

    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

  285. April 5, 2010

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

  286. James
    April 5, 2010

    @Nauman,

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

  287. April 5, 2010

    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

  288. April 5, 2010

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

    thnaks
    Richard

  289. John
    April 6, 2010

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

  290. Michael Joens
    April 8, 2010

    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

  291. Rafal
    April 9, 2010

    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.

  292. April 13, 2010

    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.

  293. April 13, 2010

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

  294. Mike
    April 14, 2010

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

  295. April 15, 2010

    No problemo Mike, glad I could help!

  296. Alex
    April 19, 2010

    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?

  297. dupledge
    April 22, 2010

    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

  298. dupledge
    April 22, 2010

    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

  299. dupledge
    April 22, 2010

    how do I submit html code for people to view

  300. April 22, 2010

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

  301. April 22, 2010

    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.

  302. Nikola
    April 25, 2010

    how can i integrate this script in drupal cms?

  303. April 28, 2010

    Indeed, this is very useful tuorial for our programmer!

  304. dupledge
    April 29, 2010

    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?

  305. Ralph
    May 2, 2010

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

    magazinecds at gmail.com

    Thank You!

  306. Keato
    May 3, 2010

    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.

  307. dupledge
    May 3, 2010

    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

  308. Carlitos
    May 4, 2010

    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.

  309. May 4, 2010

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

  310. May 6, 2010

    it’s good~~

  311. May 7, 2010

    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.

  312. May 19, 2010

    Awesome work.

    Thanks a lot.

  313. May 22, 2010

    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

  314. May 22, 2010

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

  315. May 22, 2010

    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.

  316. May 26, 2010

    good wp jq hack 🙂
    tx

  317. Hevyweb
    May 26, 2010

    To complicated!:(

  318. June 5, 2010

    thank you wey much

  319. Rob
    June 8, 2010

    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

  320. calcio
    June 9, 2010

    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.

  321. June 9, 2010

    Thank you very Much … I’ll use it

  322. June 10, 2010

    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.

  323. June 12, 2010

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

  324. senthilvelan
    June 15, 2010

    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.

  325. June 16, 2010

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

  326. June 19, 2010

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

  327. Mel
    June 21, 2010

    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

  328. June 25, 2010

    Works fine for me in IE6 🙂

  329. June 26, 2010

    hey ! thts great guide
    will try on my blog soon

    thanks

  330. June 26, 2010

    Definitely using this in our next project! Thanks

  331. June 30, 2010

    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

  332. Rafal
    July 3, 2010

    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

  333. Dupledge
    July 3, 2010

    Rafal

    contact me directly via my email address

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

    cheers

    dupledge

  334. Den
    July 6, 2010

    A very nice image rotator!! thanks alot for the tutorial 😀

    greetz

  335. July 6, 2010

    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!

  336. July 8, 2010

    it’s so easy to use, very well.

  337. Mithun PAL
    July 8, 2010

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

  338. July 14, 2010

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

  339. July 15, 2010

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

  340. July 16, 2010

    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.

  341. July 19, 2010

    oke tha’t great … i wanna this app…

  342. July 21, 2010

    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

  343. Laura
    July 21, 2010

    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.

  344. July 22, 2010

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

  345. July 23, 2010

    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…

  346. July 27, 2010

    wow

  347. Sems
    July 31, 2010

    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!

  348. August 3, 2010

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

  349. javier murillo
    August 3, 2010

    omg,i love it !!

  350. Sems
    August 4, 2010

    @suhas,

    Can you post that code then of yours, please?

    Thanks!

  351. maik
    August 5, 2010

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

  352. August 6, 2010

    I actually was looking out for this code since long…

    Thanks for putting up such great resource 🙂

    Many thanks
    Smita

  353. Chuse
    August 6, 2010

    ¡ Magnífico !

  354. stefan
    August 8, 2010

    nice plugin!

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

  355. August 10, 2010

    Definitely using this in our next project! Thanks

  356. August 21, 2010

    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?

  357. August 22, 2010

    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

  358. August 25, 2010

    Thank you very Much for this great content

  359. Edd Tillen
    August 27, 2010

    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?

  360. jesudas
    August 28, 2010

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

  361. Damir
    August 28, 2010

    Hello,

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

  362. August 30, 2010

    Great Thanks

  363. Vincent
    August 31, 2010

    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.

  364. September 1, 2010

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

  365. September 3, 2010

    Thank you man.

    This is EXACTLY what I was looking for.

    Keep rocking

  366. September 5, 2010

    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 ?

  367. September 5, 2010

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

  368. September 7, 2010

    very usefull for me

    I am Website Designer in india

  369. September 7, 2010

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

  370. September 9, 2010

    thanks very usefel image rottor jquery and css

  371. September 10, 2010

    This will save me a lot of time. Thank you

  372. Pablo
    September 10, 2010

    to Bruno Monteiro:

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

  373. Remo
    September 13, 2010

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

  374. OCMC
    September 14, 2010

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

    Thanks in advance

    OCMC

  375. September 14, 2010

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

  376. September 14, 2010

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

  377. September 14, 2010

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

  378. Neeraj Rawat
    September 16, 2010

    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.

  379. September 16, 2010

    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]

  380. September 17, 2010

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

  381. Neeraj Rawat
    September 18, 2010

    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.

  382. September 24, 2010

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

  383. Isiah
    September 29, 2010

    kewlmonk you da man!!!!

  384. uganda jobs
    September 29, 2010

    hi thanks for the code…it worked greatly

  385. uganda news
    September 29, 2010

    great code…i will recommned evryone to use this

  386. Neeraj Rawat
    September 30, 2010

    Thank you very much kewlmonk……….

    you are gr8 🙂

  387. September 30, 2010

    Thank you very much bro

  388. I am Gooner
    October 4, 2010

    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 🙂

  389. October 4, 2010

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

  390. Stuart Kirkland
    October 6, 2010

    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

  391. October 10, 2010

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

  392. Jen Smith
    October 11, 2010

    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?

  393. October 13, 2010

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

  394. October 13, 2010

    You already have a new 100% fan!

  395. Vyache
    October 13, 2010

    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

  396. JAW
    October 15, 2010

    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.

  397. October 17, 2010

    Please. Submit a downloable version.

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

    A example will be very educational

  398. October 24, 2010

    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.

  399. Joe
    October 30, 2010

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

  400. October 31, 2010

    extravagant tally you’ve get hold of

  401. November 4, 2010

    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

  402. November 4, 2010

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

  403. Tarabass
    November 6, 2010

    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.

  404. November 8, 2010

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

  405. Adam
    November 10, 2010

    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

  406. tolga
    November 10, 2010

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

  407. November 11, 2010

    thanks a lot. Great WOrk!
    Good!

  408. November 17, 2010

    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?

  409. November 17, 2010

    how can i publish source code in this blog?

  410. November 18, 2010

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

  411. Marley
    November 21, 2010

    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

  412. November 22, 2010

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

  413. marley001
    November 22, 2010

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

  414. marley001
    November 22, 2010

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

  415. Marley
    November 22, 2010

    yeah i did

  416. Marley
    November 22, 2010

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

  417. EMunster
    November 23, 2010

    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.

  418. November 23, 2010

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

  419. Marley
    November 24, 2010

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

  420. November 29, 2010

    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

  421. November 30, 2010

    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

  422. Design 71
    December 1, 2010

    NOT WORKING!!!!

  423. December 7, 2010

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

  424. Karen
    December 8, 2010

    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!

  425. Karen
    December 8, 2010

    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!

  426. December 8, 2010

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

  427. Karen
    December 8, 2010

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

  428. Marley
    December 8, 2010

    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.

  429. Karen
    December 8, 2010

    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!

  430. Marley
    December 8, 2010

    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?

  431. Karen
    December 8, 2010

    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!

  432. Marley
    December 8, 2010

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

  433. Marley
    December 9, 2010

    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.

  434. Karen
    December 9, 2010

    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!

  435. Marley
    December 9, 2010

    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.

  436. Karen
    December 9, 2010

    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!

  437. December 11, 2010

    thats awesome tut, thanks for sharing.

  438. edd
    December 12, 2010

    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.

  439. Karen
    December 15, 2010

    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!

  440. December 15, 2010

    o thanx.. i was looking 4 this

  441. December 16, 2010

    nice tut, thanks

  442. December 20, 2010

    Exactly what I was looking for … thanks

  443. oberoi
    December 21, 2010

    Hi

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

    Regards

  444. Jeff
    December 22, 2010

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

  445. December 23, 2010

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

  446. Emre
    December 23, 2010

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

  447. December 24, 2010

    very nice, thanks for sharing.

  448. December 30, 2010

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

  449. January 6, 2011

    very nice, thanks for sharing.

  450. January 7, 2011

    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!

  451. January 11, 2011

    Fantastic jquery slider, going to have a play now!

  452. January 12, 2011

    Great Tutorial thanks

  453. January 15, 2011

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

  454. January 16, 2011

    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 🙂

  455. January 24, 2011

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

  456. January 24, 2011

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

    thanks

  457. Karen
    January 26, 2011

    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

  458. Kevin
    January 27, 2011

    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.

  459. Karen
    January 27, 2011

    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

  460. Karen
    January 30, 2011

    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!

  461. February 7, 2011

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

  462. February 7, 2011

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

  463. February 9, 2011

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

  464. Mukhtar
    February 10, 2011

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

  465. Danielle Dino
    February 12, 2011

    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!

  466. February 18, 2011

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

  467. February 22, 2011

    Thank for good script!!!

  468. February 22, 2011

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

  469. Karen
    February 22, 2011

    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!

  470. February 23, 2011

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

  471. February 24, 2011

    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

  472. February 24, 2011

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

  473. February 24, 2011

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

  474. Derek
    March 1, 2011

    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.

  475. March 1, 2011

    Great thing!

  476. March 7, 2011

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

  477. Erwin
    March 7, 2011

    Has sombody the download link with all the files include?

    please send it to; erwin713@gmail.com

  478. March 9, 2011

    Nice Site…. Thanks

  479. Carolyn
    March 14, 2011

    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?

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

  481. Valentine
    March 21, 2011

    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!

  482. Paul
    March 22, 2011

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

  483. March 23, 2011

    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?

  484. Valentine
    March 29, 2011

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

  485. March 30, 2011

    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)

  486. March 31, 2011

    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

  487. HelginMjorSee
    March 31, 2011

    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?

  488. April 3, 2011

    no follow!!!

  489. R.J.
    April 7, 2011

    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

  490. April 11, 2011

    creative and superb thanks for sharing

  491. zhouing
    April 12, 2011

    Love it!Really good stuff!

  492. Ajay
    April 13, 2011

    superb…how can i download this ?

    or where should i include above java script

  493. April 14, 2011

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

  494. April 15, 2011

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

  495. April 16, 2011

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

  496. Brandon
    April 20, 2011

    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

  497. pfau
    April 25, 2011

    Great tutorial indeed !!!

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

    Many thanks !!

  498. April 30, 2011

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

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

  500. May 5, 2011

    Thanks !!!

    IT’s really good !

  501. Sailee
    May 6, 2011

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

  502. Naveedshaira
    May 6, 2011

    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

  503. mykul
    May 6, 2011

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

    Thanks!

  504. May 19, 2011

    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…

  505. May 19, 2011

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

  506. May 20, 2011

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

  507. May 20, 2011

    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!

  508. Chris Stewart
    May 20, 2011

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

  509. May 21, 2011

    I use this. Is great.

  510. fatima
    May 22, 2011

    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

  511. May 24, 2011

    vous fashion.thank pour le partage

  512. May 24, 2011

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

  513. rony
    May 24, 2011

    it doest not work in my visual studio

  514. May 25, 2011

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

  515. May 26, 2011

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

  516. May 26, 2011

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

  517. May 30, 2011

    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

  518. steven
    May 30, 2011

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

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

  520. June 5, 2011

    Very Nice site….

  521. kkhasino
    June 10, 2011

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

    nice job i must add… thanks

  522. June 11, 2011

    this is a nice slider… thank you

  523. June 16, 2011

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

  524. June 16, 2011

    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?

  525. neda
    June 20, 2011

    how to doanload complete script ?

  526. June 21, 2011

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

  527. June 21, 2011

    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?

  528. June 22, 2011

    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.

  529. June 23, 2011

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

  530. Janet C.
    June 25, 2011

    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

  531. June 27, 2011

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

  532. justin
    June 28, 2011

    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!

  533. Ashwin
    June 29, 2011

    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

  534. Ashish
    June 30, 2011

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

  535. July 4, 2011

    Good article i like and thank you for this article.

    tr

  536. Ray
    July 4, 2011

    hi

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

  537. July 13, 2011

    Really good work thanks:)

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

    Thanks for this.

  539. July 23, 2011

    Nice tutorial… very good slider – thanks.

  540. July 24, 2011

    thanks for your kind help

  541. July 25, 2011

    I was wondering what exactly is up with that weird gravatar

  542. July 26, 2011

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

  543. July 31, 2011

    Excellent collections

  544. August 2, 2011

    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

  545. August 3, 2011

    Really good work thanks:)

  546. January 17, 2015

    can we slide on mouse-over to any list ?

  547. Orel KAMDEM
    October 25, 2016

    Hello! Thanks for this but link doesn’t work! Thanks!

Leave a Reply

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

50 High-Quality Adobe InDesign Tutorials