Ok, ok, I’ll spare the hackneyed rhymes and just present you with a completely new Infinite Carousel 3 for the holidays!

Unfortunately since this is a ridiculously busy time of year, I haven’t had time to throw up any demos just yet. But I will. In a few days. But in the meantime you can download the plugin and use it to your heart’s content. I did managed to cobble together some basic information about using the new version which I’m posting below.

Download

• Infinite Carousel 3

What’s New

• Completely rewritten. Smoother, faster, tighter.
• New options
• Images can be linked
• The carousel now accepts images and videos
• New timer
• New thumbnail options
• Easier styling

Notes

• Easing effects still require a separate jQuery easing plugin (I recommend http://gsgd.co.uk/sandbox/jquery/easing/), or adding easing code on your own.

Options

• transitionSpeed – the time (in milliseconds) a transition from one item to another should take (default 800)
• displayTime – the time (in milliseconds) an item should be displayed (default 6000)
• displayProgressRing – a Boolean value that shows or hides the progress ring in the upper right hand of the carousel (default true)
• progressRingColorOpacity – the color and opacity (in RGBa format) of the progress ring (default ’0,0,0,.5′)
• progressRingBackgroundOn – a Boolean value that shows or hides the progress ring background ring (default true
• progressRingBackgroundColorOpacity – the color and opacity (in RGBa format) of the progress ring background ring (default ’255,255,255,.5′)
• thumbnailType – the format of the item thumbnails (default ‘none’. Possible values are: ‘buttons’, ‘images’, ‘numbers’, ‘count’, or ‘none’)
• easeLeft – the easing method when the carousel moves to the left (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
• easeRight – the easing method when the carousel moves to the right (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
• imagePath – the path to the carousel’s navigation and playback control images (default ‘/js/infinitecarousel/images/’)
• inView – the number of items to be viewable at once (default 1)
• margin – the amount of margin to add around items (default 0)
• advance – the number of items to advance when a user clicks the left or right navigation buttons or the carousel is on autopilot (default 1)
• customClass – a name to be assigned to the carousel (or the carousel’s wrapper) that can be used for styling or scripting. The name will be prepended with “ic_” (default null)
• showControls – a Boolean value that shows or hides the play/pause controls (default true)
• autoHideCaptions – a Boolean values that hides captions between transitions ( default false)
• autoPilot – a Boolean value that moves the carousel automatically when the page loads (default false)
• prevNextInternal – a Boolean value that places the left/right navigation arrows inside or outside the carousel (default true)
• internalThumbnails – a Boolean values that determines whether the thumbnails are placed inside or below the carousel (default false)
• enableKeyboardNav – a Boolean value that enables or disables keyboard navigation. The left and right keys mimic the left and right arrows of the carousel, p pauses playback and s starts playback (default true).
• onSlideStart – default function(){},
• onSlideEnd – default function(){},
• onPauseClick – default function(){},
• onPlayClick – default function(){}

HTML

• An unordered list should contain your items (images, videos, or a mix).
• All items in the list must have the same dimensions which must be set
• Images can be wrapped with links
• Captions must be contained in paragraph tags and come after the image
• User CSS now controls the look of the thumbnails
• Video can have their own thumbnails by adding a longdesc attribute to them.

Ex:
    <ul id="carousel">
        <li><img width="200" height="133" alt="" src="p1.png" /><p>This is <strong>a caption</strong></p></li>
        <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p2.png" /></a></li>
        <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p3.png" /></a></li>
    </ul>

Instantiating

• $(‘#carousel’).infiniteCarousel({});

CSS Classes

• .ic_caption – styles the captions
• .ic_button – styles thumbnails
• .ic_active – styles the active thumbnail containers
• .ic_thumbnails – styles the div that holds the thumbnails

	** what's new:
		* completely rewritten. smoother, faster, tighter.
		* new options
		* captions
		* links
		* images or videos
		* new timer
		* new thumbnail options
		* easier styling

• We’d been planning on replacing the original, spam-ridden plugin site for quite some time
• In the process of deleting on the spam, all the plugins were deleted and we didn’t have a recent backup
• Instead of burning cycles keeping the old site on life support, we decided to make a clean break and kick development on the new site into high gear.
• The new site is powered by GitHub and a package manifest for plugins
• Plugins from the old site were never going to be automatically imported into the new one.
• The repo is at github.com/jquery/plugins.jquery.com
• We are very sorry, but also very excited!

So it looks like I’ll have to get everything moved over to github and make some updates to the plugin packages as well. In the meantime you can continue to download the plugins from this site. One of which is currently being completely re-written :)

Stopped support and development of their toolbar for Firefox

Maybe it’s the cynic in me, but I have to believe that this was done to get more people to switch to Chrome. I mean why else would they do this? The only public mention of this by Google says that Firefox now has most of the toolbar’s functionality built-in to the browser. Well sure, if you take the time to install a bunch of add-ons and create new bookmarks.

Removed the plus (+) as a search modifier

It used to be that when you required a word or phrase in a search term, you could just slap a + in front of it (e.g. don’t be +evil). In what looks like a move related to pushing Google+, Google has removed this functionality and now requires you to place quotes around any words or terms you require (e.g. don’t be “evil”). Google says that this is an improvement but I disagree.

Changed the look and functionality of Google reader

I don’t really care about the social features of Google Reader changing (I never used them), and Google shifting them to be more integrated with Google+, but I don’t like the new look. I’m sure I’ll get used to it in time, but what’s the deal with this new weird spacing they’re introducing? Did everyone at Google get giant new monitors to work with?

Changed the look of Gmail

Ug, see above. I’ve used Gmail since day one. Thankfully the functionality hasn’t changed, but like Google Reader the look has. Again, what’s up with the spacing? And the themes? I used Gmail’s “shiny” theme and have grown attached to it. Guess what? The new version of Gmail doesn’t have a theme that looks as good, or uses my screen real estate as efficiently. C’mon Google, get some folks with an eye for design involved and stop letting the engineers control everything.

Developed a social network that still doesn’t interest me

Once Google+ opened to the masses I tried it. Now mind you I don’t use Twitter or Facebook, so this move took some extra effort on my part. But I figured since I use most of Google’s other services that this might be for me. Unfortunately it doesn’t seem to be. After a few days I stopped checking my plus “stream” and don’t miss it. If I want people to know something, I’ll publish it here. If I want a select group of folks to know something, I’ll email them. I also have a hard time with the layout and the never-ending stream of data from other people without some way to filter it. Seems like a lot of noise gets through and I already have a had enough time getting through all my RSS feed items and emails in a day.

Shut down Google labs

Google labs was a cool place to check out some of the more abstract idea Google had. Granted a lot of projects in the labs never made it out of beta, but it was a place to go to see what might be coming next. As John Dvorak put it, “This is a disaster for users. I can see no real rationale for turning off the labs and re-distributing all the cool and nifty programs and projects that are found all over the site. To me, this is Google pulling a Yahoo.”

Changed the look of the search results page so that the right half of the page has a gaping hole for more page information

Let me say that I like having the ability to preview sites before visiting them, but why did the company that revolutionized slick web interfaces (e.g. Google Maps) come up with such an ugly preview feature? When you’re not using it, half of the screen is  empty. Huh? This is the best that Google could come up with? Oh, and while I’m  talking about search results, why haven’t they restored the ability to have more than 10 results per page? Ever since Google instant came out, that option has been dead.

Things they’ve done recently that I’m pleased with

Forced SSL for searches

About time. Now only Google knows what I’m looking for instead of my ISP and anyone else within packet sniffing distance.

Killed Google buzz

How long did this one need to limp along before someone put it out of its misery?

Changes

• No more SQL errors if using the class on a query with no results (although I fail to see the point of using it on an empty query anyway, but the bug is fixed)
• When selecting ‘ALL’ only one page is displayed, and if you are using the display_items_per_page drop-down menu, ‘ALL’ is now selected as well.
• If a page less than page one, or greater than the total number of pages is requested, no results are displayed and the appropriate prevous/next links are disabled
• The items per page array that populates the display_items_per_page drop-down menu is now an option that can be configured when instantiating the class. Previously this was hard-coded to the class.
• The $high option has been removed from the class (it was never used).

Note that if you receive a PHP notice about undefined indexes that you should turn down your error reporting. This notice may be displayed when loading the page for the first time when no $_GET variables are present. The class accounts for this, however PHP throws a notice about it.

Examples

• Basic example
• Form variables carry over example

I’ve also added license info at the head of the class (CC Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)).

Download

• PHP Pagination Class v2

Visit the Before/After plugin page to download the latest version and try out the demos.

The jQuery

After the jQuery code to instantiate the plugin, add (assuming a container with the id of “conjainer”):

$('#container').prepend('<p id="loader">Loading...</p>');
$('#container > div:eq(2) > img').load(function() {
	$('#loader').remove();
});

The CSS

Then add some styling. Here we’re adding an animated loading gif:

#container {
	border:2px solid #666;
}
#loader {
	background: #e9e9e9 url(ajax-loader.gif) no-repeat 50% 50%;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

And that’s it! Note that this is just a basic example and it only tests for one of the two images being loaded, however it’s basic to extend this concept further and even provide more feedback to the user.

On the left is the normal Google links color and on the right is the version being tested. As you can see, the purple and green link colors are slightly different and more bright. Personally I didn’t like looking at an entire page of links this color but who knows what Google will decide to do.