Thumbnails in the Infinite Carousel

One question I frequently get about the Infinite Carousel jQuery plugin focuses on the way that I chose to create the thumbnail images. Probably the biggest criticism is that the thumbnail image is just a tiny part of the overall image and in some cases doesn’t help distinguish the images that make up the carousel. For example, if the upper left corner of all your images is say sky blue, then all the thumbnails may end up looking alike.

For those of you that haven’t looked at the code that generates the thumbnails, the plugin uses the individual carousel images as the background image (CSS background-image) for each respective thumbnail div. I did this primarily for speed. By reusing the carousel images as the background images for the thumbnails, there’s no added processing needed to create the backgrounds. The trade off here is pretty obvious; speed for recognition.

For many images this works out just fine, but for some it doesn’t. Therefore I have come up with two alternatives for better thumbnail images. I will present these options here, but I am not yet making this part of the plugin itself. Your feedback will determine if a future version of the infinite carousel will incorporate one of these new methods to generate thumbnails.

Method #1 – HTML

The other easy solution to creating thumbnail is to simply resize the carousel images to fit into a smaller area. The biggest issue with this resizing the individual images and using them as thumbnail images is that a) the quality degrades (pixelization) and b) the aspect ratio may not be the same as the original image. There’s nothing you can do about the quality when you take a large image and change the width and height attributes in a web page. Thems is just the facts of web life. An images resized by altering its dimensions will end up pixelated to some degree. Not the end of the world. The aspect ratio can also be overcome by properly calculating the correct width and height for thumbnails based on your full size images. For example, if your images are 800×600, setting a width and height for your thumbnails of 40 pixels would end up squashing the image. However if you set them to 40×30 then they would better represent the actual images.

Click here for an example of method #1.

Method #2 – PHP

Another solution is to generate properly resized thumbnails automatically using the proper aspect ratio using PHP,  so that the smaller image is the proper size and not pixelated. The trade off here is processor utilization. If you have a lot of traffic to your site then without some sort of caching mechanism, the constant thumbnail generation could end up being a real drain on your server. The aspect ratio isn’t as much of a problem with the PHP solution as the PHP script that generates the thumbnails can easily be coded to generate the them using the same aspect ratio as the full size images.

Click here for an example of method #2.

Method #3?

While I did say there were two alternatives for the thumbnail issue, there does exist a third option — manually creating the thumbnail images. You could generate your own scaled down versions of your carousel images and then point the plugin to a folder of thumbnails. This would require extra work in creating and managing more images, increase the number of requests to the server (unless we used sprites), and also require some sort of special naming convention so that the plugin could correlate images with their respective thumbnails. This would increase the quality of the images and keep server processing to a minimum, at the expense of giving you more work in creating and managing images. I’m not big on more work myself, but to each his own.

One issue with using either the HTML or PHP solution is that since we’re moving from using a background image to filling the div with an image, we can’t as easily place numbers on the thumbnails as we did previously. It can be done, but now it would require CSS to position the number over the image in the div.

Personally I’m leaning toward method #1 as the most viable solution. As long as your thumbnails aren’t tiny, scaling the full size images down should give fairly decent results and not cost anything extra in terms of server requests or processing. View the source code of the first example’s modified carousel code to see the two lines that were changed.

If you’d like to have the PHP script used in method #2, post a comment and if I get enough interest I’ll post the source.

14 thoughts on “Thumbnails in the Infinite Carousel”

  1. Funny, I was only asked this the other day by someone using Infinite Carousel (as I do on my site).
    I would be interested in seeing the PHP version.

  2. Before all thank you for this useful plugin, then +1 on html.
    I think that at small thumbnail dimension the degradation of the image is trascurable.

    By the way i’ve a question:
    is possible to put all the images in a folder and then have the carousel loading them in automatic way without writing all the links for each one image on the body?
    I know that is something far from the status of the plugin at this moment, but just to know if it is something possible.

    Thank you!

    1. @Mark, I have done just this – PHP can do this without too much fuss. You read the contents of the folder, discard the ‘.’ and ‘..’ folders, and output a set of tags with the of your choice in each. I have actually done a series of folders, each containing the content for several carousels with text captions for each image. Your needs are simpler – you just read one folder’s contents and output the file names in a loop.

      1. Hi Frank, thank you for the tip!
        As i’m learning both js and php can you link me a page with some code example for what you wrote above?
        I will appreciate this so much!

    1. For those of you that want to play with the PHP option, here’s the code I used (note that the plugin is slightly modified — view the source of the demo for the modified version):

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

  3. I decided to update the jCarousel from 1.1.2 (named jCarousel.js) to the latest version (jquery.infinitecarousel2.js).

    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.

  4. I want to do something with the thumbnails, but something different from the variations you offer here. I think it would be easier and shouldn’t affect the speed.

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

  5. I was able to get this partially working as I want. By changing the reference to the src of the li that generates the thumbnail to id instead and then making an image the id, I can get my image in there, but all I am able to do in the active/hover state is change the opacity.

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>