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

This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image. Have a look at the demo below for a better understanding.

Demo

Xhtml

<div id="container">
	<h1>jQuery image slide on hover effect</h1>
	<div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
	<div><a href="#"><img src="image-2.png" alt="" /></a></div>
	<div><a href="#"><img src="image-3.jpg" alt="" /></a></div>
</div>

The markup itself is quite basic. We have three divs that contain image links. Notice that each image contains both its default and hover states. This is done to create our animation.

CSS

/* simple reset */
html,body,div,h2,img {margin:0;padding:0;border:none;}

html {
	font:1em Arial, Helvetica, sans-serif;
	color:#444;
}
h1 {	text-align:center;}
#container {
	margin:100px auto;
	width:909px;
}
#container div {
	margin-right:3px;
	float:left;
	width:296px;
	height:130px;
	border:1px solid #999;
	position:relative;
	overflow:hidden;
}
#container img {
	position:absolute;
}

Since we only want to show the image’s default state first, we set the height and width of the containing div, and set overflow to “hidden”. We will be absolutely positioning the image, so we also need to set the divs position to “relative” and the images to “absolute”>.

jQuery

$(function(){
	$("#container div a").hover(function(){
		$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
	}, function() {
		$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
	});
});

To get things rolling, we first run a hover function on our link tag. Before running our animation, we use the stop() method to cancel the animation queue if one exists. The animate effect uses the CSS Top property to reveal the image’s hidden hover state, sliding it upwards over a period of 200 milliseconds. We also set the queue to “false” so that the animation will start automatically without having to wait for its turn.

And there you have it… an easy way to create a hover animation using jQuery.

Fullsize is an attempt to add a new IMG attribute called “fullsize” in the next version of HTML. The idea is simple; create a standardized solution by which browsers handle the image popups rather than javascript/AJAX. Whenever the fullsize attribute is found within the img tag, browsers would tackle the heavy lifting, generating a popup of the full size image.

Although I’m still on the fence about this, there are a few aspects that I find interesting. For one, image popups would continue functioning even for users where javascript is disabled. Because this is handled by the browser, less code would need to be written by the developer.

Sounds great, but what if I want to control this myself using jQuery, Mootools or another javascript framework? No problem! The hundreds of lightbox plugins already out there in cyberspace will continue working as intended. Browsers will only step in when the img tag is accompanied by the fullsize attribute.

Who knows if this idea will ever come to fruition. In the meantime however, a jQuery plugin has been created for all to enjoy!

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

I recently had a project where I needed a way to show/hide content within a div similar to the SlideToggle() effect. The only difference was that I wanted to show part of the content within the div when the page loaded. Inspired by Chris Pollock , here’s what I came up with.

Also not that because the content within the div was delivered dynamically, I didn’t know how much text there would be. For example, if there was only a single line of text, yet the minimum height was set to a value more than the text, the effect would fail miserably. In order to avoid this, I checked to ensure the default height was greater than the minimum height. If it came up short, there would be no slide effect and only the text would be displayed.

Demo

Xhtml

<div id="container">
	<h1>jQuery slide with minimum height
	<h2>About Billabong</h2>
	<div id="wrap">
		<div>
			<p>Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.</p>
			<p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
			<p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
			<p>Information courtesy of <a title="Billabong" href="http://www.billabong.com/us/">Billabong</a>.</p>
		</div>
		<div id="gradient"></div>
	</div>
	<div id="read-more"></div>
</div>

jQuery

$(function(){
	var slideHeight = 75; // px
	var defHeight = $('#wrap').height();
	if(defHeight >= slideHeight){
		$('#wrap').css('height' , slideHeight + 'px');
		$('#read-more').append('<a href="#">Click to Read More</a>');
		$('#read-more a').click(function(){
			var curHeight = $('#wrap').height();
			if(curHeight == slideHeight){
				$('#wrap').animate({
				  height: defHeight
				}, "normal");
				$('#read-more a').html('Close');
				$('#gradient').fadeOut();
			}else{
				$('#wrap').animate({
				  height: slideHeight
				}, "normal");
				$('#read-more a').html('Click to Read More');
				$('#gradient').fadeIn();
			}
			return false;
		});
	}
});

CSS

/* simple reset */
html,body,div,h2,p {margin:0;padding:0;}

html {
font:1em Arial, Helvetica, sans-serif;
color:#444;
}
a {color:#0087f1;}
p {margin-bottom:5px;}
#container {
margin:0 auto;
width:600px;
}
#container h2 {
font-size:20px;
color:#0087f1;
}
#wrap {
position: relative;
padding: 10px;
overflow: hidden;
}
#gradient {
width:100%;
height:35px;
background:url(images/bg-gradient.png) repeat-x;
position:absolute;
bottom:0;
left:0;
}
#read-more {
padding:5px;
border-top:4px double #ddd;
background:#fff;
color:#333;
}
#read-more a {
padding-right:22px;
background:url(images/icon-arrow.gif) no-repeat 100% 50%;
font-weight:bold;
text-decoration:none;
}
#read-more a:hover {color:#000;}