Here’s html I used for each li:

img alt="" id="images/counter.png" src="images/image1.jpg" width="738" height="323"


And the js I changed was:

from attr('src');
to attr('id');

on lines 178, 187, 213, and 356.

I’m no javascript expert, so I’m hoping these changes didn’t break something else, but it seems to work just fine. I have not fully tested for cross browser compatibility yet, but working so far on FF, Safari, and Chrome on MAC.

This could be a possible 4th solution for the thumbnail issue listed above if someone wanted to do the extra step of making a separate file for a thumb.

Any thoughts on having the active/hover state change the image, or a better way to do this would be great!

Rather than thumbnails that are images or numbers, I want to use a simple counter of circle images where the active slide has a corresponding dot that is a different color. So if I have 4 image slides, I have 4 dots that are grey, and when it’s on the the 3rd slide, the 3rd dot is green instead. This would also hold in the hover state and the dots would be clickable to link to that slide, like they do now.

I’ve seen this a lot with flash sliders, but I don’t want to use flash. This would be a great feature. Love the slider – thanks a bunch!!

Went to the carousel.php which called the script. Commented out/added one line to call the new js file:
/*<script type="text/javascript" src="/js/jCarousel.js”>*/
<script type="text/javascript" src="/js/jquery.infinitecarousel2.js”>

It still didn’t work

I then viewed the source script you created:
http://www.catchmyfame.com/jquery/infinitecarousel2/demo/thumbmod/

I then copy and pasted that entirely into the jquery.infinitecarousel2.js and modified the thumbnailWidth and thumbnailHeight arbitrarily to 60px w and 45 px h.

Boom. Magic. Thanks.

Still interested in figuring out how to get rid of the slide transition and replace it with a fade transition.

<?php
$filename = '/path/to/images'. $_GET['i'];
$width = (int) $_GET['w'];
$height = (int) $_GET['h'];
$quality = $_GET['q'];
$info = getimagesize($filename);
header('Content-type: '.$info['mime']);
list($width_orig, $height_orig) = $info;
$ratio_orig = $width_orig/$height_orig;
if ($width/$height > $ratio_orig) {
$width = $height*$ratio_orig;
} else {
$height = $width/$ratio_orig;
}
// Resample
$thumb = imagecreatetruecolor($width, $height);
if($info['mime']=='image/jpeg') $image = imagecreatefromjpeg($filename);
elseif($info['mime']=='image/png') $image = imagecreatefrompng($filename);
elseif($info['mime']=='image/gif') $image = imagecreatefromgif($filename);
imagecopyresampled($thumb, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
/*
if($info['mime']=='image/jpeg') imagejpeg($thumb, null, $quality);
if($info['mime']=='image/png') imagepng($thumb);
if($info['mime']=='image/gif') imagegif($thumb);
*/
imagejpeg($thumb, null, $quality);
?>