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.

Jake Rocheleau

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

  • Really great tut. Thanks for this one!

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

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

  • Pingback: popurls.com // popular today()

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

  • cat3y3

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

    Great tutorial. I like the clean and usable design.

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

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

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

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

  • Mike

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

  • Len

    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

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

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

  • Steven Snell,

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

  • mark

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

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

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

  • roni

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

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

  • Pingback: links for 2009-05-05 « Minesa IT()

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

  • Pingback: links for 2009-05-05 « Mandarine()

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

  • Pingback: How to Create an Image Rotator with jQuery and CSS | Business Marketing Experts()

  • Pingback: jQuery Image Rotator with Description()

  • looks nice. perfect to integrate for wordpress theme.

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

  • 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

  • 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~

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

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

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

  • Robin

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

    Looking forward to the next version.

  • Fred75

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

  • Awesome!

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

  • Pingback: Danny Chapman » Blog Archive » Fun with Javascript()

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

  • cjbates

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

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

  • mblack

    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?

  • Pingback: Image Rotator jQuery | Ajax Plugins()

  • EthanJ

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

  • Tonyk

    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!

  • Pingback: Rebekah Renford [New Media] » Blog Archive » Running for President()

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

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

  • randy johnson

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

  • Lochlan

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

    jQuery(function(){

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

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

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

    });

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

    function slideSwitchClick() {
    slideSwitch();
    }

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

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

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

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

  • Robin

    Nice one Lochlan!

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

  • Mo

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

  • Lochlan

    Hey Robin,

    Sure, replace:

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

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

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

  • Lochlan

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

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

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

  • Ryan

    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.

  • Nick Sumpter, your script does work with google chrome 😉

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

  • Colows

    no zip files?

  • carl

    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

  • Pingback: » links for 2009-05-25()

  • what can create that script to joomla module?

  • Ludo

    Excellent!!!

    Just an automated version to complete the work 😉

  • Carlos

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

  • Pingback: Rotacionar imagens com descrição | Links Web()

  • David

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

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

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

  • Pingback: 21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs @ SmashingApps()

  • Pingback: 21 Stylish CSS / jQuery Beautify solutions for your web design | Internet Resources()

  • wow, very very nice script……. looks great

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

  • Brandon

    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 🙂

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

  • Tom

    great tutorial. Will test it out right away

  • Pingback: 25 Useful MooTools Tutorials()

  • Pingback: 21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs « Dogfeeds——IT Telescope()

  • Love it. Thank you.

  • joxe

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

  • joxe

    please somebody help me

  • John

    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?

  • Pingback: The Friday Fix | Inspiredology()

  • mblack

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

  • apt

    Can i have the Nick Sumpter example slide automaticaly ?

    thanks !

  • apt

    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.

  • Hi there,

    Just wanted to say, this is AWESOME!

    Cheers,
    Eddie Gear

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

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

  • hash

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

    Close Me!

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

  • hash

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

    //***

    Close Me!

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

    ***//

  • banny

    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

  • Pingback: 10 Cool Accessible jQuery and Ajax Plugins - Blog Reign()

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

  • A2b

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

    thanks a lot

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

  • \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

  • 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…

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

  • Pingback: XOCOLAT » 10 motivos ♥ para el Viernes.()

  • Pingback: 20 Of My Favorite Javascript Codes and Blogs — Resources Weekly()

  • noodlez

    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.

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

  • tiko ilk.

    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.

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

  • Pingback: XanelaWeb – Diseño y Web » Galerías de imágenes con jQuery()

  • Wes

    Really cool. Got a question…

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

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

  • banny

    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

  • Pingback: Mastering CSS: Styling Design Elements | CSS | Smashing Magazine()

  • Pingback: Mastering CSS, Part 1: Styling Design Elements « Tech7.Net()

  • Matt

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

    Can anyone help.

    This is a gret tut though.

  • Matt

    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…

  • BBC rotator Is really cool…

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

  • Pingback: Mastering CSS, Part 1: Styling Design Elements - Programming Blog()

  • Pingback: AMB Album » Mastering CSS, Part 1: Styling Design Elements()

  • Pingback: Shopping Mall » Mastering CSS, Part 1: Styling Design Elements()

  • Great solution for a portfolio site

  • hi,

    Very useful article i will use it.Thank you.

  • Peter Stacho

    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.

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

  • Pingback: 25 jQuery Image Gallery/Slider Tutorials and Plugins | Vandelay Design Blog()

  • Daro

    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

  • 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

  • Pingback: 25 Tutoriais e Plugins jQuery para Sliders e Galerias de Imagens | Webgrafismo()

  • Pingback: links for 2009-08-07 « toonz()

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

  • Pingback: Advertisers Blog » Mastering CSS, Part 1: Styling Design Elements()

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

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

  • darkcable

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

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

  • Pingback: 25 jQuery Image Gallery/Slider Tutorials and Plugins « Web And Graphics Design Tutorials()

  • Nikola

    hi,

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

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

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

  • 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

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

  • 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

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

  • Great effect using Jquery…space saver too!

    Dave

  • Hi guys,

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

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

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

    Looking forward to replies!

  • raiylo

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

    please reply

  • banny

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

  • Pingback: » Mastering CSS, Part 1: Styling Design Elements endo – luxury coding()

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

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

  • Pingback: 60+ Helpful Resources for Portfolio Design | Vandelay Design Blog()

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

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

  • Pingback: Create an Image Rotator with Description using jQuery and CSS | jQuery Wisdom()

  • Pingback: 35+ Create Amazing Image Effects and Sliders with These Awesome jQuery Plugins | tripwire magazine()

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

  • Irwin

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

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

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

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

  • PorKy

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

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

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

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

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

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

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

    function slideSwitchClick() {
    slideSwitch();
    }

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

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

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

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

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

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

  • PorKy

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

    The scripts work perfectly thanks !

  • mark

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

  • Can I find a source code of this somewhere?

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

  • apt

    The code still does not work with me.

    I do not know how he has run at Porky?

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

    Thank you.

  • Travis

    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

    }

  • Great tut

    Great effect using Jquery

    i like it !

  • thank for share.

    it very useful

  • Pingback: 10+ astonishing jQuery resources to spice up your website()

  • Pingback: 10 Superb Image Effects and Slider Tutorials with Jquery – Designzzz()

  • Just some guy

    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.

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

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

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

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

  • 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/

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

  • Excellent! Top stuff!

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

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

  • Pingback: 20 Most Sexiest Jquery Plugins and Tutorials – Designzzz()

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

  • Pingback: 5 Attractive Content Sliders with Featured list Layout | Seventy Seven()

  • Hello
    Thank you.
    Nice aplication.

  • Pingback: JQuery Script Sammlung | astBlog()

  • Pingback: jQuery Image Galleries « Developer Suite()

  • good tutorial, thanks..

  • nice tutorial

    Thanks for this so much!

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

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

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

  • Great tutorial

    Thank you

  • paigrove

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

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

  • joh

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

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

  • 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

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

    Regards

  • apt

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

  • 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

  • GREAT !

  • Great tutorial, I like very much this script. thanks

  • was really good work thanks:)

  • I did this work was very good:)

  • C Kent

    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

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

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

  • andreas

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

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

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

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

    Kev

  • pkj

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

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

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

  • Rob

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

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

    Here is my site:

    http://www.pierevents.com/

    and here is the code:

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

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

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

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

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

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

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

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

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

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

    });
    // End Code for News Rotation

    Any Ideas???

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

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

  • Rob

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

  • Guillem

    Very nice piece of code we have here!

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

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

  • Thor

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

    How can I fix that?

    Thanks

  • Guillem

    @Thor :

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

  • Thor

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

  • Guillem

    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.

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

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

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

    $(document).ready(function() {

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

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

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

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

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

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

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

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

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

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

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

    });//Close Function

  • great toturial

    thanks a lot

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

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

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

  • swine

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

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

  • 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

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

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

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

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

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

  • 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

  • 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: [email protected]. 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 protected]
    // * Adds a class ‘last’ to the last li to let the rotator know when to return to the first
    $(“.image_thumb ul li:last”).addClass(‘last’);

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

    if ($(this).is(“.active”)) { //If it’s already active, then…
    return false; // Don’t click through
    } else {
    //Animate the Teaser
    $(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 ,
    function() {
    $(“.main_image .block”).html(imgDesc).animate({ opacity: 0.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. >>>

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

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

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

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

  • swine

    @Eoin Casey

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

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

  • swine

    @Eoin Casey







  • mike

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

  • Matthew

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

  • Darren

    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

  • @Darren,

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

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

    Does that help at all?

    David McKillen
    [email protected]
    Twitter: davidmckillen

  • @Darren

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

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

    Dave 🙂

  • @Darren

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

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

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

  • Darren

    @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

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

    David McKillen
    Twitter: davidmckillen

  • ky

    hi!

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

    {literal}

    $(document).ready(function() {

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

    //Click and Hover events for thumbnail list
    $(“.image_thumb ul li:first”).addClass(‘active’);
    $(“.image_thumb ul li”).click(function(){
    //Set Variables
    var imgAlt = $(this).find(‘img’).attr(“alt”); //Get Alt Tag of Image
    var imgTitle = $(this).find(‘a’).attr(“href”); //Get Main Image URL
    var imgDesc = $(this).find(‘.bloc’).html(); //Get HTML of block
    var imgDescHeight = $(“.main_image”).find(‘.bloc’).height(); //Calculate height of block

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

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

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

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

    });//Close Function

    {/literal}

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

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

    {/foreach}

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

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

    {/foreach}

  • ky

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

  • amjad

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

  • Ce.

    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!

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

    Thanks

  • ky

    sorry man!

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

    won’t happen again
    peace
    ky

  • @swine

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

  • Love this code! Excellent and powerful!

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

    Thanks,
    Steve

  • apt

    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!

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

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

  • Great stuff. Thanks for the speedy reply Steven.

  • Daniel Boone

    Hello-

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

  • Mike

    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?

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

  • Mike

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

  • Thank you for sharing this tutorial,

  • scarlett

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

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

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

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

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

    Cheers!
    Scarlett

  • scarlett

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

  • Jeff

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

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

  • Hannah

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

  • Daniel Boone

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

  • very thanks, great tutorial…

  • Tom D

    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.

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

    yeah You can do it very easyly:

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

    Have a good day 😉

  • Laura

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

  • Laura

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

  • Laura

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

  • wow…

    this is what i’m looking for.
    thx…

  • Hakim

    Great.Thanks for the Article.

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

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

    I would really appreciate the help.Thanks in advance.

    Regards
    Hakim

  • Hannah

    I BEG FOR HELP 🙁

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

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

    //Toggle Teaser

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

    });//Close Function

    shoul it be blocked or something so it wont move?

  • @ChrisMolnar:

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

  • @ChrisMolnar:

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

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

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

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

  • James

    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

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

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

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

    Thanks

  • Daniel Boone

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

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

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

  • You can check out my website as an example.

  • David

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

  • 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

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

  • James

    @Nauman,

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

  • 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

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

    thnaks
    Richard

  • John

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

  • Michael Joens

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

    Thanks

  • Rafal

    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.

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

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

    I can confirm this method works. Hope this helps.

  • Mike

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

  • No problemo Mike, glad I could help!

  • Alex

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

    Any ideas?

  • dupledge

    Rafal

    I used the the following for flash loads

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

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

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

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

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

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

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

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

    }

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

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

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

    });//Close Function

    in the CSS i put the following

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

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

    cheers

  • dupledge

    rafal

    the html file did not display I shall try again

    flash html file

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

    I hope it works this time

  • dupledge

    how do I submit html code for people to view

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

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

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

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

    Let me know what you think.

  • Nikola

    how can i integrate this script in drupal cms?

  • Indeed, this is very useful tuorial for our programmer!

  • dupledge

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

  • Ralph

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

    magazinecds at gmail.com

    Thank You!

  • Keato

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

  • dupledge

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

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

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

    Have a look and let me know what you think

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

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

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

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

    Cheers

  • Carlitos

    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.

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

  • it’s good~~

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

  • Awesome work.

    Thanks a lot.

  • 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

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

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

  • good wp jq hack 🙂
    tx

  • Hevyweb

    To complicated!:(

  • thank you wey much

  • Rob

    Hi Soh,

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

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

    Thanks,
    Rob

  • calcio

    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.

  • Thank you very Much … I’ll use it

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

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

  • senthilvelan

    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.

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

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

  • Mel

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

    Thanks

  • JB

    Works fine for me in IE6 🙂

  • hey ! thts great guide
    will try on my blog soon

    thanks

  • Definitely using this in our next project! Thanks

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

    Thanks again

  • Rafal

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

  • Dupledge

    Rafal

    contact me directly via my email address

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

    cheers

    dupledge

  • Den

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

    greetz

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

  • it’s so easy to use, very well.

  • Mithun PAL

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

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

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

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

  • kai

    oke tha’t great … i wanna this app…

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

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

  • Laura

    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.

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

  • 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…

  • wow

  • Sems

    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!

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

  • javier murillo

    omg,i love it !!

  • Sems

    @suhas,

    Can you post that code then of yours, please?

    Thanks!

  • maik

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

  • I actually was looking out for this code since long…

    Thanks for putting up such great resource 🙂

    Many thanks
    Smita

  • Chuse

    ¡ Magnífico !

  • stefan

    nice plugin!

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

  • lv

    Definitely using this in our next project! Thanks

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

  • 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

  • Thank you very Much for this great content

  • Edd Tillen

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

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

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

  • jesudas

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

  • Damir

    Hello,

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

  • Great Thanks

  • Vincent

    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.

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

  • Thank you man.

    This is EXACTLY what I was looking for.

    Keep rocking

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

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

  • very usefull for me

    I am Website Designer in india

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

  • thanks very usefel image rottor jquery and css

  • This will save me a lot of time. Thank you

  • Pablo

    to Bruno Monteiro:

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

  • Remo

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

  • OCMC

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

    Thanks in advance

    OCMC

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

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

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

  • Neeraj Rawat

    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.

  • 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]

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

  • Neeraj Rawat

    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.

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

  • Isiah

    kewlmonk you da man!!!!

  • uganda jobs

    hi thanks for the code…it worked greatly

  • uganda news

    great code…i will recommned evryone to use this

  • Neeraj Rawat

    Thank you very much kewlmonk……….

    you are gr8 🙂

  • Thank you very much bro

  • I am Gooner

    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 🙂

  • @kewlmonk – Great stuff man, Thanx!!

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

  • Stuart Kirkland

    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

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

  • Jen Smith

    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?

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

  • You already have a new 100% fan!

  • Vyache

    I found this code very fun to implement.

    It helped my project out big time.

    Thank you!

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

  • JAW

    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.

  • Please. Submit a downloable version.

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

    A example will be very educational

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

  • Joe

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

  • extravagant tally you’ve get hold of

  • 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

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

  • Tarabass

    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.

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

  • Adam

    First of all what a fantastic tutorial!

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

    What is the easiest way of creating this button?

    Thanks

  • tolga

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

  • MTJ

    thanks a lot. Great WOrk!
    Good!

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

  • how can i publish source code in this blog?

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

  • Marley

    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

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

  • marley001

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

  • marley001

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

  • Marley

    yeah i did

  • Marley

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

  • EMunster

    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.

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

  • Marley

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

  • PLEASE HELP…

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

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

    Thanks in advance.
    Matt

  • Mor

    Thanks for a great tutorial!

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

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

  • Design 71

    NOT WORKING!!!!

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

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

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

    The big images are clickable!!!

  • Karen

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

  • Karen

    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!

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

  • Karen

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

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

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

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

    $(document).ready(function() {

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

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

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

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

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

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

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

    function slideSwitchClick() {
    slideSwitch();
    }

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

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

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

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

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

  • Marley

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

  • Karen

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

  • Marley

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

  • Karen

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

  • Marley

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

  • Marley

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

  • Karen

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

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

  • Marley

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

  • Karen

    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!

  • thats awesome tut, thanks for sharing.

  • edd

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

  • Karen

    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!

  • o thanx.. i was looking 4 this

  • nice tut, thanks

  • Exactly what I was looking for … thanks

  • oberoi

    Hi

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

    Regards

  • Jeff

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

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

  • Emre

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

  • very nice, thanks for sharing.

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

  • very nice, thanks for sharing.

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

  • Fantastic jquery slider, going to have a play now!

  • Great Tutorial thanks

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

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

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

  • ion

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

    thanks

  • Karen

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

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

    Cheers, Karen

  • Kevin

    Hi everybody,

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

    Is this possible?

    Thanks in advance.

  • Karen

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

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

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

    Cheers,
    Karen

  • Karen

    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!

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

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

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

  • Mukhtar

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

  • Danielle Dino

    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!

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

  • Thank for good script!!!

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

  • Karen

    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!

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

  • 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

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

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

  • Derek

    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.

  • Great thing!

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

  • Erwin
  • Nice Site…. Thanks

  • Carolyn

    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?

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

  • Valentine

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

  • Paul

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

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

  • Valentine

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

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

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

    Tran

  • HelginMjorSee

    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?

  • no follow!!!

  • R.J.

    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

  • creative and superb thanks for sharing

  • zhouing

    Love it!Really good stuff!

  • Ajay

    superb…how can i download this ?

    or where should i include above java script

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

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

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

  • Brandon

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

    $(document).ready(function() {
    //Show Banner
    $(“.main_image .desc”).show(); //Show Banner
    $(“.main_image .block”).hide()
    $(“.main_image .block”).animate({ opacity: 0.85 }, 1 ); //Set Opacity
    //Click and Hover events for thumbnail list
    $(“.image_thumb ul li:first”).addClass(‘active’);
    $(“.image_thumb ul li”).click(function(){
    //Set Variables
    var imgAlt = $(this).find(‘img’).attr(“alt”); //Get Alt Tag of Image
    var imgTitle = $(this).find(‘a’).attr(“href”); //Get Main Image URL
    var imgDesc = $(this).find(‘.block’).html(); //Get HTML of block
    var imgDescHeight = $(“.main_image”).find(‘.block’).height(); //Calculate height of block
    if ($(this).is(“.active”)) { //If it’s already active, then…
    return false; // Don’t click through
    } else {
    //Animate the Teaser
    $(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
    $(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0” }, 250 );
    $(“.main_image img”).attr({ src: imgTitle , alt: imgAlt});
    });
    }
    $(“.image_thumb ul li”).removeClass(‘active’); //Remove class of ‘active’ on all lists
    $(this).addClass(‘active’); //add class of ‘active’ on this list only
    return false;
    }) .hover(function(){
    $(this).addClass(‘hover’);
    }, function() {
    $(this).removeClass(‘hover’);
    });
    //Toggle Teaser
    $(“a.collapse”).click(function(){
    $(“.main_image .block”).slideToggle();
    $(“a.collapse”).toggleClass(“show”);
    });
    /* mdm – 3/4/10
    ————— */
    timing = 7000; // Change the speed here. “1000” == 1 sec
    rotate = setInterval(“triggernext()”, timing);
    // .bind below requires js lib 1.4, if using 1.3 change to:
    //mouseover $(…).hover(function() {
    //mouseout }, function() {
    $(‘#main’).bind({
    mouseenter: function() {
    clearInterval(rotate);
    },
    mouseleave: function() {
    rotate = setInterval(“triggernext()”, timing);
    }
    });
    }); //Close $(document).ready([…]);
    function triggernext() {
    slides = $(“.image_thumb ul”);
    if((slides.find(“li.active”).index() + 1) == slides.find(“li”).length) {
    slides.find(“li:first”).trigger(‘click’);
    } else {
    slides.find(“li.active”).next().trigger(‘click’);
    }
    }
    //Close Function

  • pfau

    Great tutorial indeed !!!

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

    Many thanks !!

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

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

  • Thanks !!!

    IT’s really good !

  • Sailee

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

  • Naveedshaira

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

  • mykul

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

    Thanks!

  • 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…

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

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

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

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

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

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

    Thanks again!

  • Chris Stewart

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

  • I use this. Is great.

  • fatima

    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

  • vous fashion.thank pour le partage

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

  • rony

    it doest not work in my visual studio

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

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

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

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

  • steven

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

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

  • Very Nice site….

  • kkhasino

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

    nice job i must add… thanks

  • this is a nice slider… thank you

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

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

  • neda

    how to doanload complete script ?

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

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

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

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

  • Janet C.

    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

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

  • justin

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

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

  • Ashwin

    Hi Soh,

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

    Thanks

  • Ashish

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

  • Good article i like and thank you for this article.

    tr

  • Ray

    hi

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

  • Really good work thanks:)

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

    Thanks for this.

  • Nice tutorial… very good slider – thanks.

  • thanks for your kind help

  • I was wondering what exactly is up with that weird gravatar

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

  • Excellent collections

  • tom

    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

  • Really good work thanks:)

  • can we slide on mouse-over to any list ?