A while back I wrote about using jQuery to create an image sliding effect. It’s received quite a lot of traffic since then, so I decided to create a simple plugin.

Please see jQuery image slide on hover effect for an in depth explanation of how it works.

The function can be called with the following code:

JavaScript

$(function(){
	$('#demo1').imgslide();
});

Several options may also be passed into the plugin.

JavaScript

	$('#demo1').imgslide({
		top: '0px',
		right: '0px',
		bottom: '0px',
		left: '0px',
		duration: 200
	});

HTML

And, the HTML used. Be sure to see the demo below for additional examples.

<img id="demo1" src="http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-plugin/image-1.jpg" alt="" />

Let me know if you find any bugs or better ways to approach this.

Demo

Download

With the ever-growing popularity of jQuery and the ubiquitous use of lightboxes throughout the internet, I figured why not compile a list? Well, here it is!

Updated – 4/5/2009 – Fullsize

Updated – 3/30/2009 – jqModal

Fullsize

This concept spawns from the idea of creating a standardized solution for browsers to handle image popups rather than javascript frameworks. Although there is no support for this at the moment, they have created a jQuery plugin that supports this concept.

URL: http://www.addfullsize.com/

Features:

• Support: images
• File size: 8kb (Packed)
• Browsers Supported: Firefox, IE 6+7+8, Safari, Opera, Chrome

jqModal

A simple modal framework that’s lightweight, powerful and flexible. More examples of jqModal in action can be viewed here.

URL: http://dev.iceburg.net/jquery/jqModal/

Features:

• Support: images, ajax, inline and framed content
• File size: 3kb

ColorBox

URL: http://colorpowered.com/colorbox/

Features:

• Support: images, ajax, inline and framed content
• File size: 10kb
• Generates valid W3C valid XHTML and CSS

facebox

URL: http://famspam.com/facebox

Features:

• Support: images, ajax, divs
• File size: 2kb (gzipped & minified)
• Generates valid W3C valid XHTML and CSS

lightBox

URL: http://leandrovieira.com/projects/jquery/lightbox/

A jQuery version of the popular Lightbox2 based on prototype and scriptaculous.

Features:

• Support: images
• File size: 7kb (packed) / 10kb (minified)
• Available WordPress plugin

Lightbox (Balupton Edition)

URL: http://www.balupton.com/sandbox/jquery_lightbox/

A jQuery version of the popular Lightbox2 based on prototype and scriptaculous.

Features:

• Support: images
• File size: 21kb
• Browsers Supported: Firefox 2+3, IE6+7, Safari 3, Opera 9.5

Lightbox (Mesozen)

URL: http://warren.mesozen.com/jquery-lightbox/

A jQuery version of the popular Lightbox2 based on prototype and scriptaculous.

Features:

• Support: images
• File size: 15kb

ThickBox

URL: http://jquery.com/demo/thickbox/

Features:

• Support: images, ajax, inline and iframed content
• File size: 10kb (compressed)
• Browsers Supported: IE6, IE7+, Firefox 2+, Opera 9+, Safari 2+

prettyPhoto

URL: http://www.no-margin-for-errors.com/projects/prettyPhoto/

Features:

• Support: images, Flash
• File size: 2kb (gzipped)
• Browsers Supported: IE6, IE7+, Firefox 2+, Opera 9+, Safari 3

piroBox

URL: http://www.pirolab.it/pirobox/

Features:

• Support: images
• File size: 13kb (packed)
• Browsers Supported: IE6, IE7+, Firefox 2+, Opera 9+, Safari, Chrome

Fancy Zoom

URL: http://orderedlist.com/demos/fancy-zoom-jquery/

Based loosely off Cabel’s FancyZoom.

Features:

• Support: images, html, flash
• File size: 5kb (minified)

FancyBox

URL: http://fancy.klade.lv/home

Features:

• Support: images, ajax, html, inline and iframed content
• File size: 8kb (packed)
• Browsers Supported: IE6, IE7, Firefox 3, Opera 9, Safari 3

NyroModal

URL: http://nyromodal.nyrodev.com/

Very robust modal that can handle just about any content thrown at it.

Features:

• Support: images, ajax, inline and iframed content
• File size: 17kb (packed)
• Generates valid W3C valid XHTML (Transitional)

Imagebox

URL: http://www.intelliance.fr/jquery/imagebox/

Wasn’t able to get this working in Chrome (1.0.154.48)

Features:

• Support: images
• File size: 18kb

GreyBox

URL: http://orangoo.com/labs/GreyBox/

Features:

• Support: images, Flash, ajax, html, inline and iframed content
• File size: 22kb
• Browsers Supported: IE5.5+, Firefox 1.5+, Opera 8.5+, Safari

Hotbox

URL: http://www.s3maphor3.org/demo/hotbox/

Hotbox isn’t your typical lightbox. Its purpose is to provide a quick information panel that is activated upon pressing the spacebar.

Features:

• Activated by pressing the spacebar
• Browsers Supported: IE7, Firefox 3, Opera 9.63, Safari 3

Shadowbox

URL: http://www.mjijackson.com/shadowbox/

Not only can Shadowbox function without the use of JavaScript frameworks, it can also accommodate just about all of them. Through the use of adapters, Shadowbox works seamlessly with other frameworks such as Yahoo! User Interface Library, Ext, Prototype, jQuery, MooTools, and Dojo Toolkit.

Features:

• Support: images, html, swf, flv, qt, wmp, ajax, inline and iframed content
• File size: 22kb (core file only)
• Browsers Supported: IE6+, Firefox 1.5+, Opera 9+, Safari 2+
• Commercial use may require license – $20

Visual Lightbox

URL: http://lightbox2.com/

Visual Lightbox is an all-in-one application that allows you to generate photo galleries from your desktop without writing a single line of code. It’s free for non-commercial use, otherwise you’ll have to fork over $25 for the Business Edition.

Features:

• Commercial use requires license – $25