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.
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.
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!
@Marc
I don’t think you can point to a folder to have JavaScript read it. That’s something for PHP (or another server side language).
I suspected that wasn’t possible with only js.
Thank you for the clarification!
@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.
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!