Feed on
Posts
Comments

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.

Wow, what a week. For a web developer/designer/tech lover there has been a lot of new information in this first month of 2010 (at last we get to use the word “twenty” to describe the new decade — twenty-oh-four never rolled off the tongue). Not only did two of the best browsers get some nice updates, but Apple finally released their long-rumored tablet and Microsoft told users to stop using IE6. Oh, and then there’s PayPal.

Firefox and Chrome

First off, Mozilla and Google both released updates to their web browsers. Firefox 3.6 is out now, and in addition to some bug fixes it introduces eye candy known as “personas”, stale plugin protection, downloadable web font (WOFF)  support, support for new CSS attributes such as gradients, background sizing, and pointer events, and support for new DOM and HTML5 specifications including the drag & drop and file API, which allow for more interactive web pages.

Google released the fourth version of their Chrome browser which added the ability to add extensions and sync bookmarks across multiple computers.  They also have added more HTML 5 support including  LocalStorage, Database API, WebSockets, and more. I like Chrome, but I still haven’t switched to using it as my primary browser (still Firefox). I think it’s making good strides but for the time being I still use it  mostly for testing. I like it, don’t get me wrong, it’s just that Firefox and I are old friends and well, I don’t see a need to dump Firefox just yet.

The iTablet iSlate iPad

Just yesterday Apple released their long awaited tabled, the iPad. Almost instantly the jokes about the name iPad began to circulate around the Internet with no end in sight. I admit I also cringed at the name, and was hoping for something more inventive than iPad. While Apple’s iWhatever line is certainly good branding, it’s wearing thin on me and it’s inevitable that at some point they’ll need to come up with a better solution. Continue Reading »

This is just a short post to say that jQuery 1.4 has just been released and all CatchMyFame plugins are compatible. All demos have been updated to use the new 1.4 version. If you encounter any issues, please let me know.

This is a small update to my before/after jQuery plugin but since it introduced a new option I bumped the version number up by a point.

Version 1.1 introduces the option to specify the path to where you are storing the navigation images that come with the plugin. Previously you needed to either edit it by hand or use the folder that was coded in the plugin. Now you can specify the path on a per instance basis.

For more info, see the original before/after plugin page which has been updated with the latest information or see our jQuery plugin page which list all of our plugins.

As announced earlier, I’m happy to release version 2 of the jQuery Infinite Carousel plugin. What happened to versions 1.3-1.9 you ask? Well, since I overhauled the old plugin and added so many new features, it just seemed fitting to brand this release with a whole new version number. Heck I could’ve named it version Infinite Carousel, the “Illudium Q-36 Explosive Space Modulator” edition, but it seemed a bit wordy. Anyway, like it matters. All you want is the plugin right?

So What’s New?

Where to begin? Based on feedback from users, I’ve added more options than you can shake a stick at. Go on, get a stick. Shake. Can’t be done. There are so many new features that I was a bit worried that the plugin might suffer from option overload, but in the end I think what remained was not only useful but vital to the plugin. Continue Reading »