Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.

With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them.

The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License.

Please note that this will only work with browsers that support the :target pseudo class.

Let’s do it!

The Markup

We want to show a set of thumbnails, each one having a title that will appear on hover. When clicking on a thumbnail, we want to show a large version of the image in an overlay container that will make the background a bit more opaque. So, let’s use an unordered list where each list item will contain a thumbnail and a division for the overlay with the respective large version of the image:

<ul class="lb-album">
	<li>
		<a href="#image-1">
			<img src="images/thumbs/1.jpg" alt="image01">
			<span>Pointe</span>
		</a>
		<div class="lb-overlay" id="image-1">
			<img src="images/full/1.jpg" alt="image01" />
			<div>
				<h3>pointe <span>/point/</h3>
				<p>Dance performed on the tips of the toes</p>
				<a href="#image-10" class="lb-prev">Prev</a>
				<a href="#image-2" class="lb-next">Next</a>
			</div>
			<a href="#page" class="lb-close">x Close</a>
		</div>
	</li>
	<li>
		<!-- ... -->
	</li>
</ul>

The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. In order to navigate through the images, we will add two link elements that point to the previous and next (large) image.
In order to “close” the lightbox, we will somply click on the link with the class lb-close which points to the element with the ID page which is our body.

Note that we only use a navigation in the last demo.

Let’s beautify this naked markup.

The CSS

I’ll omit the vendor prefixes for some of the new properties here in order not to bloat the tutorial. You can, of course, find them in the download files.

Let’s give some basic layout to our unordered list and the thumbnails:

.lb-album{
	width: 900px;
	margin: 0 auto;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
	float: left;
	margin: 5px;
	position: relative;
}
.lb-album li > a,
.lb-album li > a img{
	display: block;
}
.lb-album li > a{
	width: 150px;
	height: 150px;
	position: relative;
	padding: 10px;
	background: #f1d2c2;
	box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
	border-radius: 4px;
}

The title for each thumbnail will be invisible and we’ll add a transitions for the opacity which will change to 1 once we hover over the thumbnail anchor. We’ll use a smooth radial gradient as background:

.lb-album li > a span{
	position: absolute;
	width: 150px;
	height: 150px;
	top: 10px;
	left: 10px;
	text-align: center;
	line-height: 150px;
	color: rgba(27,54,81,0.8);
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
	font-size: 24px;
	opacity: 0;
	background:
		radial-gradient(
			center,
			ellipse cover,
			rgba(255,255,255,0.56) 0%,
			rgba(241,210,194,1) 100%
		);
	transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
	opacity: 1;
}

The overlay will have the same radial gradient and we’ll set its position to fixed, with zero height and width:

.lb-overlay{
	width: 0px;
	height: 0px;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	padding: 0px;
	z-index: 99;
	text-align: center;
	background:
		radial-gradient(
			center,
			ellipse cover,
			rgba(255,255,255,0.56) 0%,
			rgba(241,210,194,1) 100%
		);
}

Once we click on a thumbnail, we’ll cover the whole screen with the overlay, but first, let’s take a look at the children.

Let’s style the division for the main title and the description:

.lb-overlay > div{
	position: relative;
	color: rgba(27,54,81,0.8);
	width: 550px;
	height: 80px;
	margin: 40px auto 0px auto;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
	padding: 0px 20px;
	width: 200px;
	height: 60px;
}
.lb-overlay div h3{
	font-size: 36px;
	float: left;
	text-align: right;
	border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
	font-size: 16px;
	font-family: Constantia, Palatino, serif;
	font-style: italic;
}
.lb-overlay div h3 span{
	display: block;
	line-height: 6px;
}
.lb-overlay div p{
	font-size: 14px;
	text-align: left;
	float: left;
	width: 260px;
}

We’ll position the link element for closing the lightbox absolutely above the image:

.lb-overlay a.lb-close{
	background: rgba(27,54,81,0.8);
	z-index: 1001;
	color: #fff;
	position: absolute;
	top: 43px;
	left: 50%;
	font-size: 15px;
	line-height: 26px;
	text-align: center;
	width: 50px;
	height: 23px;
	overflow: hidden;
	margin-left: -25px;
	opacity: 0;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

The image will have a maximum height of 100%. That’s one way of making the image somewhat reponsive and nicely fittin into the viewport (i.e our overlay). We’ll also add a transition for the opacity level. Once we “open” a large image, the opacity will get animated. We’ll see later how we can use an animation for the image.

.lb-overlay img{
	max-height: 100%;
	position: relative;
	opacity: 0;
	box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
	transition: opacity 0.5s linear;
}

Let’s style the navigation elements:

.lb-prev, .lb-next{
	text-indent: -9000px;
	position: absolute;
	top: -32px;
	width: 24px;
	height: 25px;
	left: 50%;
	opacity: 0.8;
}
.lb-prev:hover, .lb-next:hover{
	opacity: 1;
}
.lb-prev{
	margin-left: -30px;
	background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
	margin-left: 6px;
	background: transparent url(../images/arrows.png) no-repeat top right;
}

When we click on a thumbnail anchor, it will point to the respective large version of the image which is in the division with the class lb-overlay. So, in order to address this element we can use the pseudo class :target. We’ll add a padding to the overlay and “stretch it” over the whole viewport by setting the width and height to auto (it’s actually not needed explicitely) and set the right and bottom to 0px. Remember, we’ve already set the top and left before.

.lb-overlay:target {
	width: auto;
	height: auto;
	bottom: 0px;
	right: 0px;
	padding: 80px 100px 120px 100px;
}

Now we will also set the opacity of the image and the closing link to 1. The image will fade in, because we’ve set a transition:

.lb-overlay:target img,
.lb-overlay:target a.lb-close{
	opacity: 1;
}

And that’s all the style!
Let’s take a look at the two alternatives that we are using in demo 1 and demo 2.

In the first demo we make the image appear by using an animation that scales it up and increases it’s opacity value:

.lb-overlay:target img {
	animation: fadeInScale 1.2s ease-in-out;
}
@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

In the second demo we’ll create the opposite effect, i.e. scale the image down:

.lb-overlay:target img {
	animation: scaleDown 1.2s ease-in-out;
}
@-webkit-keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}

Demos

• Demo 1: Scale-up / fade-in animation
• Demo 2: Scale-down / fade-in animation
• Demo 3: Fade-in & navigation

You will see that each browser performs quite differently when it comes to the transitions/animations. Adjusting duration, timing functions and delays, one can make the effects smoother, i.e. you can change the timing for Firefox only by changing the -moz- properties.

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.

We will be using Stack Blur, which is a fast, almost Gaussian blur for Canvas by Mario Klingemann from Quasimondo.

The images used in the demo are by Geoff Peters. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

How it works

The main idea is to add some images in our structure that will serve as background images. We will add the canvas element which will contain a blurred version of the image. When we navigate, we’ll add the blurred canvas behind the current image and fade the current image out. With the blurred canvas image now visible, we can either show the new image immediately (unblurred) or show it blurred and then “sharpen” it.

You can set that by changing the variation between 1 and 2:

animOptions			= { speed : 700, variation : 1, blurFactor : 10 }

The speed is the animation speed between each transition (from normal to blurred) and the blurFactor is basically the radius for the blur effect used in Stack Blur.

Demos

• Demo 1: Here we use variation 2, showing the coming image without blurring it first.
• Demo 2: In this demo we use variation 1 for blurring both, the current image and the coming one.

We hope you liked our little experiment and find it inspiring and useful!

View demo Download source

View demo Download source

Today we want to share one of our CSS 3D Transforms experiments with you. The idea is to show an image’s fullscreen version by rotating two blocks in three-dimensional space. The faces of the blocks being rotated to the front will show the fullscreen image.

Please note that you can only see the cool 3d effect in a browser that supports those CSS3 properties (currently Chrome and Safari).

You can check out the video of the effect here: http://www.screenr.com/Onls

We’ll be using Modernizr in order to know if the browser supports the used CSS3 properties. For the ones that don’t we’ll use a simple fallback.

The images used in the demo are by Jeeheon. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

How it works

In our little experiment, we’ll add out images to a wrapper with the class fd-wrapper:
HTML

<div id="fd-wrapper" class="fd-wrapper">
	<img src="images/medium/1.jpg" data-bgimg="images/large/1.jpg" alt="image01" title="Love Will Tear Us Apart" />
	<img src="images/medium/2.jpg" data-bgimg="images/large/2.jpg" alt="image02" title="Just Can't Get Enough" />
	<img src="images/medium/3.jpg" data-bgimg="images/large/3.jpg" alt="image03" title="In a Manner of Speaking" />
	<img src="images/medium/4.jpg" data-bgimg="images/large/4.jpg" alt="image04" title="Guns of Brixton" />
	<img src="images/medium/5.jpg" data-bgimg="images/large/5.jpg" alt="image05" title="This Is Not a Love Song" />
	<img src="images/medium/6.jpg" data-bgimg="images/large/6.jpg" alt="image06" title="Making Plans for Nigel" />
</div>

The information about the fullscreen image’s path will be in the data-bgimg attribute.
We’ll use the images in an HTML structure that we define in a jQuery template. That structure will consist of two boxes, an upper and a lower one, each having six faces of which the frontal ones are shown initially.

When we click on the icon to show the fullscreen image, the upper rectangle will rotate up, revealing its bottom face, while the lower box will rotate down, showing us its top face. The bottom face of the upper rectangle will have the upper part of the fullscreen image as a background image and the top face of the lower rectangle will have the lower part of it:

Options

There are the following default options:

current		: 0,
// index of current image

width		: 600,
// image's width

height		: 400,
// image's height

perspective	: 550,
// the webkit-perspective value

speed		: 750,
// rotation transition speed

easing		: 'ease-in-out',
// rotation transition easing 	

onLoad		: function() { return false; }
// fired when the slideshow is initialized

Don’t forget to check out the video of the effect here if your browser doesn’t support the CSS3 properties: http://www.screenr.com/Onls

We hope you like our little experiment and find it inspiring!

View demo Download source

The idea of this navigation is based on the Beautiful Background Image Navigation with jQuery, a tutorial that had a similar effect. Since it was very popular and a lot of our readers asked for some very useful additions, we decided to revamp it and make it easier to customize.

The beautiful gastronomy photography is by Manoel Petry:
Manoel Petry’s Flickr Photostream
Manoel Petry’s Website
The images are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Generic License.

Examples

Take a look at all the examples (you can also navigate from them to all the other demos):

• Show/hide
• Fade
• Sequential fade
• Side slide
• Side slide (bounce)
• Sequential slide
• Up/down
• Sequential up/down
• Alternating up/down
• Alternating up/down (2)
• Sequential alternating up/down

The HTML structure consists of the “sbi_container” which will have all the panels inside:

<div id="sbi_container" class="sbi_container">
	<div class="sbi_panel" data-bg="images/1.jpg">
		<a href="#" class="sbi_label">About</a>
		<div class="sbi_content">
			<ul>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
			</ul>
		</div>
	</div>
	<div class="sbi_panel" data-bg="images/2.jpg">
		...
	</div>
	...
</div>

The “data-bg” attribute contains the path to the background image that will appear when hovering over the label of the respective panel.

Let’s take a look at an example for using the alternating vertical up/down sliding effect:

$('#sbi_container').bgImageMenu({
	defaultBg	: 'images/default.jpg',
	menuSpeed	: 300,
	border		: 1,
	type		: {
		mode		: 'verticalSlideAlt',
		speed		: 450,
		easing		: 'easeOutBack'
	}
});

The following parameters can be used/set:
defaultBg: the default image shown when no label is hovered
pos: if no defaultBg set, pos will indicate the panel that should be shown/open
width: the width of the container and the images (they should all be of the same size)
height: the height of the container and the images
border: the width of the margin between the panels
menuSpeed: the speed with which the menu should slide up

mode: the type of animation; you can use def | fade | seqFade | horizontalSlide | seqHorizontalSlide | verticalSlide | seqVerticalSlide | verticalSlideAlt | seqVerticalSlideAlt
speed: the speed of the panel animation
easing: the easing effect for the animation
seqfactor: delay between each item animation for seqFade | seqHorizontalSlide | seqVerticalSlide | seqVerticalSlideAlt

We hope you find this little menu interesting and useful, enjoy!

View demoDownload source

The revised version of AJAX-ZOOM supports 360° object rotation. Integration has been substantially simplified. Some additional UI controls have been added as optional features for zooming and spinning. Moreover, it now works on iPhone / iPad and other touch devices. Magento integration guide will be released shortly.

Source

http://www.ajax-zoom.com/

Demo

http://www.ajax-zoom.com/examples/example15.php

“Inspired by American portrait painter Chuck Close, this script converts an image into a pixelated version using an HTML5 canvas element. It’s basically a simple demo for canvas “imageData” functionality.” David DeSandro

Created by

David DeSandro

Source

http://desandro.com/resources/close-pixelate/

Demo

http://desandro.com/resources/close-pixelate/

Hello everybody, this is an advanced version of pirobox.
I implemented a few things more than the previous version. One of the most important things is the ability to open any kind of files, from inLine content to the swf files, from simple images to pdf files. Other things are: automatic image resizing and drag and drop.

Browser compatibility = FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 7+.

I really hope that my script Pirobox can be fun and usefull for you. Enjoy the code with jQuery

Source

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

Demo

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

A lightbox-style image and video viewer for websites with jQuery.
You are bound to love this little plugin, and its many features. Do give this one a go, you won’t be disappointed. I myself am a big fan of the skin: “top_menu” option, which allows your visitors to concentrate on the screencast only (by placing the rest of the site in a semi-darkness), while letting them skip to next/previous video and informing them on the screencast sequential info.

Source

http://shoogledesigns.com/blog/2010/09/27/use-jquery-to-create-an-easy-to-browse-screencast-library/

Demo

http://shoogledesigns.com/demos/use_jquery_to_create_an_easy_to_browse_screencast_library.html

jQuery.popeye is an image gallery which is an alternative to the famous Javascript Lightbox, that offers consistent look & feel with the rest of your website. When compared to other Lightbox alternatives, it is more integrated into the flow of the web page. It offers a box with a small preview image with caption, the possibility to flip trough an array of more thumbnails and to show an enlarged version in the same place.

Source

http://www.bloggingdeveloper.com/post/jQuery-popeye-A-Lightbox-Alternative.aspx

Demo

http://dev.herr-schuessler.de/jquery/popeye/demo.html

View demoDownload source

Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically!

The beautiful images in the demo are from Vincent Boiteau’s photostream on Flickr.

This tutorial will be a little bit more complex than usual, so I will give my best to explain things clearly.

Let’s get started with the markup.

The Markup

The HTML structure consists of three main containers: one for the info bar at the bottom of the page, one for the thumbnails and one panel container for the full image:

 <div class="infobar">
	<span id="description"></span>
	<span id="loading">Loading Image</span>
</div>
<div id="thumbsWrapper">
	<div id="content" >
		<img src="thumbs/1.JPG" alt="images/1.JPG" title="something"/>
		<img src="thumbs/2.JPG" alt="images/2.JPG" title="something"/>
		...
		<div class="placeholder"></div>
	</div>
</div>
<div id="panel">
	<div id="wrapper">
		<a id="prev"></a>
		<a id="next"></a>
	</div>
</div>

The info bar container has a span for the image description and one for the loading display. The thumbnail wrapper contains a content container for all the small images. The very last element after the thumbnails is a placeholder. We need to add some space to the end because we don’t want the thumbnails to get covered by the info bar. Since we don’t want to use any paddings or margins in our containers, we simply add another filler element.

The structure for the panel contains a wrapper for the full image and two navigation items. In our JavaScript function we will add the full size image to this wrapper.

Now, let’s take a look at the style.

The CSS

First, we will define some general style for the page:

*{
    margin:0;
    padding:0;
}
body{
    background-color:#000;
    font-family:Verdana;
    text-transform:uppercase;
    color:#fff;
    font-size:10px;
    overflow:hidden;
}

The body needs to get the property overflow hidden, because we will set the scroll bar for the thumbs view only. If we would add scrolling to the page, the scroll bar would appear when the full image panel slides up. We avoid that by saying that the overflow will be hidden for the body.

The info bar will have a fixed position. We always want it to be visible and at the same place in the page:

.infobar{
    background-color:#000;
    height:28px;
    line-height:28px;
    right:20px;
    position:fixed;
    bottom:0px;
    left:20px;
    z-index:999999999;
    text-align:center;
    color:#ddd;
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    text-shadow:0px 0px 1px #ccc;
}

We add some border radius for rounded borders. We set the z-index crazily high since we want the element to be always on top. of course you could just use a value like 15 or 50. Just be careful with the other elements that will get a new z-index dynamically in the JS. The highest one of them is 10.

The description and the loading item will have the following style:

span#description{
    text-shadow:1px 1px 1px #000;
    display:none;
}
span#loading{
    display:none;
    padding-right: 30px;
    background:transparent url(../loading.gif) no-repeat center right;
}

The loading item will have a loading image as background.

The thumbs wrapper will have a panel like style. We set it fixed, occupying the whole screen. Important for the effect is the bottom:0px since we will want the wrapper to come up from the bottom by animating its height. Again, we set the overflow to hidden, since we just want the content container to have a scroll bar.

#thumbsWrapper{
    overflow:hidden;
    position:fixed;
    height:100%;
    width:100%;
    left:0px;
    right:0px;
    bottom:0px;
}

The content wrapper will also occupy all the page. The vertical scroll bar we set explicitly by saying overflow-y:scroll (auto would be the default value). Initially, we want this container to be invisible because we don’t want to show the scroll bar while there is nothing on the page during the initial loading time.

#content{
   position:absolute;
   top:0px;
   height:100%;
   width:100%;
   left:0px;
   background-color:#111;
   overflow-y:scroll;
   display:none;
}

The images in the content container will float left and have an opacity of 0.4. The hover function will then increase opacity, giving the whole thing a spotlight effect.

#content img{
    float:left;
    margin:2px;
    cursor:pointer;
    opacity:0.4;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

The placeholder will make sure that our thumbs don’t get covered by the info bar when we are at the bottom of the page:

.placeholder{
    float:left;
    clear:both;
    width:100%;
    height:30px;
}

The panel will have the following style similar to the style of the thumbs wrapper:

#panel{
    background-color:#222;
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    height:0px;
    text-align:center;
}

Initially, the

#panel img{
    cursor:pointer;
    position:relative;
    border:1px solid #000;
    -moz-box-shadow:0px 0px 10px #111;
    -webkit-box-shadow:0px 0px 10px #111;
    box-shadow:0px 0px 10px #111;
    display:none;
}

We set it to display:none since we will make it appear by fading it in. This will create a nice effect.

The image wrapper be centered horizontally. This we achieve by setting the left and right margins to auto.

#wrapper{
    position:relative;
    margin:40px auto 0px auto;
}

The navigation items will have the following style:

a#next,
a#prev{
    width:40px;
    height:40px;
    position:fixed;
    cursor:pointer;
    outline:none;
    display:none;
    background:#aaa url(../nav.png) no-repeat top left;
}
a#next:hover, a#prev:hover{
    background-color:#fff;
}
a#next{
    right:0px;
    top:50%;
    margin-top:-20px;
    background-position: 0px 0px;
}
a#prev{
    left:0px;
    top:50%;
    margin-top:-20px;
    background-position: 0px -40px;
}

We give the navigation items a fixed position. To center an absolute or fixed element horizontally (or vertically) you can give it a top (or left) value of 50% and then a negative top (or left) margin of half of its height (or width). Since the navigation item is 40px high, our top margin is is -20px.

And that was all the style. Now, let’s take a look at the JavaScript magic:

The JavaScript

OK, don’t scare, it’s a bit lengthy… but don’t worry, most of it is comments and code indention :)
Our main functions fire when we click on a thumb or click on a full image.

When clicking on a thumbnail (line 34) we first show our loading item in the info bar. Then we say to load the respective image (line 40) with the source being the alt attribute of the thumb we clicked (line 92). Everything that is inside of the load function will just be executed after the image is loaded (line 41 to 93). So, we hide the loading item from the info bar, resize the image to fit into the viewport and append the image element to the wrapper. Then we fade it in (line 54) and slide up the panel where we will see the full image and the fading in effect still executing (57 – 91). We also show the description and the navigation items, and finally we make the thumbs wrapper disappear by setting the height to 0 (line 90). We do that because we want it sliding back from the bottom when we click on the full image.

For the click event on the full image (line 101 to 119) we need to use “live” since the img element is not there in the beginning but it is created dynamically. We animate the thumbs wrapper and set the panel to zero height.

The functions for browsing through the full images check which thumb image is the previous or next one and according to that we set the next or previous full image (line 128 to 137). For that we use the navigate function (line 143 to 191).

From line 18 to 26 we say that we want the full size picture to be resized whenever we resize the window. The resize function is defined from line 197 until 237. We also resize the wrapper around the image.

$(function() {
	/* this is the index of the last clicked picture */
	var current = -1;
	/* number of pictures */
	var totalpictures = $('#content img').size();
	/* speed to animate the panel and the thumbs wrapper */
	var speed 	= 500;

	/* show the content */
	$('#content').show();

	/*
	when the user resizes the browser window,
	the size of the picture being viewed is recalculated;
	 */
	$(window).bind('resize', function() {
		var $picture = $('#wrapper').find('img');
		resize($picture);
	});

	/*
	when hovering a thumb, animate it's opacity
	for a cool effect;
	when clicking on it, we load the corresponding large image;
	the source of the large image is stored as
	the "alt" attribute of the thumb image
	 */
	$('#content > img').hover(function () {
		var $this   = $(this);
		$this.stop().animate({'opacity':'1.0'},200);
	},function () {
		var $this   = $(this);
		$this.stop().animate({'opacity':'0.4'},200);
	}).bind('click',function(){
		var $this   = $(this);

		/* shows the loading icon */
		$('#loading').show();

		$('').load(function(){
			$('#loading').hide();
			if($('#wrapper').find('img').length) return;
			current 	= $this.index();
			var $theImage   = $(this);
			/*
			After it's loaded we hide the loading icon
			and resize the image, given the window size;
			then we append the image to the wrapper
			*/
			resize($theImage);

			$('#wrapper').append($theImage);
			/* make its opacity animate */
			$theImage.fadeIn(800);

			/* and finally slide up the panel */
			$('#panel').animate({'height':'100%'},speed,function(){
				/*
				if the picture has a description,
				it's stored in the title attribute of the thumb;
				show it if it's not empty
				 */
				var title = $this.attr('title');
				if(title != '')
					$('#description').html(title).show();
				else
					$('#description').empty().hide();

				/*
				if our picture is the first one,
				don't show the "previous button"
				for the slideshow navigation;
				if our picture is the last one,
				don't show the "next button"
				for the slideshow navigation
				 */
				if(current==0)
					$('#prev').hide();
				else
					$('#prev').fadeIn();
				if(current==parseInt(totalpictures-1))
					$('#next').hide();
				else
					$('#next').fadeIn();
				/*
				we set the z-index and height of the thumbs wrapper
				to 0, because we want to slide it up afterwards,
				when the user clicks the large image
				 */
				$('#thumbsWrapper').css({'z-index':'0','height':'0px'});
			});
		}).attr('src', $this.attr('alt'));
	});

	/*
	when hovering a large image,
	we want to slide up the thumbs wrapper again,
	and reset the panel (like it was initially);
	this includes removing the large image element
	 */
	$('#wrapper > img').live('click',function(){
		$this = $(this);
		$('#description').empty().hide();

		$('#thumbsWrapper').css('z-index','10')
		.stop()
		.animate({'height':'100%'},speed,function(){
			var $theWrapper = $(this);
			$('#panel').css('height','0px');
			$theWrapper.css('z-index','0');
			/*
			remove the large image element
			and the navigation buttons
			 */
			$this.remove();
			$('#prev').hide();
			$('#next').hide();
		});
	});

	/*
	when we are viewing a large image,
	if we navigate to the right/left we need to know
	which image is the corresponding neighbour.
	we know the index of the current picture (current),
	so we can easily get to the neighbour:
	 */
	$('#next').bind('click',function(){
		var $this           = $(this);
		var $nextimage 		= $('#content img:nth-child('+parseInt(current+2)+')');
		navigate($nextimage,'right');
	});
	$('#prev').bind('click',function(){
		var $this           = $(this);
		var $previmage 		= $('#content img:nth-child('+parseInt(current)+')');
		navigate($previmage,'left');
	});

	/*
	given the next or previous image to show,
	and the direction, it loads a new image in the panel.
	 */
	function navigate($nextimage,dir){
		/*
		if we are at the end/beginning
		then there's no next/previous
		 */
		if(dir=='left' && current==0)
			return;
		if(dir=='right' && current==parseInt(totalpictures-1))
			return;
		$('#loading').show();
		$('').load(function(){
			var $theImage = $(this);
			$('#loading').hide();
			$('#description').empty().fadeOut();

			$('#wrapper img').stop().fadeOut(500,function(){
				var $this = $(this);

				$this.remove();
				resize($theImage);

				$('#wrapper').append($theImage.show());
				$theImage.stop().fadeIn(800);

				var title = $nextimage.attr('title');
				if(title != ''){
					$('#description').html(title).show();
				}
				else
					$('#description').empty().hide();

				if(current==0)
					$('#prev').hide();
				else
					$('#prev').show();
				if(current==parseInt(totalpictures-1))
					$('#next').hide();
				else
					$('#next').show();
			});
			/*
			increase or decrease the current variable
			 */
			if(dir=='right')
				++current;
			else if(dir=='left')
				--current;
		}).attr('src', $nextimage.attr('alt'));
	}

	/*
	resizes an image given the window size,
	considering the margin values
	 */
	function resize($image){
		var windowH      = $(window).height()-100;
		var windowW      = $(window).width()-80;
		var theImage     = new Image();
		theImage.src     = $image.attr("src");
		var imgwidth     = theImage.width;
		var imgheight    = theImage.height;

		if((imgwidth > windowW)||(imgheight > windowH)){
			if(imgwidth > imgheight){
				var newwidth = windowW;
				var ratio = imgwidth / windowW;
				var newheight = imgheight / ratio;
				theImage.height = newheight;
				theImage.width= newwidth;
				if(newheight>windowH){
					var newnewheight = windowH;
					var newratio = newheight/windowH;
					var newnewwidth =newwidth/newratio;
					theImage.width = newnewwidth;
					theImage.height= newnewheight;
				}
			}
			else{
				var newheight = windowH;
				var ratio = imgheight / windowH;
				var newwidth = imgwidth / ratio;
				theImage.height = newheight;
				theImage.width= newwidth;
				if(newwidth>windowW){
					var newnewwidth = windowW;
					var newratio = newwidth/windowW;
					var newnewheight =newheight/newratio;
					theImage.height = newnewheight;
					theImage.width= newnewwidth;
				}
			}
		}
		$image.css({'width':theImage.width+'px','height':theImage.height+'px'});
	}
});

For further details, check the comments in the code, they describe what is done in the moment.

And that’s it! I hope you enjoyed the tutorial and the result!

View demoDownload source