Really great tut. Thanks for this one!

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

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

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.

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

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.

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

Steven Snell,

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

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

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

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

BTW.. ppl… click on the ads !!

Thanks.
Keep on the good content.

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

looks nice. perfect to integrate for wordpress theme.

Hello,

Just GREAT ! Thanks !

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

Thanks in advance

I can’t see the demo no working links

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

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

Looking forward to the next version.

Awesome!

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

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

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

Any way to do this?

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

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

Nice one Lochlan!

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

Hey Robin,

Sure, replace:

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

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

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

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

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

Thanks again Soh, the tutorial was superb.

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.

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

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

what can create that script to joomla module?

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

I will appreciate if somebody can guide me.

Thank you.

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

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~

Love it. Thank you.

please somebody help me

Can i have the Nick Sumpter example slide automaticaly ?

thanks !

Hi there,

Just wanted to say, this is AWESOME!

Cheers,
Eddie Gear

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

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

//***

Close Me!

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

***//

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

thanks a lot

\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

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.

Really cool. Got a question…

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

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

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

Can anyone help.

This is a gret tut though.

BBC rotator Is really cool…

hi,

Very useful article i will use it.Thank you.

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

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

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

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

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

Great effect using Jquery…space saver too!

Dave

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

please reply

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

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.

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

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 !

Can I find a source code of this somewhere?

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.

Great tut

Great effect using Jquery

i like it !

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.

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

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

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

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

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

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

Anybody else got this problem.

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

good tutorial, thanks..

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

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

Great tutorial

Thank you

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

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

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

GREAT !

Great tutorial, I like very much this script. thanks

was really good work thanks:)

Hi,

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

Thank you

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

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

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

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

Kev

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

JQuery is installed trough the Magento System:

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

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

I hope you can help me!

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

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

Here is my site:

http://www.pierevents.com/

and here is the code:

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

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

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

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

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

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

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

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

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

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

});
// End Code for News Rotation

Any Ideas???

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.

@Thor :

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

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.

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

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

@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

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

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

$(document).ready(function() {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dave

@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

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}

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

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

Thanks

@swine

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

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

Great stuff. Thanks for the speedy reply Steven.

Hello-

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

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

Thank you for sharing this tutorial,

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

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

very thanks, great tutorial…

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

yeah You can do it very easyly:

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

Have a good day

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

wow…

this is what i’m looking for.
thx…

I BEG FOR HELP

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

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

//Toggle Teaser

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

});//Close Function

shoul it be blocked or something so it wont move?

@ChrisMolnar:

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

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

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

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

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

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

@Angela

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

David McKillen
Spoccer.com
Twitter: Spoccer

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

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

Hi David,

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

Cheers
Glenn

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

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

here is the code i try :

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

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

I can confirm this method works. Hope this helps.

No problemo Mike, glad I could help!

Rafal

I used the the following for flash loads

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

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

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

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

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

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

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

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

}

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

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

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

});//Close Function

in the CSS i put the following

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

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

cheers

how do I submit html code for people to view

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

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

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

Let me know what you think.

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?

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.

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.

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

Anyone else having issues running this with jQuery 1.4.2 ?

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

jQuery.noConflict();

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

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

Cheers,
Todd

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

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

Should be done in a few days.

good wp jq hack
tx

Hi Soh,

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

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

Thanks,
Rob

Thank you very Much … I’ll use it

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

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

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

Thanks

hey ! thts great guide
will try on my blog soon

thanks

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

Thanks again

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

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

greetz

it’s so easy to use, very well.

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.

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

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

Hello

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

Thanks!

omg,i love it !!

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

¡ Magnífico !

Definitely using this in our next project! Thanks

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

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

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

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

Hello,

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

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

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

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

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

I hope this is helpful to someone out there.