View demoDownload source

Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.

First, we need to define which elements we want to apply the effect to, meaning that we either want to animate the element’s opacity or color, or both. To the elements we want to fade, we will give the class “e-fade” and to the elements we want to change the color, we will give the class “e-color”. For any of these elements, no matter if we apply one or the other, or both classes, we will need to give the class “effect”.

An example for using these classes is the following HTML structure:

<!-- Animates the color -->
<h2 class="effect e-color">Custom effects with jQuery</h2>

<!-- Animates the opacity -->
<h2 class="effect e-fade">Custom effects with jQuery</h2>

<!-- Animates both color and opacity -->
<h2 class="effect e-color e-fade">Custom effects with jQuery</h2>

In our example we will use a menu to trigger the animation events. When we mouse over the menu items, the regarding element’s effects will get executed.

To enhance certain elements, we will have one more class, one that will let us know that these elements should be left untouched by the animations. This will give us the possibility to focus on certain elements.
The class name will be the same like the ID for one of the menu items. That way, we are creating a relation between them:

<ul id="menu" class="menu">
	<li><a href="#"><img src="images/1.png" alt="1"/></a></li>
	<li><a href="#"><img src="images/2.png" alt="2"/></a></li>
	<li><a href="#"><img src="images/3.png" alt="3"/></a></li>
	<li><a href="#"><img src="images/4.png" alt="4"/></a></li>
	<li><a href="#" id="effect-n"><img src="images/5.png" alt="5"/></a></li>
</ul>

...

<h3 class="effect-n">Vapour around me</h3>

As you can see, the last menu item will receive the respective ID and the h3 will receive a class with the same name. So, when we hover over that menu item, all the other elements (that have the previous effect classes) will be animated, except this one.

Now, let’s look at the JavaScript.
Let’s start by caching some elements:

var $menu			= $('#menu'),
	$container		= $('#container'),
	$content		= $container.find('.content');

We will add the classes for the effects using jQuery instead of going to each single element in the HTML and adding it “manually”:

$content
.find('p')
.addClass('effect e-fade')
.end()
.find('h1, h2, h3')
.addClass('effect e-fade e-color');

Now we will get all the elements that have the class “effect” and define the OverlayEffect function that will take care of the animations:

var $elems			= $(document).find('.effect'),
	OverlayEffect 	= (function(){
			//speed for animations
		var speed				= 1000,
			//the event that triggers the effect
			eventOff			= 'mouseenter',
			//the event that stops the effect
			eventOn				= 'mouseleave',
			//this is the color that the elements will have after eventOff
			colorOff			= '#AAAAAA',
			//saves the original color of each e-color element,
			//and calls the methods to initialize the events
			init				= function() {
				$elems.each(function(){
					var $el		= $(this);
					if($el.hasClass('e-color'))
						$el.data('original-color',$el.css('color'));
				});
				initEventsHandler();
			},
			//initializes the events eventOff / eventOn
			initEventsHandler 	= function() {
				$menu
				.delegate('a',eventOff,function(e){
					//relation is the id of the element,
					//and the class of related elements
					var relation	= $(this).attr('id');
					animateElems('off',relation);
					return false;
				})
				.delegate('a',eventOn,function(e){
					var relation	= $(this).attr('id');
					animateElems('on',relation);
					return false;
				});
			},
			//animates the color and / or opacity
			animateElems		= function(dir,relation) {
				var $e	= $elems;

				switch(dir){
					case 'on'	:
				//if there are elements on the page with class = relation
				//then these elements will be excluded from the animation
						if(relation)
							$e	= $elems.not('.'+relation);

						$e.each(function(){
							var $el		= $(this),
								color	= $el.data('original-color'),
								param	= {};

							if($el.hasClass('e-color'))
								param.color		= color;
							if($el.hasClass('e-fade'))
								param.opacity	= 1;

							$el.stop().animate(param,speed);
						});

						break;
					case 'off'	:
						if(relation)
							$e	= $elems.not('.'+relation);

						$e.each(function(){
							var $el		= $(this),
								param	= {};

							if($el.hasClass('e-color'))
								param.color		= colorOff;
							if($el.hasClass('e-fade'))
								param.opacity	= 0.1;

							$el.stop().animate(param,speed);
						});

						break;
				}
			};

		return {
			init				: init
		};
	})();

/*
call the init method of OverlayEffect
*/
OverlayEffect.init();
});

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

View demoDownload source

View demoDownload source

In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. Moreover, we want to have a couple of images for each item, hence we will create a slider.

When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin. In this tutorial we will bump into some of these conflicts and we will adapt some lines of code in order to bypass them.

So, let’s start with the markup!

The Markup

For each item we will have a div element. There we will add an element for the thumbnails slider which we will give the class “thumb_wrapper” and an element for the description with the respective class name:

<div class="item">
	<div class="thumb_wrapper">
		<div class="thumb">
			<ul>
				<li>
					<a href="images/formstack1.jpg">
						<img src="images/thumbs/formstack1.jpg" alt="Formstack 1"/>
					</a>
				</li>
				<li>...</li>
				...
			</ul>
		</div>
		<a class="prev" href="#"></a>
		<a class="next" href="#"></a>
		<span>Hover to zoom, click to view</span>
	</div>
	<div class="description">
		<h2>Portfolio Item</h2>
		<p>Some description</p>
	</div>
</div>

The link element which wraps the image will have the href pointing to the large image. Both plugins that we are using take advantage of that structure. They will build their elements with the information provided in the href attribute.

Additonally, we will add the following attributes and class name to each link element:

<a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack1.jpg">...</a>

The “rel” attribute is actually used by both plugins but we will change the Fancybox plugin, so that it used the “rev” attribute instead. The Fancybox plugin can create a gallery if we give the same “rev” value to a group of images. So, our thumbnails in the first item will all have the “group1″ rev value and the the thumbnails in the second item will have “group2″ and so forth.
For configuring the Cloud Zoom plugin, we will add some parameters to the “rel” attribute.
For more information on the configuration of the plugins, please visit the Cloud Zoom plugin and Fancybox plugin websites.
The position:’body’ value is an adapted value that we will come to later, when we go into the jQuery.

Let’s look at the styling.

The CSS

First we will define the style for the item:

.item{
	float:left;
	width:100%;
	clear:both;
	margin:35px 0px;
}

Now, we will position the thumb wrapper which contains the navigation and the thumbnail slider:

.thumb_wrapper{
	width:290px;
	height:107px;
	position:relative;
	float:left;
	margin:20px 40px 0px 0px;
}

The navigation elements will be positioned absolutely. That’s why we needed to set the parent to a relative position. The common style for both navigation elements is:

.thumb_wrapper a.prev,
.thumb_wrapper a.next{
	width:30px;
	height:30px;
	position:absolute;
	top:50%;
	margin-top:-15px;
	outline:none;
	cursor:pointer;
}

And the individual style for each navigation element is the following:

.thumb_wrapper a.prev{
	left:0px;
	background:transparent url(../images/fancy_nav_left.png) no-repeat top left;
}
.thumb_wrapper a.next{
	right:0px;
	background:transparent url(../images/fancy_nav_right.png) no-repeat top left;
}

The style for the small info span under the slider:

.thumb_wrapper span{
	display:block;
	text-align:center;
	font-size:11px;
	font-style:italic;
	margin-top:3px;
}

The thumb element is the container for the unordered list of thumbnails. We will set the overflow to hidden, since we don’t want our list to show:

.thumb{
	margin-left:40px;
	width:210px;
	height:107px;
	overflow:hidden;
	-moz-box-shadow:1px 1px 3px #555;
	-webkit-box-shadow:1px 1px 3px #555;
	box-shadow:1px 1px 3px #555;
}

The ul for the thumbnails will have a dynamically calculated width which will overwrite the following one:

.thumb ul{
	list-style:none;
	width:800px;
	height:107px;
}

The list items have to flow left so that we have all the thumbnails in a line. The idea is, to animate the ul to the right position, revealing the next/previous thumbnail in our “line”.

.thumb ul li{
	float:left;
}

Let’s decorate the thumbnail images:

.thumb ul li a img{
	border:5px solid #fff;
}

The description will be floating right of the slider:

.description{
	width:620px;
	float:right;
}

And that was all the style! That’s take a look at the JavaScript.

The JavaScript

The main idea is to create a little slider where the user can navigate through the thumbnails of a portfolio item. Then, when hovering over the thumbnail, we want a zoomed version of the hovered part of the thumbnail to appear on the right side. When clicking on a thumbnail, we want the Fancybox to appear, allowing the user to view the full image and navigate through the set.

So, we will start by including the necessary stylesheets and scripts. First, we will add the stylesheets to the head of our HTML:

<link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />

Then, we will add all the scripts in the end of the HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

In our jQuery function we will first initialize the Fancybox and then we will define the functionality of the slider. As mentioned before, the Cloud Zoom plugin parameters are set in the “rel” attribute of the link element that wraps the thumbnail image.

Let’s initialize the Fancybox:

$("#content .cloud-zoom").fancybox({
	'transitionIn'	:	'elastic',
	'transitionOut'	:	'none',
	'speedIn'		:	600,
	'speedOut'		:	200,
	'overlayShow'	:	true,
	'overlayColor'	:	'#000',
	'cyclic'		:	true,
	'easingIn'		:	'easeInOutExpo'
});

We need to deal with a conflict now, which is caused by the Cloud Zoom Plugin adding a div element on top of our link element. It conflicts with the Fancybox Plugin since we cannot click the link element anymore (it’s covered). So, we will add a little function that will trigger the click on the link element whenever we click on the div with the class “mousetrap” that gets generated by the Cloud Zoom Plugin:

$("#content .mousetrap").live('click',function(){
	$(this).prev().trigger('click');
});

Now, we will define some variables for our slider:

var $content	= $('#content'),
$thumb_list = $content.find('.thumb > ul');

The slider ul needs to get a width assigned to it which will be the sum of the widths of each thumbnail inside. We will also define the click events on the navigation buttons:

$thumb_list.each(function(){
	var $this_list	= $(this),
	total_w		= 0,
	loaded		= 0,
	//preload all the images first
	$images		= $this_list.find('img'),
	total_images= $images.length;
	$images.each(function(){
		var $img	= $(this);
		$('').load(function(){
			++loaded;
			if (loaded == total_images){
				$this_list.data('current',0).children().each(function(){
					total_w	+= $(this).width();
				});
				$this_list.css('width', total_w + 'px');

				//next / prev events

				$this_list.parent()
				.siblings('.next')
				.bind('click',function(e){
					var current = $this_list.data('current');
					if(current == $this_list.children().length -1) return false;
					var	next	= ++current,
					ml		= -next * $this_list.children(':first').width();

					$this_list.data('current',next)
					.stop()
					.animate({
						'marginLeft'	: ml + 'px'
					},400);
					e.preventDefault();
				})
				.end()
				.siblings('.prev')
				.bind('click',function(e){
					var current = $this_list.data('current');
					if(current == 0) return false;
					var	prev	= --current,
					ml		= -prev * $this_list.children(':first').width();

					$this_list.data('current',prev)
					.stop()
					.animate({
						'marginLeft'	: ml + 'px'
					},400);
					e.preventDefault();
				});
			}
		}).attr('src',$img.attr('src'));
	});
});

And that’s all! We adapted the Fancybox script slightly in order to show the navigation arrows constantly when hovering over the full image. Also, we adapted the z-indexes of the Fancybox elements in the stylesheet (we added 10000 to each z-index) in order to work with the other elements in the page and the Cloud Zoom elements. In the Cloud Zoom script we added another case for the position, since we need to append the zoom element to the body using the absolute positions of the thumbnails.

We hope you enjoyed the tutorial and find it useful!

View demoDownload source

So, let’s start!

The Markup

The HTML structure will consist of a main wrapper div for the menu which will contain the overlay and the unordered list for the menu. The menu itself will have a link and a div element as submenu in its list elements. Each of the submenu elements will contain lists for the columns of the submenu where each one will have a heading list element:

<div class="oe_wrapper">
	<div id="oe_overlay" class="oe_overlay"></div>
	<ul id="oe_menu" class="oe_menu">
		<li>
			<a href="">Collections</a>
			<div>
				<ul>
					<li class="oe_heading">
						Summer 2011
					</li>
					<li><a href="#">Milano</a></li>
					...
				</ul>
				<ul>
					...
				</ul>
				<ul>
					...
				</ul>
			</div>
		</li>
		<li>
			<a href="">Projects</a>
			<div style="left:-111px;">
				...
			</div>
		</li>
		<li>
			<a href="">Fragrances</a>
			<div style="left:-223px;">
				<ul class="oe_full">
					<li class="oe_heading">
						Fashion Fragrances
					</li>
					<li><a href="#">Deálure</a></li>
					<li><a href="#">Violet Woman</a></li>
					<li><a href="#">Deep Blue for Men</a></li>
					<li><a href="#">New York, New York</a></li>
					<li><a href="#">Illusion</a></li>
				</ul>
			</div>
		</li>
		<li><a href="">Events</a>
			<div style="left:-335px;">
				...
			</div>
		</li>
		<li><a href="">Stores</a>
			<div style="left:-447px;">
				...
			</div>
		</li>
	</ul>
</div>

The submenu divs will each have an inline style for the left position. As we will see, when we look at the style, we need to set this value since we want the submenu to be of absolute position, but within a relatively positioned container. So, in order to position all of the submenu divs at the beginning of the whole menu, we need to “pull” each div more to the left, hence we will have a negative left value for each div (decrementing 112px).

Let’s look at the style.

The CSS

Make sure, that you reset the styles first (we don’t want any browser-defined padding or margin for the list). We will start by the overlay for the body, which is a simple div with an initial opacity of 0:

.oe_overlay{
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

The position will be set to fixed, since we want it to always stay on the top left corner filling the whole screen.
The main menu list will have the following style:

ul.oe_menu{
	list-style:none;
	position:relative;
	margin:30px 0px 0px 40px;
	width:560px;
	float:left;
	clear:both;
}

You might want to adapt its floatiness once you are planning to integrate this somewhere on your site. What is important, is the positioning of the list items:

ul.oe_menu > li{
	width:112px;
	height:101px;
	padding-bottom:2px;
	float:left;
	position:relative;
}

They will be positioned relatively so that we can have the absolutely positioned submenu elements.
The anchor of the top layer menu will have the following style, forming the box:

ul.oe_menu > li > a{
	display:block;
	background-color:#101010;
	color:#aaa;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:90px;
	height:80px;
	padding:10px;
	margin:1px;
	text-shadow:0px 0px 1px #000;
	opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#fff;
	color:#101010;
	opacity:1.0;
}

In our JavaScript we will add the class “hovered” to the main ul, once we move with the mouse over the menu, so that we can change all the anchors to white:

.oe_wrapper ul.hovered > li > a{
	background:#fff;
	text-shadow:0px 0px 1px #FFF;
}

The submenu element will not be visible at the beginning, but only slide in when we hover over a top layer list element:

ul.oe_menu div{
	position:absolute;
	top:103px;
	left:1px;
	background:#fff;
	width:498px;
	height:180px;
	padding:30px;
	display:none;
}

The style for the links inside of the submenu lists:

ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul li a:hover{
	background:#000;
	color:#fff;
}

One of our submenu lists will be alone, so we want it to take all the space:

ul.oe_menu div ul.oe_full{
	width:100%;
}

And if it’s not alone, we want it to have a width of 150px, so that we can have 3 floating next to each other:

ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 150px;
	margin-right:10px;
}

And finally, we want the heading of the submenu list to stand out:

li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}

And that’s all the style! Let’s continue with the effects using jQuery.

The JavaScript

The main idea is to make an overlay appear that darkens everything on the page except the menu. We guarantee that the overlay stays under the menu because we placed it before the menu in the HTML structure. And the overlay stays on top of everything else because it all comes before in the HTML stucture. So, the z-indexes are in the wanted order. Consider that if you integrate this menu somewhere.

Let’s first cache some elements:

var $oe_menu		= $('#oe_menu');
var $oe_menu_items	= $oe_menu.children('li');
var $oe_overlay		= $('#oe_overlay');

When we hover any of the menu items, we will add the classes “slided” and “selected” to the item. The corresponding submenu div will get slided out and all the other ones will get hidden. We also give a very high z-index to the current submenu. When we move the mouse out, we will remove the class “selected”:

$oe_menu_items.bind('mouseenter',function(){
	var $this = $(this);
	$this.addClass('slided selected');
	$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
		$oe_menu_items.not('.slided').children('div').hide();
		$this.removeClass('slided');
	});
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('selected').children('div').css('z-index','1');
});

The class “selected” is needed for the style, while the class “slided” is a helper class that let’s us identify which item is currently “in use”.

Now, we will take care of the overlay by defining what happens when we enter the whole menu wrapper. We will fade the overlay to an opacity of 0.6 and add the class “hovered” to the wrapper, so that the anchors stay white:

$oe_menu.bind('mouseenter',function(){
	var $this = $(this);
	$oe_overlay.stop(true,true).fadeTo(200, 0.6);
	$this.addClass('hovered');
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('hovered');
	$oe_overlay.stop(true,true).fadeTo(200, 0);
	$oe_menu_items.children('div').hide();
})

And that’s it! We hope you had fun with this tutorial and found it useful!

View demoDownload source

View demoDownload source

Today we will create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio. We got the idea from the wonderful portfolio of www.rareview.com where Flash is used to create the effect. We will use jQuery.

The Website Templates that we will be using for the annotated screenshots were found via the great Honkiat.com post 60 High Quality Free Web Templates and Layouts

So, let’s start with the markup!

The Markup

The HTML is pretty simple: we have a main “portfolio” wrapper where we add the “portfolio_item” elements. Each of the elements has an “image_wrap” with the screenshot of the website, and a “zoom_overlay” with an image of the website notes inside:

<div class="portfolio">
	<div class="portfolio_item">
		<div class="image_wrap">
			<img src="images/website1.jpg" alt="Website1"/>
		</div>
		<div class="zoom_overlay">
			<img src="images/website1_notes.png" alt="Website1Notes"/>
		</div>
	</div>
	...
</div>

Let’s style the whole thing.

The CSS

We will start by styling the big portfolio wrapper:

.portfolio{
	width:500px;
	margin:0 auto;
	position:relative;
}

The portfolio items will have the following style:

.portfolio_item{
	position:relative;
	margin:30px auto;
}

The image_wrap div that contains the screenshot that we see initially, will have a table-cell display because we want to center the image inside vertically:

.image_wrap{
	width:500px;
	height:500px;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	position:relative;
	cursor:pointer;
}

We will center the image horizontally by saying text-align:center. This works because an image has a default display of “inline”.

We will add a nice shadow around the image:

.image_wrap > img{
	vertical-align:middle;
	margin:0 auto;
	position:relative;
	-moz-box-shadow:1px 1px 7px #000;
	-webkit-box-shadow:1px 1px 7px #000;
	box-shadow:1px 1px 7px #000;
}

For our jQuery effect, we will want to animate the width of the image. The horizontal alignment should make the image be in the middle but the text-align property is not enough. We also need to add the auto margins to the sides to make the animation work.

The overlay div will be place absolutely, since we want it to appear on top of the image. To center it, we will apply the 50% negative margins trick:

.zoom_overlay{
	width:400px;
	height:400px;
	margin:-200px 0px 0px -200px;
	background:transparent url(../images/overlay.png) repeat top left;
	position:absolute;
	top:50%;
	left:50%;
	display:none;
	opacity:0;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	cursor:pointer;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

The opacity is set to 0 because we will want to animate it when we show it.

The image with the notes will be hidden initially:

.zoom_overlay img{
	display:none;
}

And that’s the style! Let’s add the magic!

The JavaScript

The main idea behind the effect is to make the screenshot smaller and make an overlay with the annotations appear on top of it.
In our jQuery function we will first store the main div in a variable:

var $portfolio	= $('#portfolio');

Then we define what happens when we click on the screenshot. We will animate the image’s height and width and make the overlay appear. The overlay will animate in opacity, width, height and in margins since we want it to be centered. Remember, we were positioning it absolutely with a top and left of 50%:

$portfolio.find('.image_wrap').bind('click',function(){
	var $elem	= $(this);
	var $image	= $elem.find('img:first');
	$image.stop(true)
		  .animate({
			'width'	:'400px',
			'height':'400px'
		  },250);

	//the overlay is the next element
	var opacity	= '1';
	if($.browser.msie)
		opacity	= '0.5'
	$elem.next()
		 .stop(true)
		 .animate({
			'width'		:'500px',
			'height'	:'500px',
			'marginTop'	:'-250px',
			'marginLeft':'-250px',
			'opacity'	:opacity
		},250,function(){
			//fade in the annotations
			$(this).find('img').fadeIn();
		});
});

Now, we will define what happens when we click on the overlay. We will want it to disappear and make the image animate back to its initial size:

$portfolio.find('.zoom_overlay').bind('click',function(){
	var $elem	= $(this);
	var $image	= $elem.prev()
					   .find('img:first');
	//hide overlay
	$elem.find('img')
		 .hide()
		 .end()
		 .stop(true)
		 .animate({
			'width'		:'400px',
			'height'	:'400px',
			'marginTop'	:'-200px',
			'marginLeft':'-200px',
			'opacity'	:'0'
		 },125,function(){
			//hide overlay
			$(this).hide();
		 });

	//show image
	$image.stop(true)
		  .animate({
			'width':'500px',
			'height':'500px'
		  },250);
});

And that’s it!
To integrate this into your portfolio you need to make some transparent image with some notes that fits on the smaller sized image.

We hope you enjoyed this effect and found it useful!

View demoDownload source

Designed by Christopher Hill, and inspired by Lokesh Dhakar\’s Lightbox2, ChillBox is a JQuery Plugin is a simple, unobtrusive script used to overlay images on top of the current page. It can be used for link anchor attributes. ChillBox has been tested with IE6, IE7, IE8, Firefox, Google Chrome, Opera and Safari.

Source

http://www.chillwebdesigns.co.uk/chillbox.html

Demo

http://www.chillwebdesigns.co.uk/chillbox.html

In this tutorial we will show you how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context. We will highlight images on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image on the screen.

Let’s start!

The Markup

For the HTML structure we simply need to consider the image and its class. The image can be placed anywhere in your website:

<img src="images/thumbs/1.jpg" alt="images/1.jpg" class="ih_image"/>

We use the alt attribute to add the reference to the bigger image.

We will also add an overlay element before the body ends:

<div id="ih_overlay" class="ih_overlay" style="display:none;"></div>

The structure that we will be creating with the JavaScript will look as follows:

<div id="ih_clone" class="ih_image_clone_wrap">
	<span class="ih_close"></span>
	<img class="preview" src="images/1.jpg">
</div>

This structure will not be placed in our HTML – it will be created dynamically.

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

The CSS

First, we will define the style for the overlay:

.ih_overlay{
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background:#000;
	z-index:10;
	opacity:0.9;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

The filter property is used for applying transparency in IE. We make the overlay fixed in order to always be shown, even if we scroll the page.

The image that we want to apply our effect to will have the following style:

img.ih_image{
	margin:10px 0px;
	position:relative;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;
	opacity:0.7;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

It’s pretty plain, we just add some box shadow to it.

In our JavaScript we will create a wrapper that contains a clone of the image that we are hovering. It will get the same positions as the current image. That’s why we do not define the top and left here, but dynamically in the JS.

.ih_image_clone_wrap{
	position:absolute;
	z-index:11;
}

We will also add some spans with icons that will either show a magnifying glass, a loading image or a cross. We define all common properties as follows:

.ih_image_clone_wrap span.ih_zoom,
.ih_image_clone_wrap span.ih_loading,
.ih_image_clone_wrap span.ih_close{
	position:absolute;
	top:10px;
	right:10px;
	width:24px;
	height:24px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	opacity:0.8;
	cursor:pointer;
	-moz-box-shadow:1px 1px 2px #000;
	-webkit-box-shadow:1px 1px 2px #000;
	box-shadow:1px 1px 2px #000;
	z-index:999;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

The specific properties for each class, like the background, will be defined as follows:

.ih_image_clone_wrap span.ih_zoom{
	background:#000 url(../icons/zoom.png) no-repeat center center;
}
.ih_image_clone_wrap span.ih_loading{
	background:#000 url(../icons/loader.gif) no-repeat center center;
}
.ih_image_clone_wrap span.ih_close{
	background:#000 url(../icons/close.png) no-repeat center center;
}
.ih_image_clone_wrap img{
	opacity:0.7;
	-moz-box-shadow:1px 1px 10px #000;
	-webkit-box-shadow:1px 1px 10px #000;
	box-shadow:1px 1px 10px #000;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

The full sized image that we will load on top of the thumbnail, will have the following style:

.ih_image_clone_wrap img.preview{
	opacity:1;
	position:absolute;
	top:0px;
	left:0px;
}

And now, let’s add some magic!

The JavaScript

In our jQuery function we will start by defining a variable to control the timing of the highlight effect.
When we hover over an image with the specific class we create our div with the class ih_image_clone_wrap and define its position by getting the position of the current image.

/**
* timeout to control the display of the overlay/highlight
*/
var highlight_timeout;

/**
* user hovers one image:
* create a absolute div with the same image inside,
* and append it to the body
*/
$('img.ih_image').bind('mouseenter',function () {
		var $thumb = $(this);

		var $clone = $('<div />',{
			'id'		: 'ih_clone',
			'className'	: 'ih_image_clone_wrap',
			'html'     	: '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
			'style'		: 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
		});

		var highlight = function (){
			$('#ih_overlay').show();
			$('BODY').append($clone);
		}
		//show it after some time ...
		highlight_timeout = setTimeout(highlight,700);

		/**
		* when we click on the zoom,
		* we display the image in the center of the window,
		* and enlarge it to the size of the real image,
		* fading this one in, after the animation is over.
		*/
		$clone.find('.ih_zoom').bind('click',function(){
			var $zoom = $(this);
			$zoom.addClass('ih_loading').removeClass('ih_zoom');
			var imgL_source = $thumb.attr('alt');

			$('<img class="ih_preview" style="display:none;"/>').load(function(){
				var $imgL = $(this);
				$zoom.hide();
				var windowW = $(window).width();
				var windowH = $(window).height();
				var windowS = $(window).scrollTop();

				$clone.append($imgL).animate({
					'top'			: windowH/2 + windowS + 'px',
					'left'			: windowW/2  + 'px',
					'margin-left'	: -$thumb.width()/2 + 'px',
					'margin-top'	: -$thumb.height()/2 + 'px'
				},400,function(){
					var $clone = $(this);
					var largeW = $imgL.width();
					var largeH = $imgL.height();
					$clone.animate({
						'top'			: windowH/2 + windowS + 'px',
						'left'			: windowW/2  + 'px',
						'margin-left'	: -largeW/2 + 'px',
						'margin-top'	: -largeH/2 + 'px',
						'width'			: largeW + 'px',
						'height'		: largeH + 'px'
					},400).find('img:first').animate({
						'width'			: largeW + 'px',
						'height'		: largeH + 'px'
					},400,function(){
						var $thumb = $(this);
						/**
						* fade in the large image and
						* replace the zoom with a cross,
						* so the user can close the preview mode
						*/
						$imgL.fadeIn(function(){
							$zoom.addClass('ih_close')
								 .removeClass('ih_loading')
								 .fadeIn(function(){
									$(this).bind('click',function(){
										$clone.remove();
										clearTimeout(highlight_timeout);
										$('#ih_overlay').hide();
									});
								$(this).bind('click',function(){
									$clone.remove();
									clearTimeout(highlight_timeout);
									$('#ih_overlay').hide();
								});
							});
							$thumb.remove();
						});
					});
				});
			}).error(function(){
				/**
				* error loading image
				* maybe show a message like
				* 'no preview available'?
				*/
				$zoom.fadeOut();
			}).attr('src',imgL_source);
		});
}).bind('mouseleave',function(){
	/**
	* the user moves the mouse out of an image.
	* if there's no clone yet, clear the timeout
	* (user was probably scolling through the article, and
	* doesn't want to view the image)
	*/
	if($('#ih_clone').length) return;
	clearTimeout(highlight_timeout);
});

/**
* the user moves the mouse out of the clone.
* if we don't have yet the cross option to close the preview, then
* clear the timeout
*/
$('#ih_clone').live('mouseleave',function() {
	var $clone = $('#ih_clone');
	if(!$clone.find('.ih_preview').length){
		$clone.remove();
		clearTimeout(highlight_timeout);
		$('#ih_overlay').hide();
	}
});

And that’s all! We hope you enjoyed this tutorial and find it useful!

View demoDownload source

Often when I’m designing layouts, I know I want to create x number of columns that are spaced y pixels apart. Usually I do the math in my head or if I’m feeling super lazy, I pull out my calculator. While playing with grid overlays earlier today, I decided to make a plugin that automatically calculates column width and row height based on the number of rows or columns present and overlays an appropriately sized grid.
Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space.

Source

http://devgrow.com/griddy-overlay/

Demo

http://devgrow.com/griddy/

Have you ever had a DOM element that you wanted lightboxed, but didn’t want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.
Lightbox_me is an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.

Source

http://buckwilson.me/lightboxme/

Demo

http://buckwilson.me/lightboxme/

The other day I was creating an overlay with a box for Cody’s jTextTranslate jQuery Plugin and I thought, it could be useful to describe the technique in a tutorial.

So, I want to show you how to create a semi-transparent overlay that covers all the page, and a message box that can be turned off again. You can see on the screenshot how that will look.

Then I will show you how to add some jQuery that will make the overlay appear and the message box slide down from the top of the page (try the demo at the end of this post).

Ok, let’s get to work:

1. The HTML

We just need two elements in our HTML: a div for the overlay and a div for the box. The box will contain a link element for a closing icon and some text. And here we go:

<div class="overlay" id="overlay" style="display:none;"></div>

<div class="box" id="box">
 <a class="boxclose" id="boxclose"></a>
 <h1>Important message</h1>
 <p>
  Here comes a very important message for your user.
  Turn this window off by clicking the cross.
 </p>
</div>

Since we will be referring to these two main elements in the JavaScript later, we should already give them IDs. You can place the overlay and the box div anywhere in your site as a direct child of the body.

The overlay is getting a style tag with display:none since we want it not to be visible initially. The visibility of the box will be handled in the CSS.

Let’s give them some style.

2. The CSS

For the overlay we will simply use a transparent image that will be repeated. We could as well just give it a dark background color and make it transparent with CSS properties, but for now, we will use an image:

.overlay{
    background:transparent url(images/overlay.png) repeat top left;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
}

What we are doing here is to stretch this div by saying that from all sides it’s position is 0. So, no matter how wide the browser window is, this will always make it being stretched over all the page. Using position:fixed will always keep it at 0 no matter where you are in the page, e.g. after scrolling. If we would have used position:absolute we would just have the visible (top part of the page) covered, not including the part after we scroll down. The z-index needs to be very high in order to put this element on top of all the others (except the box).

The box will have the following CSS properties:

.box{
    position:fixed;
    top:-200px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
}

Again, we have a fixed container here because we want the box to move along as we scroll. For the top property we provide a negative value since we want the box to be ouside of our window i.e. not visible in the beginning. We don’t just say “display:none” since we want the box to appear sliding out from the top, hence we need to work with positioning here.

In order to center the element on the page we simply give it the same distance from the right as from the left. Using percentages allows to adapt elements nicely to all screen sizes – keep in mind that they can vary extremely.

The CSS3 properties add some rounded borders and some shadow to the box. They will not work in IE though.

The z-index needs to be bigger than the one of the overlay. Here, we just add one. Make sure, that you don’t have any absolute positioned elements with a higher z-index.

The closing cross of the box will have the following styling:

a.boxclose{
    float:right;
    width:26px;
    height:26px;
    background:transparent url(images/cancel.png) repeat top left;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
}

This little element should be halfway “outside” of the box and since the box has a padding of 20 pixels, we “pull” the element up and to the right by giving it a negative margin of -30 pixels for these sides. Negative margins can be used in a lot of ways to help you position elements, don’t be afraid to use them, it’s a good practice trick :) A very useful article about negative margins by Dan Cederholm can be found here.

The h1 element will get some styling, too:

.box h1{
    border-bottom: 1px dashed #7F7F7F;
    margin:-20px -20px 0px -20px;
    padding:10px;
    background-color:#FFEFEF;
    color:#EF7777;
    -moz-border-radius:20px 20px 0px 0px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-top-left-radius: 20px;
    -khtml-border-top-right-radius: 20px;
}

Again, we apply negative margins here to pull the the element into place. Notice, that the CSS3 properties of Mozilla can be written in shorthand.

Okay, that’s the CSS, now let’s move to the juicy JavaScript.

3. The JavaScript

The following code is added at the end of the HTML right before the closing body tag:

$(function() {
    $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'160px'},500);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-200px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });

});

The #activator element stands for any element in your page that should trigger the overlay and the box to appear. In the demo I simply added a styled link element with that ID.

When that activator element gets clicked, the overlay should fade in really fast (uh, jQuery is just like a natural language…) and just after that’s done, another function should be executed that makes the box slide out from the top. That’s what the animate() does. Then saying that top should be 160 pixels means that we want the box to move from it’s current position to position top:160px, and that should take 500 milliseconds.

After the overlay and the box have appeared, we want to be able to turn the box off again by clicking on the cross icon. The function for that first makes the box slide up again to it’s old position (top:-200px) and makes the overlay disappear afterward.

Be aware that the initial position of the box of -200px depends on the height of the box. If your box is bigger in height, make sure that the initial top value is lower (i.e. -500px if your box is 500px high).

And that’s it! Try to experiment with the speeds for the elements to appear. You can replace the ‘fast’ for any millisecond value as well. And you can also make the box slide out from the right or the left, for that, you just have to adapt the initial values and the values in the JavaScript functions.

Enjoy!

View demoDownload source

The result of this tutorial will look like this:

As you can see, we will create a toolbar with icons and a navigation bar. In the end we will use some JavaScript (jQuery) in order to make the bars appear and disappear again.

The icons we will be using for this tutorial belong to the incredible Milky icon set. Please visit the site to get the complete icon set by Frexy.

1. The HTML Structure

Let’s start by the HTML structure. We will need three main elements inside of a wrapper or container:

1. upper toolbar with 8 tool icons
2. navigation with previous and next icon, and a price tag
3. the image itself

The upper toolbar will be an unordered list:

<ul class="toolbar">
 <li><a class="zoomin"></a></li>
 <li><a class="zoomout"></a></li>
 <li><a class="shop"></a></li>
 <li><a class="fav"></a></li>
 <li><a class="edit"></a></li>
 <li><a class="label"></a></li>
 <li><a class="info"></a></li>
</ul>

The navigation bar will be a simple div looking like this:

<div class="navigation">
 <a class="previous"></a>
 <a class="next"></a>
 <span class="price">$ 0.99</span>
</div>

Put into a wrapper or container and adding the image we will have a structure like this:

<div class="image_container">
 <ul class="toolbar">
  <li><a class="zoomin"></a></li>
  <li><a class="zoomout"></a></li>
  <li><a class="shop"></a></li>
  <li><a class="fav"></a></li>
  <li><a class="edit"></a></li>
  <li><a class="label"></a></li>
  <li><a class="info"></a></li>
 </ul>
 <img src="example.jpg" alt="example" width="500" height="375"/>
 <div class="navigation">
  <a class="previous"></a>
  <a class="next"></a>
  <span class="price">$ 0.99</span>
 </div>
</div>

2. The CSS

Now we will add some style to the classes of the HTML elements. The image container shall look like a frame with a neat shadow around. This we can reach with the CSS3 box shadow property that will not work in Internet Explorer, but which will give a nice effect in e.g. Firefox and Chrome. The styling for the container will be the following:

.image_container{
 width:500px;
 height:375px;
 padding:5px;
 background-color:#f7f7f7;
 border:1px solid #ccc;
 -moz-box-shadow: 0 1px 3px #777;
 -webkit-box-shadow: 0 1px 3px #777;
 margin:40px auto;
}

The image that we are going to use will be 500 pixel wide and 375 pixel high, so we will make the container around it the same size. For the border effect we will not simply add a border, but a background color and some padding. You see, this allows you to add two borders to an image: one is created by the padding and the other by the border.

With setting the left and right margin to auto, we center the div vertically on the page. Remember the order for the short CSS version: TOP RIGHT BOTTOM LEFT. If you just have two values it is: TOP+BOTTOM RIGHT+LEFT.

Let’s continue by styling the unordered list for the icons.

Because we want it to appear on top of the image, we need to make the position of the unordered list absolute:

ul.toolbar{
 position:absolute;
 width:500px;
 height:52px;
 margin:0px;
 padding:0px;
 background-color:#fff;
 border-bottom:2px solid #ccc;
 list-style-type:none;
}

When styling lists, it is always important to keep in mind that they have a default margin and padding. In this example, we don’t want it to have any of these, so we set them to zero. The list-style-type should be none, since we don’t want any little bullet next to our list items.

Now, we want to make the list being in a line. That we need to define in the list elements:

ul.toolbar li{
 display:inline;
}

When coding CSS, we always want to try to write compact classes and not repeat everything for similar elements. All the a elements in our list will have a different icon, so we need to create different classes for them. But, they will also have many properties in common. So, the first step we take, is to define these common properties for the general case:

ul.toolbar li a{
 float:left;
 cursor:pointer;
 width:70px;
 height:52px;
 opacity: 0.6;
}

The icon itself is 48 pixels wide and high, but we want to give the buttons that we create out of the icons a little bit more space. When styling link elements, one should always keep in mind that they only change the mouse cursor to a little hand, when there is a href in them. In our case we will not have a link address, so we set the cursor property to pointer. The icons should be a little bit transparent, so we set the opacity to 0.6. We want them to become opaque when we hover over them, so we define:

ul.toolbar li a:hover{
 opacity: 1.0;
}

Now we can define the classes for the icons:

a.label{
 background:#fff url(icons/label.png) no-repeat center center;
}
a.fav{
 background:#fff url(icons/favorite.png) no-repeat center center;
}
a.shop{
 background:#fff url(icons/shopping_cart.png) no-repeat center center;
}
a.zoomin{
 background:#fff url(icons/zoom_in.png) no-repeat center center;
}
a.zoomout{
 background:#fff url(icons/zoom_out.png) no-repeat center center;
}
a.fullscreen{
 background:#fff url(icons/fullscreen.png) no-repeat center center;
}
a.info{
 background:#fff url(icons/info.png) no-repeat center center;
}
a.edit{
 background:#fff url(icons/edit.png) no-repeat center center;
}

With this styling we are done with the upper toolbar.
The navigation div will have a similar style to the unordered list:

.navigation{
 width:500px;
 height:52px;
 position:absolute;
 margin-top:-58px;
 border-top:2px solid #ccc;
 background-color:#fff;
}

The margin-top gets a negative value because we want to pull the navigation bar up to appear on top of the image. (When making the container relative, we could as well just say e.g. left:0px and bottom:0px.)
The two arrows for the navigation will have the following styling:

a.previous{
 float:left;
 background:#fff url(icons/prev.png) no-repeat center center;
}
a.next{
 float:right;
 background:#fff url(icons/next.png) no-repeat center center;
}

Since these elements will as well have the same styling like the a elements in the upper toolbar, we will just add the class to the already existing css:

ul.toolbar li a, .navigation a{
 float:left;
 cursor:pointer;
 width:70px;
 height:52px;
 opacity: 0.6;
}

Last but not least, we have the price tag, which has the following styling:

span.price{
 position:absolute;
 color:#888;
 font-weight:bold;
 font-size:26px;
 margin:10px 0px 0px 140px;
}

The margin of the absolute positioned element allows to position it relative to the containing element. Using e.g. top or left would position an absolute element relative to the page itself.
So, now we are done with the markup and styling and ready to add some magic.

3. The JavaScript

We want the toolbar and navigation to appear only when we hover over the image. Further, we want that, when passing over one of the bars, they become opaque.
To achieve these effects we will simply use jQuery. First, we will need to add style for another class to the CSS which will make elements transparent:

.transparent{
 opacity: 0.6;
}

We will add this class to the toolbar and the navigation. Additionally, we will add a style tag saying that the elements should be invisible:

<div class="image_container">
 <ul class="toolbar transparent" style="display:none;">
  <li><a class="zoomin"></a></li>
  <li><a class="zoomout"></a></li>
  <li><a class="shop"></a></li>
  <li><a class="fav"></a></li>
  <li><a class="edit"></a></li>
  <li><a class="label"></a></li>
  <li><a class="info"></a></li>
 </ul>
 <img src="example.jpg" alt="example" width="500" height="375"/>
 <div class="navigation transparent" style="display:none;">
  <a class="previous"></a>
  <a class="next"></a>
  <span class="price">$ 0.99</span>
 </div>
</div>

Since we will use some JavaScript functions acting on the elements, we need to identify them with unique ids:

<div class="image_container" id="img_cont">
 <ul class="toolbar transparent" id="tlbar" style="display:none;">
  <li><a class="zoomin"></a></li>
  <li><a class="zoomout"></a></li>
  <li><a class="shop"></a></li>
  <li><a class="fav"></a></li>
  <li><a class="edit"></a></li>
  <li><a class="label"></a></li>
  <li><a class="info"></a></li>
 </ul>
 <img src="example.jpg" alt="example" width="500" height="375"/>
 <div class="navigation transparent" id="nav" style="display:none;">
  <a class="previous"></a>
  <a class="next"></a>
  <span class="price">$ 0.99</span>
 </div>
</div>

In the head of the document, we need to add a link to the jQuery script:

<script type="text/javascript" src="jquery-1.3.2.js"></script>

Now we can define some functions before the closing body tag:

<script>
$(function() {
 $('#img_cont').hover(
   function () {
    $('#tlbar').slideDown(200);
    $('#nav').slideDown(200);
   },
   function () {
    $('#tlbar').slideUp(200);
    $('#nav').slideUp(200);
   }
 );
 $('#tlbar,#nav').hover(
  function () {
   $(this).removeClass('transparent');
  },
  function () {
   $(this).addClass('transparent');
  }
 );
});
</script>

We define that we want the toolbar and the navigation bar to appear “sliding down” very quickly (200 milliseconds) whenever we hover over the the image container. Then, when hovering over one of the elements, we want them to become opaque. That we achieve by removing the transparent class.
And that’s  it!
View demoDownload source