Works flawlessly! Is there a way to make the script with a mouse click instead of a mouse hover?

I tried replacing:
$(‘#thumbs ul li a’).hover(

with:
$(‘#thumbs ul li a’).click(

But it opens the image in a new window.
Any idea how to tweak this properly?

Thanks!

For your scrolling issue you could make use of the JCarouselLIte callbacks. They are fairly easy to deal with as they return a JavaScript object (have a look at the console if you enable logging). E.g. passing the letter “a” to the afterEnd function would give you a huge “a” object to work with. E.g. to slowly fadeOut the old image and fadeIn the new image you could use the following code:


beforeStart: function(a) {
$(a).parent().fadeTo(400, 0);
var bg = $(a).find('img').attr('src');
$('.slider').css({backgroundImage: "url("+bg+")"}, 600);
},
afterEnd: function(a) {
$(a).parent().fadeTo(600, 1);
}


Granted some sliders have the above built in, but they aren;t all 2KB in size

One intial load the hover script works fine but as soon as I start rotating the carousel, hover performance becomes patchy. I can hover over the image and though the cursor changes, the image doesn’t react. Any ideas?

Rob:

Hi,
For that you’d need to utilize the $(this) variable and gives each image roller over a class, as opposed to an id. Using the latter, you could easily use multiple image sets, with rollovers per page. If I get time, I’ll write a short blog post how to do this

I’d be interested in a tutorial on having multiples of this functionality on the same page too. I’ll stay tuned.

Thanks for the above tutorial.

For that you’d need to utilize the $(this) variable and gives each image roller over a class, as opposed to an id. Using the latter, you could easily use multiple image sets, with rollovers per page. If I get time, I’ll write a short blog post how to do this

christine aquino:

I have a question, is there a way where this entire code will work with a hotlink of images of urls? I want to hotlink different images from another website I own.

Hi,

There’s no reason that wouldn’t work, you’d just replace the image src’s. The only issue you’re likely to have is displaying the thumbnails, as you wouldn’t want to resize them using HTML only. Ideally, you want to save the image to your website and resize it there – as I can’t think of any image reszing scripts that allow remote image resizing.

Alternatively, you could use CURL or file_get_contents to fetch each image, but this would slow you page downj a lot. However, you could write a cron job that downloads and resizes your image, meaning your page would only ever be displaying local, as opposed to remote images. If you want some examples in on twitter – @roballport.

Thanks