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

Download jquery.beforeafter.zip.

What’s So Great About this Plugin?

• Slick effect, no Flash needed
• It’s just 7K
• 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>

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

Demos

• Example 1
• Example 2

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.

jQuery Infinite Carousel Plugin

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.

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>

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

Demos

• Example 1
• Example 2
• Example 3 (uses padding to hint at the previous and next images)

Note that the plugin uses three images which are kept in the same folder as the plugin (/js/ by default). If you store the plugin in another folder on your server, update the path to these images.

jQuery Panel Gallery Plugin

The other day I went looking for a simple way using jQuery to fade between a set
of images on a page. I found a few good plugins, some with many options, but none that
did exactly what I was looking for. InnerFade came close, as did jQuery Cycle, but neither had the effect that I wanted, nor the simplicity and reusability that I needed. So, being a coder, I set out to create my own plugin. I was mainly looking for a simple way to take a group of images and transition from one to the other in a smooth, visually appealing way. I’ve seen countless galleries where one image fades into another and I like that effect, but wanted to come up with something new, so I began writing my first jQuery plugin. I didn’t set out to make a “gallery” per se, however when I was done, I realized that that was really what I had ended up with. Let me take a moment to say that I’m fairly new to jQuery and even newer to writing jQuery plugins — in fact this my first one, however I’ve tested this as much as I can, and made it as small as I can (without compressing it), and it works with everything I’ve thrown at it. So to make a long story short, here’s what I ended up with:

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. 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. All in a plugin that’s less than 5k uncompressed. Not bad.

Download

Download jquery.panelgallery.js

What’s So Great About this Plugin?

• No slicing or editing of the images is needed
• It’s just 5K
• 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.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').panelGallery();
});
</script>

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

Demos

• Example 1
• Example 2
• Example 3 (uses two panelGalleries on the same page with different configurations)