Comments on: jQuery Infinite Carousel Plugin 1.2 Released

By: George

George — Fri, 15 Jan 2010 11:43:21 +0000

Just brilliant and thanks very much for sharing.

By: Noah Funk

Noah Funk — Wed, 13 Jan 2010 23:38:11 +0000

First of all, thank you for the time and energy you’ve put into this project. Although I’m fairly new to javascript, I do recognize this as a solid production

I have however, been struggling with an issue in IE7 here:
http://development.communityhopeschool.org/

When hovering over the infinitecarousel thumbnails or letting them cycle on their own, the thumbnail list slips out from under the image, breaking the flow of the floated list to their right

I’ve poked at the CSS quite a bit bu I’m afraid it could have something to do with javascript? Again, I’m fairly new and would greatly appreciate some advice

Thanks for your time

By: 15个非常牛逼的幻灯片插件 « 幻岛|领地

15个非常牛逼的幻灯片插件 « 幻岛|领地 — Sun, 10 Jan 2010 00:39:59 +0000

[...] jQuery Infinite Carousel Plugin | Demo [...]

By: Mikael Pettersson

Mikael Pettersson — Sat, 09 Jan 2010 01:44:05 +0000

ok, now this is starting to border on spam.

Add a fix for the opacity for IE: ” ‘filter’:'alpha(opacity=50)’ ” for the text-box.

By: Mikael Pettersson

Mikael Pettersson — Sat, 09 Jan 2010 01:14:34 +0000

Also.. i can’t get the pause etc images to work.

By: Mikael Pettersson

Mikael Pettersson — Sat, 09 Jan 2010 01:04:50 +0000

I recommend adding some padding to the text in the caption box .. gets a bit hard to read at times.

By: Robert Sexton

Robert Sexton — Tue, 05 Jan 2010 17:50:52 +0000

Thanks for your reply. Regarding your first reason:
“…if I just changed the dimensions of the larger image to fit the thumbnail, the picture would look horribly pixelated and in my opinion pretty ugly.”
I believe you’re being way too pessimistic here. While it depends to large degree on the scaling algorithm, you can get pretty good results down to some surprisingly small pixel sizes. The issue is not ‘pixelization’, as you said, so much as a loss of detail — but remember, we’re not looking to produce prints off the thumbnails, their main use is to act as placemarkers or visual cues, and even at as small as 16×16 there is usually enough information to help you find what you’re looking for in the gallery. Take a look at any decently designed website favicon and you will understand my point.
As far as your second point, concerning the aspect ratios– I agree, this is slightly more complicated. The solution, however, can be as simple as not forcing the thumbnails to be square – just let them scale according to the original photo’s aspect ratio. Otherwise, with a little more coding, the script could first scale the photo down to a target pixel size based on length or width (and maintaining the correct ratio), THEN, crop that result to the nearest square to produce the final thumbnail. Either way, there would be minimal loss of information and, IMHO, there would be a lot more utility from the thumbs than from just a piece of the pictures’ upper left hand corner.
I don’t have a lot of time these days to write my own routines, which is why your “drop-in” script has been great for me. But since I could really use this feature, I’d be willing to take a crack at incorporating it if you tell me where I should focus my attention, and whether I could do it by way of adjustment to your code or if I need to use some additional routines from the jQuery library.

By: admin

admin — Tue, 05 Jan 2010 14:29:19 +0000

@Robert Sexton
Thanks for the feedback Robert. This is something that I went back and forth on before adding the feature the way it is now. My main reason for making the thumbnails just a piece of the larger image was twofold. First, if I just changed the dimensions of the larger image to fit the thumbnail, the picture would look horribly pixelated and in my opinion pretty ugly. Second, since not every image is square like the thumbnails are, scaling the full size image down could either lead to an incorrect image ratio and result in an image looking squeezed or squashed. Don’t forget that you can turn the thumbnail backgrounds off entirely, but if that’s not an option it shouldn’t be difficult to change the script to downsize the images to fit into the thumbnail blocks.
Another option would be to use PHP to properly generate scaled down thumbnails that look good in the correct ratio. This would of course add some processing time, but the outcome would be more appealing visually.
By the way, to answer your question about updating the script, see the home page of the site and you’ll see that I just released version 2 of this plugin

By: Robert Sexton

Robert Sexton — Tue, 05 Jan 2010 06:35:43 +0000

Hi there. I just want to say thanks for all your work, and providing this plugin to the public. There are a lot of Javascript/AJAX photo viewers/sliders out there, but this one rises to the top of the pack. The only shortcoming is the fact that the script uses a cropped piece of the main picture to generate the associated thumbnail, instead of a ‘normal’ scaled version of the shot. This has led to several “WTF?” moments from people for whom I have used the script, where they couldn’t immediately see the correlation between the thumbnail and the original image. It was most recently a glaring example on a friend’s personal photography website, where he had a large series of landscape shots. Since all of the approximately 70 photos had some degree of sky at the top, all the thumbnails looked virtually identical and it made the whole gallery look very bizarre.
I don’t know if you plan to address this in a coming update (or if you are even still updating this otherwise great script), but perhaps the author or someone else can point me in the right direction as far as where in the code I could focus a modification to have it produce proper scaled thumbnails of the whole image (ideally, incorporating user-adjustable resolutions, or even fixed-resolution thumbnails if variable res is too complicated). Can anyone give me a head start? It would be much appreciated. Thanks again!

By: Thanh

Thanh — Tue, 05 Jan 2010 01:18:29 +0000

OK I figured out how to fix this…

around line 64 of jquery.infinitecarousel.js, the background color was defined here:

$(‘#textholder’+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({‘backgroundColor’:'#FFF’,'opacity’:'0.5′});

Just change the #FFF to whatever color you want.

Thanks for making such a great content slider.