Comments on: Guest Post – Creating an Image Rotator

By: Kev

Kev — Thu, 25 Feb 2010 22:19:19 +0000

Hi Soh, lovely script btw!

I was wondering if you have any suggestions when it comes to adding images in the area for all the items.

Instead of using standard html text for links. I would like to make use of a button images.

Somehow, .jpg or .png images don’t render at all. They appear as empty blue boxes. Any suggestions or tips?

By: Alex

Alex — Fri, 19 Feb 2010 14:37:21 +0000

Superb rotator, really liking this.

Quick question. What licence does this fall under? Creative Commons / MIT / GPL ??

Thanks

By: rubster

rubster — Wed, 20 Jan 2010 23:04:14 +0000

Im trying to get this into wordpress but my php skill is novice. Anyone attempted to create a plugin?

By: Cam

Cam — Tue, 19 Jan 2010 18:53:06 +0000

Great Js plugin Soh, simple and very effective.

Quick question though. How can I stop the ‘tip’ from showing on the load of the page? Basically so it ‘Hides’ first instead of showing.

By: Paul

Paul — Thu, 14 Jan 2010 18:53:45 +0000

I would like to know how this is put together. I came across your site and have attempted to assemble the project with mixed results. Do you have a zipped file you could make available to me? I am trying to teach myself something new as I find things to try.

By: Denny

Denny — Tue, 01 Dec 2009 11:01:18 +0000

This script can’t work in my blog…

By: iLouis

iLouis — Wed, 18 Nov 2009 14:57:03 +0000

Hello, really nice work with the rotator. I am integrating it in the new site of our company (under construction) and thanks you a lot for it.I have a misunderstanding about the button show/hide. When i click on it, full page is going to be centered on the rotator, and on first display page get down to be centered on it. If i click hide button, the page comes back to its ‘normal’ position. I tried to manage this but without success. Have someone seen the same thing and have a trick to fix ?

Kr, Louis

By: Steve

Steve — Thu, 29 Oct 2009 14:46:52 +0000

Hi Soh… This is great. I’m busy adding it to my homepage now! Cheers Steve

By: chris

chris — Sun, 16 Aug 2009 20:13:35 +0000

hy Soh, my name is Chris and i‘m a webdesign rookie..
I tried to follow your tutorial ‚Create an Image Rotator with Description (CSS/jQuery)‘. Unfortunately I coulden‘t follow it.. so could you sent me a .zip file, so i can see how it‘s build up. would be awesome,

Best wishes, from switzerland,

Chris

By: Ebrahim

Ebrahim — Thu, 25 Jun 2009 15:59:04 +0000

Figured it out:

jQuery(function() {

$(”.main_image .desc”).show();
$(”.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)
//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()’, 7500 );
playSlideshow = setInterval(”slideSwitchTimed()”, 2000);
});

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

});

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

return false;
}

Thanks again.