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