Category Archives: JavaScript/jQuery

jQuery Infinite Carousel Plugin 1.2 Released

Update: The latest version of this plugin can be found here.

Around the beginning of this month I released version 1.0.1 of the Infinite Carousel jQuery plugin. About a week later I received an email asking if I could add the ability for a visitor to jump to a specific image in the carousel. I’d seen this functionality in other carousels (none that run in infinite loops) where small images or some other user interface was displayed that allowed someone to pick an image and go directly to it. At first I thought sure, how hard could it be to enable this? If the current carousel could flow infinitely picture by picture, how difficult could it be to fast forward to a specific image in the sequence? Little did i realize what I was in for.

Creating a user interface to allow jumping around the sequence of images was the easy part. Version 1.2 of the infinite Carousel creates thumbnail gallery with several options which allows you to click on a small box and jump to an image. The hard part turned out to be how to handle the actual jumping. I initially thought that I could fast forward the existing process, basically figuring out how far the carousel needed to be moved, and then just repeatedly moving one frame at a time. This didn’t even come close to making it into the final code as the effect was not even close to passable. It even felt like cheating. So I went back to the drawing board and started from scratch.

What I ended up with is a very fluid, very clean image carousel that allows you to jump to any image in the series, while maintaining all the functionality of the original Infinite Carousel. To make a long story, and many hours of coding short, the latest version of the Infinite Carousel manipulates the DOM based on how far away the desired image is. In a nutshell, list items and the images contained within (and optionally captions) are cloned, moved around, and deleted while the overall list is animated. Sounds easy. It’s not.

The final product is this:

While much of the original Infinite Carousel plugin code was used in the latest version, the guts of moving images around was retooled. In addition, new options have been introduced to allow control over the thumbnails that can now be displayed below the carousel.

I will keep version 1.0.1 of the infinite carousel available at its original location in case anyone would like to continue to use it, while making version 1.2 available below.

Update (8/31/2009):  I just changed the license for this plugin to the share alike license (http://creativecommons.org/licenses/by-sa/3.0/us/), updated the image paths, and fixed a problem with IE7 and errant commas. No other changes were made however the version number is now 1.2.2.

Download

Download jquery.infinitecarousel-1_2.zip. (version 1.2.2 – 8/31/2009)

What’s So Great About this Plugin?

  • Unlike most carousel plugins which stop when they get to the last image,
    this one allows the show to go on infinitely without any user intervention.
    If you have three images you want to display, after the third image has been
    displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as if the carousel is a true carousel and never ends.
  • Captions are optional.
  • Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence.
  • Thumbnails can be styled via CSS.
  • It’s less than 14K (a minified/compressed version will be available shortly).
  • Reusable on multiple containers within the same page.
  • You can use CSS to add padding to the carousel area so that the previous and next images are hinted at (see demos below).

How to Use

First, all of the images that you want to display should be the same size and wrapped in a containing element (I recommend a div) which must have an ID.  Note that by using CSS, you can style the container (carousel) div to have left and/or right padding so that you can display a small amount of the previous and/or next images. The carousel must be a list where each list item is the image and optionally a paragraph containing the caption. See this example.

<div id="carousel">
<ul>
	<li><img alt="" src="p1.jpg" width="500" height="213" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p></li>
	<li><img alt="" src="p2.jpg" width="500" height="213" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
	<li><img alt="" src="p3.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p4.jpg" width="500" height="213" /><p>It's not easy being green.</p></li>
	<li><img alt="" src="p5.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p6.jpg" width="500" height="213" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li>

</ul>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers. Also, all images should be the same size.  If you want to have a caption with an image, it *MUST* exist in a paragraph after the image.

To use the plugin you’ll need to have a copy of  jQuery, or point to jquery on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
	$('#carousel').infiniteCarousel();
});
</script>

Finally, make sure that your CSS contains a rule for the width of the list within your container so that it’s set to a minimum of the combined widths of all your images. For example. #carousel ul {width:3000px}. In version 1.2 of the Infinite Carousel this isn’t necessary, however for anyone with JavaScript disabled, declaring the width in your style sheet can give them a simulated (albeit limited) carousel experience. At a minimum, the following CSS should be included in any page where the carousel exists (remember to change the width):

#carousel ul {
	list-style: none;
	width:1600px;
	margin: 0;
	padding: 0;
	position:relative;
}
#carousel li {
	display:inline;
	float:left;
}

Be sure to check out the demos below.

That’s it! You can apply the infinite carousel to any number of elements on a page.

Options

The following options are configurable:

  • transitionSpeed – the time (in milliseconds) it will take to transition between two images (default 1500)
  • displayTime – the time (in milliseconds) to display each image (default: 6000)
  • textholderHeight – the height of the caption. This is a fraction of the height of the images. (default: .2)
  • displayProgressBar – Boolean. Whether or not to display the progress bar (default: 1)
  • displayThumbnails – Boolean. Whether or not to display the thumbnails for the carousel. (default:  1)
  • displayThumbnailNumbers – Boolean. Whether or not to automatically place numbers in the thumbnail boxes. (default: 1)
  • displayThumbnailBackground – Boolean. Whether or not to use the corresponding image as the background for a thumbnail box. (default: 1)
  • thumbnailWidth – the width of each thumbnail box. (default: ’20px’)
  • thumbnailHeight – the height of each thumbnail box. (default: ’20px’)\
  • thumbnailFontSize – the font size of the number within the thumbnail box. (default: .7em)

Options are added when calling the script:

$('#carousel').infiniteCarousel({
	transitionSpeed : 2000,
	displayTime : 10000,
	textholderHeight : .25,
	displayProgressBar : 0
});

Note that the CSS of the thumbnail div created by the plugin can be controlled by using a rule like #carousel + div {your CSS here}. The plus between the carousel id and the div specifically targets the thumbnail container.

Enjoy!

Demos

  • Example 1
  • Example 2 (uses padding to hint at the previous and next images and larger thumbnails with no background images. The thumbnail container is also centered with CSS)

Note that the plugin uses several images which are kept in an images folder in the zip file (/js/infiniteCarousel/images/ by default). If you store the plugin in another folder on your server, update the path to these images.

Graceful Degradation

While almost everyone has JavaScript enabled in their browser you can use CSS to allow the plugin to degrade gracefully for those that don’t.

  • Setting the width, height, and overlflow on the container creates a view port to give those w/o JavaScript an approximation of what they’d see with JavaScript.
  • Setting a width of 9999px (or some large number equal to or greater than the combined width of all images) on the container, combined with setting the list to display inline and float left allows the list to display horizontally (leaving the width out would make the list scroll vertically)
  • Setting a height on the container equal to the height of the images plus some extra allows the captions to display

jQuery Panel Gallery 1.1 Plugin Released

jQuery Panel Gallery Plugin 1.1

Update: the latest version of this plugin can be found via our plugins page.

Building upon the first release of the Panel Gallery plugin I’m happy to announce the release of version 1.1. This version streamlines the code of the first release and adds the ability to specify the direction of the transformation for each image individually.

Again, so what’s the big deal? Well first off, and the best part in my opinion, is that not one image needs to be sliced or edited to work with this plugin, in fact the plugin handles everything itself. Next, you can choose the direction in which the transition occurs from left to right, right to left, top to bottom, or bottom to top – now for each image individually. You can set the initial delay before the transitions begin, set the transitions to loop or stop after the last image, set the time it takes for each panel to appear, and set the delay between the images. Phew.

Download

Download jquery.panelgallery-1_1.js

What’s So Great About this Plugin?

  • No slicing or editing of the images is needed
  • It’s just 7K
  • Each image can have its own fade direction
  • Easily configurable
  • Reusable on multiple containers

How to Use

First, all of your images should be the same size and wrapped in a containing element
(I recommend a div) which must have an ID. Any images will work, however transparent images aren’t recommended. Finally, your container element should be positioned (e.g. relative, absolute, etc.). The container needs to be positioned otherwise the images within it won’t end up in the right spot on your page.

<div id="container" style="position:relative">
	<img src="image1.jpg" alt="image 1" width="500" height="250" />
	<img src="image2.jpg" alt="image 2" width="500" height="250" />
	<img src="image3.jpg" alt="image 3" width="500" height="250" />
	.
	.
	.
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t
work in Safari, Chrome, and any other webkit-based browsers. Also, all images should
be the same size. You can mix various image formats like Gif, Jpg, and Png, however
transparent images aren’t recommended.

To use the plugin you’ll need to have a copy of jQuery, or point to jquery on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.panelgallery-1_1.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').panelGallery();
});
</script>

Finally, while you don’t have to specify any directions for the fade (the default direction is left to right), you can give each image it’s own direction. To do this, add the name attribute to the image and specify either (lr, rl, tb, or bt). For example:

<img src="image2.jpg" alt="image 2" name="bt" width="500" height="250" />

That’s it! You can apply the panel gallery to any number of elements on a page.

Options

The following options are configurable:

  • sections – the number of panels to divine each image into (default: 3)
  • imageTransitionDelay – the time (in milliseconds) to pause between a
    completed image and the next image (default: 3000)
  • startDelay – the time (in milliseconds) to pause before beginning the first transition (default: 2000)
  • sectionTransitionDelay – the time (in milliseconds) to pause between each section of an image (default: 700)
  • repeat – whether to endlessly repeat the series of images (default: true)
  • direction – the default direction of the transitions: “lr” (left to right), “rl” (right to left), “tb” (top to bottom), and “bt” (bottom to top) (default: “lr”)

Options are added when calling the script:

$('#container').panelGallery({
	sections:5,
	imageTransitionDelay :3000,
	startDelay:5000,
	sectionTransitionDelay : 700,
	repeat:false,
	direction:"tb"
});

Enjoy!

Demos

jQuery Infinite Carousel Plugin 1.0.1 Released

I’m happy to announce that jQuery Infinite Carousel 1.0.1 has been released. This new version, which can be downloaded from the jQuery Infinite Carousel page, fixes a few bugs, adds a new feature, and comes in a reorganized zip file with a demo.

Changes:

  • Bug fixed for caption box height for large values
  • Default format for captions is now HTML instead of text
  • Images now in their own folder
  • Demo added
  • Documentation updated

jQuery Before/After Plugin

About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference  in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here’s the result:

Pretty slick no? The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

Download

Go to the Before/After download page

What’s So Great About this Plugin?

  • Slick effect, no Flash needed
  • It’s just 7K (4K compressed)
  • Reusable on multiple containers
  • Degradable. If the visitor doesn’t have JavaScript they will still see both images.

How to Use

First, your before and after images must be the same size.  Each image must be inside its own div, and both of those within a containing div which must have an ID.  See this example.

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers.

To use the plugin you’ll need to have a copy of  jQuery and the jQuery UI, or point to jquery on Google and jqueryui on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').beforeAfter();
});
</script>

That’s it! You can apply the before/after plugin to any number of elements on a page.

Options

The following options are configurable:

  • animateIntro  – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default  false)
  • introDelay – if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default  1000)
  • introDuration – if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
  • showFullLinks – whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image (default true)
  • imagePath – the path (absolute or relative) to where you store the navigation images (default ‘/js/beforeAfter/’)

Options are added when calling the script:

$('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Enjoy!

Demos

Note that the plugin uses several images which are kept in the same folder as the plugin. If you store the plugin in another folder on your server, update the path to these images. Please be sure to read the license before using.

jQuery Infinite Carousel Plugin

jQuery Infinite Carousel Plugin

Update: The latest version of this plugin can be found here.

The other day, yet again, I went looking for a jQuery plugin that moved a set of images inside a display area. I’m not sure if this is a carousel, a gallery, a slideshow, or what. They all seem to share many common characteristics, but regardless I wasn’t able to find what I wanted, although I did find several different plugins that did part of what I wanted to do, which was to generate a simple unordered list of images and optionally have a caption for each one. If a visitor doesn’t have JavaScript enabled (yes both of them) they should still be able to see the images, but for the 99.9% of the web population that does have JavaScript enabled, they should get a simple, slick carousel of images.

So I set out to create my own plugin and here’s what I ended up with:

You can  move between images using the left and right arrows which when clicked, pauses the carousel. To restart the autopilot feature, just click the play button in the upper right hand corner. You can also obviously pause the show at any time by clicking the pause button in the same spot. Captions are optional. When the carousel is paused, you can minimize or close the caption window. The amount of time each image is displayed, as well as the length of time the transition between images takes are configurable. There’s a also an unobtrusive bar at the bottom of each image (which you can turn off) that shows how much time is left before an image changes.

Download

Download jquery.infinitecarousel.zip. (version 1.0.1 – 7/31/2009)

What’s So Great About this Plugin?

  • Unlike most carousel plugins which stop when the get to the last image,
    this one allows the show to go on infinitely without any user intervention.
    If you have three images you want to display, after the third image has been
    displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as if the carousel is a true carousel and never ends.
  • Captions are optional
  • It’s just 9K
  • Reusable on multiple containers
  • You can use CSS to add padding to the carousel area so that the previous and next images are hinted at (see demos below).

How to Use

First, all of the images that you want to display should be the same size and wrapped in a containing element (I recommend a div) which must have an ID.  Note that by using CSS, you can style the container (carousel) div to have left and right padding so that you can display a small amount of the previous and next images. The carousel must be a list where each list item is the image and optionally a paragraph containing the caption. See this example.

<div id="carousel">
<ul>
	<li><img alt="" src="p1.jpg" width="500" height="213" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p></li>
	<li><img alt="" src="p2.jpg" width="500" height="213" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
	<li><img alt="" src="p3.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p4.jpg" width="500" height="213" /><p>It's not easy being green.</p></li>
	<li><img alt="" src="p5.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p6.jpg" width="500" height="213" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li>

</ul>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers. Also, all images should be the same size.  If you want to have a caption with an image, it *MUST* exist in a paragraph after the image.

To use the plugin you’ll need to have a copy of  jQuery, or point to jquery on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
	$('#carousel').infiniteCarousel();
});
</script>

Finally, make sure that your CSS contains a rule for the width of the list within your container so that it’s set to a minimum of the combined widths of all your images. For example. #carousel ul {width:3000px}. At a minimum, the following CSS should be included in any page where the carousel exists (remember to change the width):

#carousel ul {
	list-style: none;
	width:1600px;
	margin: 0;
	padding: 0;
	position:relative;
}
#carousel li {
	display:inline;
	float:left;
}

Check out the demos including the CSS for examples.

That’s it! You can apply the infinite carousel to any number of elements on a page.

Options

The following options are configurable:

  • transitionSpeed – the time (in milliseconds) it will take to transition between two images (default 1500)
  • displayTime – the time (in milliseconds) to display each image (default: 6000)
  • textholderHeight – the height of the caption. This is a fraction of the height of the images. (default: .2)
  • displayProgressBar – Boolean. Whether or not to display the progress bar (default: 1)

Options are added when calling the script:

$('#carousel').panelGallery({
	transitionSpeed : 2000,
	displayTime : 10000,
	textholderHeight : .25,
	displayProgressBar : 0
});

Enjoy!

Demos

Note that the plugin uses several images which are kept in an images folder in the zip file (/js/infiniteCarousel/images/ by default). If you store the plugin in another folder on your server, update the path to these images.