Codrops » gallery

3D Gallery with CSS3 and jQuery

Pedro Botelho — Mon, 06 Feb 2012 07:30:10 +0000

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

Please note that this will only work in browsers that support CSS 3D transforms.

How it works

The following HTML structure is used for the gallery:


	
		
			
			http://www.colazionedamichy.it/
		
		
			
		
		
	
	
		<
		>

And this is how the gallery is initialized:

$('#dg-container').gallery();

Options

The following options are available:

current		: 0,
// index of current item

autoplay	: false,
// slideshow on / off

interval	: 2000
// time between transitions

I hope you enjoy it!

View demo Download source

CSS3 Lightbox

Mary Lou — Mon, 26 Dec 2011 12:36:30 +0000

View demo Download source

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:


	
		
			
			Pointe
		
		
			
			
				pointe /point/
				Dance performed on the tips of the toes
				Prev
				Next
			
			x Close

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

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

Fullscreen Image Blur Effect with HTML5

Mary Lou — Fri, 18 Nov 2011 15:43:49 +0000

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

Draggable Image Boxes Grid

Mary Lou — Fri, 07 Oct 2011 15:22:48 +0000

View demo Download source

Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.

The main idea for this template and its effects comes from the beautiful Flash-based website of Stephen Hamilton.

To make the grid draggable, we used jQuery.kinetic by Dave Taylor. The jQuery plugin allows smooth drag scrolling and it’s just what we need in our grid.

The beautiful images in the demo are by Ibrahim Iujaz. Check out his Flickr photostream.

So, let’s begin!

The Markup

The main container will be a div with the class and ID ib-main-wrapper. We will add another div element inside since we will need this structure for applying the jQuery.kinetic plugin. Inside of that div which has the class ib-main, we will place two types of link elements: the thumbnail links and the content links. The content links are the menu like boxes that will expand to a fullscreen content area:


	
		
			
			Crabbed Age and Youth
		
		
			
			Cannot live together
		
		
			
				Welcome Howdy, Stranger
			
			
				
			
		
		...

The boxes for the content will have the class ib-content. The path to the large image for the thumbnails will be saved in the data attribute data-largesrc.

For the content and image preview we will use jQuery templates. The template for the large image preview is the following:


	
	${description}
	
		Previous
		Next
	
	Close Preview
	Loading...

We will have the large image, the navigation buttons, a closing cross and a loading element.

The template for the fullscreen content preview looks like this:


	{{html teaser}}
	{{html content}}
	Close Preview

Now, let’s style the grid.

The CSS

First, we will style the wrapping container. It will occupy all the page’s width and we will set the height dynamically to fit the visible area:

.ib-main-wrapper{
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
    outline: none;
    /*height dynamic*/
}

The main container will have a preset width. We chose this value because we want most visitors to be able to actually drag the grid. If you would set it to less and the user has a larger screen, then the container would be too small:

.ib-main{
    position: relative;
    width: 2546px;
}

Each box element will be floating and have a background image (for the thumbs) that we’ll stretch to be a bit larger than the box. We’ll add a nice transition which will make the background image contract on hover:

.ib-main a{
    float: left;
    width: 210px;
    height: 210px;
    position: relative;
    overflow: hidden;
    margin: 0px 0px 2px 2px;
    cursor: move;
    background: #fff url(../images/thumb_bg.jpg) no-repeat center center;
    background-size: 110% 110%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover{
    background-size: 100% 100%;
}

The thumbnail will be slightly transparent so that we can see the background image (which is a thick border). We’ll also add some CSS3 transition here to animate the opacity on hover:

.ib-main a img{
    opacity: 0.95;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover img{
    opacity: 0.8;
}

The description will be positioned absolutely and we’ll place it out of the box. Then, on hover, we will make it slide in:

.ib-main > a > span{
    display: block;
    position: absolute;
    width: 100%;
    height: 20px;
    line-height: 22px;
    text-align: center;
    font-size: 11px;
    bottom: -20px;
    left: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover > span{
    bottom: 0px;
}

When we click on the thumbnail box, we’ll change the background image in order to show the loading image:

.ib-main a.ib-loading,
.ib-main a.ib-loading:hover{
    background: #fff url(../images/ajax-loader.gif) no-repeat center center;
    background-size: 31px 31px;
}
.ib-main a.ib-loading img,
.ib-main a.ib-loading:hover img{
    opacity: 0.5;
}

When the thumbnail is in the loading state, we don’t want to show the description:

.ib-main > a.ib-loading > span,
.ib-main a.ib-loading > span{
    display: none;
}

Now we’ll style the content boxes. The background is going to be dark:

.ib-content{
    background: #f9f9f9;
}

The teaser is the text we’ll be showing in each content box. On hover we want to animate the background color:

.ib-content .ib-teaser{
    text-align: center;
    background: #333;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-content .ib-teaser:hover{
    background: #000;
}

The headline and the subline will have the following style:

.ib-teaser h2{
    color: #fff;
    font-size: 26px;
    line-height: 26px;
    padding-top: 40%;
    text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.ib-teaser h2 span{
    text-transform: none;
    font-size: 16px;
    font-family: Georgia, serif;
    font-style: italic;
    display: block;
}

When the content area gets expanded, we will show the preview container and it will have an absolute position and a dynamic height:

.ib-content-preview{
    position: absolute;
    top: 44px;
    left: 0px;
    background: #000;
    width: 100%;
    /* height dynamic*/
    display: none;
}

The text elements will get some styling:

.ib-content-preview .ib-teaser h2{
    font-size: 50px;
    padding: 85px 40px 20px 40px;
}
.ib-content-preview .ib-teaser span{
    padding: 20px 0px 0px 5px;
    font-size: 22px;
}
.ib-content-full{
    font-family:'Oswald', serif;
    text-transform: none;
    line-height: 26px;
    margin: 0px 40px;
    border-top: 1px solid #333;
    padding: 20px 0px;
	font-size: 16px;
}
.ib-content-full p{
	padding: 5px 0px;
}

The large preview for the thumbnails will also be of absolute position

.ib-preview{
    overflow: hidden;
    position: absolute;
    top: 40px;
    display: none;
}

The description for the large image will be placed in the bottom left corner. We want big letters:

.ib-preview-descr{
    position: absolute;
    bottom: 30px;
    left: 10px;
    z-index: 999;
    font-size: 50px;
    text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

The image itself will be absolute and the width and height will be set dynamically in the JavaScript:

.ib-preview img{
	position: absolute;
}

The navigation for the images will be placed on the left and the right side of the screen:

.ib-nav span{
	width: 53px;
	height: 87px;
	position: absolute;
	top: 50%;
	margin-top: -43px;
	cursor: pointer;
    text-indent: -9000px;
	opacity: 0.6;
	z-index: 999;
    background: transparent url(../images/nav.png) no-repeat top right;
	right: 10px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.ib-nav span.ib-nav-prev{
	background-position: top left;
	left: 10px;
    right: auto;
}

The closing element will be at the top right corner:

.ib-close{
	top: 7px;
	right: 7px;
	background: transparent url(../images/close.png) no-repeat center center;
	position: absolute;
	width: 24px;
	height: 24px;
	cursor: pointer;
	opacity: 0.2;
	z-index: 999;
    text-indent: -9000px;
}
.ib-nav span:hover, .ib-close:hover{
	opacity: 1;
}

Last, but not least, we’ll style the loading element for the large image. We’ll place it in the center of the screen with our 50% and negative margin trick and give it some rounded borders:

.ib-loading-large{
    text-indent: -9000px;
    width: 60px;
    height: 60px;
    background: #fff url(../images/ajax-loader.gif) no-repeat center center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    z-index: 999;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px 10px 10px 10px;
    opacity: 0.9;
}

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

The JavaScript

Let’s define our template function:

var $ibWrapper	= $('#ib-main-wrapper'),

	Template	= (function() {
		...
})();

Template.init();

First, we will set some variables and cache some elements:

var kinetic_moving				= false,
	// current index of the opened item
	current						= -1,
	// true if the item is being opened / closed
	isAnimating					= false,
	// items on the grid
	$ibItems					= $ibWrapper.find('div.ib-main > a'),
	// image items on the grid
	$ibImgItems					= $ibItems.not('.ib-content'),
	// total image items on the grid
	imgItemsCount				= $ibImgItems.length,

The init function will add a class to all the image items and call the jQuery.kinetic plugin and initialize our main events:

init						= function() {

		// add a class ib-image to the image items
		$ibImgItems.addClass('ib-image');
		// apply the kinetic plugin to the wrapper
		loadKinetic();
		// load some events
		initEvents();

	},

loadKinetic will set the size of the main wrapper and apply the jQuery.kinetic plugin:

loadKinetic					= function() {

	setWrapperSize();

	$ibWrapper.kinetic({
		moved	: function() {

			kinetic_moving = true;

		},
		stopped	: function() {

			kinetic_moving = false;

		}
	});

},

setWrapperSize will set the height of the main wrapper by taking the window height and removing the top bar and the bottom bar (which is our demo header actually):

setWrapperSize				= function() {

	var containerMargins	= $('#ib-top').outerHeight(true) + $('#header').outerHeight(true) + parseFloat( $ibItems.css('margin-top') );
	$ibWrapper.css( 'height', $(window).height() - containerMargins )

},

initEvents calls the openItem function when we click on a box (unless we are dragging) and takes care of the resizing when we change the window size:

initEvents					= function() {

	// open the item only if not dragging the container
	$ibItems.bind('click.ibTemplate', function( event ) {

		if( !kinetic_moving )
			openItem( $(this) );

		return false;	

	});

	// on window resize, set the wrapper and preview size accordingly
	$(window).bind('resize.ibTemplate', function( event ) {

		setWrapperSize();

		$('#ib-img-preview, #ib-content-preview').css({
			width	: $(window).width(),
			height	: $(window).height()
		})

	});

},

When we click on an item, depending on which item we clicked, we’ll load a full image or a content area:

openItem					= function( $item ) {

	if( isAnimating ) return false;

	// if content item
	if( $item.hasClass('ib-content') ) {

		isAnimating	= true;
		current	= $item.index('.ib-content');
		loadContentItem( $item, function() { isAnimating = false; } );

	}
	// if image item
	else {

		isAnimating	= true;
		current	= $item.index('.ib-image');
		loadImgPreview( $item, function() { isAnimating = false; } );

	}

},

If we click on a thumbnail, we’ll load and expand to the respective large image. We will use the jQuery template for the large image preview and set it to the same position like the currently clicked item. Initially having the same size, it will then expand first in width to fit the window and then in height:

loadImgPreview				= function( $item, callback ) {

	var largeSrc		= $item.children('img').data('largesrc'),
		description		= $item.children('span').text(),
		largeImageData	= {
			src			: largeSrc,
			description	: description
		};

	// preload large image
	$item.addClass('ib-loading');

	preloadImage( largeSrc, function() {

		$item.removeClass('ib-loading');

		var hasImgPreview	= ( $('#ib-img-preview').length > 0 );

		if( !hasImgPreview )
			$('#previewTmpl').tmpl( largeImageData ).insertAfter( $ibWrapper );
		else
			$('#ib-img-preview').children('img.ib-preview-img').attr( 'src', largeSrc );

		//get dimentions for the image, based on the windows size
		var	dim	= getImageDim( largeSrc );

		$item.removeClass('ib-img-loading');

		//set the returned values and show/animate preview
		$('#ib-img-preview').css({
			width	: $item.width(),
			height	: $item.height(),
			left	: $item.offset().left,
			top		: $item.offset().top
		}).children('img.ib-preview-img').hide().css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
		}).fadeIn( 400 ).end().show().animate({
			width	: $(window).width(),
			left	: 0
		}, 500, 'easeOutExpo', function() {

			$(this).animate({
				height	: $(window).height(),
				top		: 0
			}, 400, function() {

				var $this	= $(this);
				$this.find('span.ib-preview-descr, span.ib-close').show()
				if( imgItemsCount > 1 )
					$this.find('div.ib-nav').show();

				if( callback ) callback.call();

			});

		});

		if( !hasImgPreview )
			initImgPreviewEvents();

	} );

},

With the same effect of expanding, we’ll open a content area, too. Here we have to take care of the text elements:

loadContentItem				= function( $item, callback ) {

	var hasContentPreview	= ( $('#ib-content-preview').length > 0 ),
		teaser				= $item.children('div.ib-teaser').html(),
		content				= $item.children('div.ib-content-full').html(),
		contentData			= {
			teaser		: teaser,
			content		: content
		};

	if( !hasContentPreview )
		$('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );

	//set the returned values and show/animate preview
	$('#ib-content-preview').css({
		width	: $item.width(),
		height	: $item.height(),
		left	: $item.offset().left,
		top		: $item.offset().top
	}).show().animate({
		width	: $(window).width(),
		left	: 0
	}, 500, 'easeOutExpo', function() {

		$(this).animate({
			height	: $(window).height(),
			top		: 0
		}, 400, function() {

			var $this	= $(this),
				$teaser	= $this.find('div.ib-teaser'),
				$content= $this.find('div.ib-content-full'),
				$close	= $this.find('span.ib-close');

			if( hasContentPreview ) {
				$teaser.html( teaser )
				$content.html( content )
			}

			$teaser.show();
			$content.show();
			$close.show();

			if( callback ) callback.call();

		});

	});

	if( !hasContentPreview )
		initContentPreviewEvents();	

},

A little helper function for preloading images:

// preloads an image
preloadImage				= function( src, callback ) {

	$('').load(function(){

		if( callback ) callback.call();

	}).attr( 'src', src );

},

The next function takes care of loading the events for the large image preview : navigation, close button, and window resize:

initImgPreviewEvents		= function() {

	var $preview	= $('#ib-img-preview');

	$preview.find('span.ib-nav-prev').bind('click.ibTemplate', function( event ) {

		navigate( 'prev' );

	}).end().find('span.ib-nav-next').bind('click.ibTemplate', function( event ) {

		navigate( 'next' );

	}).end().find('span.ib-close').bind('click.ibTemplate', function( event ) {

		closeImgPreview();

	});

	//resizing the window resizes the preview image
	$(window).bind('resize.ibTemplate', function( event ) {

		var $largeImg	= $preview.children('img.ib-preview-img'),
			dim			= getImageDim( $largeImg.attr('src') );

		$largeImg.css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
		})

	});

},

For the content preview we’ll also have to load the event for the closing functionality:

initContentPreviewEvents	= function() {

	$('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function( event ) {

		closeContentPreview();

	});

},

Next, we’ll define the function that takes care of navigating through the large images in fullscreen:

// navigate the image items in fullscreen mode
navigate					= function( dir ) {

	if( isAnimating ) return false;

	isAnimating		= true;

	var $preview	= $('#ib-img-preview'),
		$loading	= $preview.find('div.ib-loading-large');

	$loading.show();

	if( dir === 'next' ) {

		( current === imgItemsCount - 1 ) ? current	= 0 : ++current;

	}
	else if( dir === 'prev' ) {

		( current === 0 ) ? current	= imgItemsCount - 1 : --current;

	}

	var $item		= $ibImgItems.eq( current ),
		largeSrc	= $item.children('img').data('largesrc'),
		description	= $item.children('span').text();

	preloadImage( largeSrc, function() {

		$loading.hide();

		//get dimentions for the image, based on the windows size
		var	dim	= getImageDim( largeSrc );

		$preview.children('img.ib-preview-img')
						.attr( 'src', largeSrc )
						.css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
						})
						.end()
						.find('span.ib-preview-descr')
						.text( description );

		$ibWrapper.scrollTop( $item.offset().top )
				  .scrollLeft( $item.offset().left );

		isAnimating	= false;

	});

},

The following function is for closing the fullscreen image preview:


closeImgPreview				= function() {

	if( isAnimating ) return false;

	isAnimating	= true;

	var $item	= $ibImgItems.eq( current );

	$('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
					.hide()
					.end()
					.animate({
						height	: $item.height(),
						top		: $item.offset().top
						}, 500, 'easeOutExpo', function() {

						$(this).animate({
							width	: $item.width(),
							left	: $item.offset().left
							}, 400, function() {

								$(this).fadeOut(function() {isAnimating	= false;});

						} );

					});

},

For the content preview we will also need such a function:

// closes the fullscreen content item
closeContentPreview			= function() {

	if( isAnimating ) return false;

	isAnimating	= true;

	var $item	= $ibItems.not('.ib-image').eq( current );

	$('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
							.hide()
							.end()
							.animate({
								height	: $item.height(),
								top		: $item.offset().top
							}, 500, 'easeOutExpo', function() {

								$(this).animate({
									width	: $item.width(),
									left	: $item.offset().left
								}, 400, function() {

									$(this).fadeOut(function() {isAnimating	= false;});

								} );

							});

},

getImageDim will get the size of an image and make it centered in fullscreen:

getImageDim					= function( src ) {

	var img     	= new Image();
	img.src     	= src;

	var w_w	= $(window).width(),
		w_h	= $(window).height(),
		r_w	= w_h / w_w,
		i_w	= img.width,
		i_h	= img.height,
		r_i	= i_h / i_w,
		new_w, new_h,
		new_left, new_top;

	if( r_w > r_i ) {

		new_h	= w_h;
		new_w	= w_h / r_i;

	}
	else {

		new_h	= w_w * r_i;
		new_w	= w_w;

	}

	return {
		width	: new_w,
		height	: new_h,
		left	: (w_w - new_w) / 2,
		top		: (w_h - new_h) / 2
	};

};

And that’s it! I hope you enjoyed making this template with me and find it useful!

View demo Download source

Multi-level Photo Map

Pedro Botelho — Tue, 27 Sep 2011 11:37:04 +0000

View demo Download source
This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location. Using Google Maps, we’ll have the location shown on the left side while the images of a location are shown on the right. The images can be viewed in medium size mode or in full lightbox-like mode. The map has a fullscreen option which will show the thumbnails of the images in their location.

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

How it works

The locations for the images are saved in the album.xml file which has the following stucture:


	Thailand 2011
	Some description
	
	...

Inside of the places, we’ll have the information of each place with its name and location and all the single photos in that place:


	Bangkok
	
		13.696693336737654
		100.57159423828125
	
	
		
			photos/Bangkok/thumbs/1.jpg
			photos/Bangkok/1.jpg
			Some description
			
				13.710035342476681
				100.52043914794922
			
		
		
			...

Besides the path to its thumbnail and the full image, every photo has a location in latitude and longitude as well.

Note, that we are using some PHP here in order to load and retrieve the XML data, so you’ll need a server environment to run this.

Initially, a map with all the places is shown:

In our example it is Bangkok, Phuket and Myeik. In the bar under the map and the preview area, we will have the name and the description of the whole album. In this stage we can already go fullscreen in order to see the full map with the places.

Back in the normal mode, when choosing a place, all the images of that place will show on the right side while we zoom the map in on the left side. As you can see, whenever you hover over a photo, you will see its location on the map and vice versa:

When clicking on a thumbnail or the camera icon on the map, we open the preview for the images, through which we can also navigate:

Clicking on the zoom icon of the preview image will open the large lightbox-like view of the full image:

When we are in the second level and open the fullscreen mode, we can see the thumbnails in the map:

Hope you find it useful, feedback is welcome!

View demo Download source

Responsive Image Gallery with Thumbnail Carousel

Mary Lou — Mon, 19 Sep 2011 23:54:06 +0000

View demo Download source

Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

We’ll use the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad.

The images in the demo are by über-talented Sherman Geronimo-Tan and you can find his Flickr photostream here: Sherman Geronimo-Tan’s Flickr Photostream
The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.

So, let’s do it!

The Markup

For the HTML structure we’ll have a main wrapper with the class “rg-gallery”. We’ll also give it the same ID. In another div with the class “rg-thumbs” we’ll add the structure of the Elastislide carousel:

The thumbnails will have two data attributes that we’ll use later in our JavaScript. The “data-large” attribute will have the path to the large image and the “data-description” attribute will contain the caption of the image that we will display under the current large image.

For the structure of the large preview area we will create a jQuery template that we’ll add to the head of our document:

We are adding a condition that will make sure that the navigation is only shown if there is more than one image. The “rg-image” container will be used to add the large image.

Let’s take a look at the style.

The CSS

Besides adjusting a few values like the padding and the margins of the Elastislide thumbnail carousel, we need to style the resting elements of the gallery.

The “rg-image-wrapper” that you saw in our jQuery template will be of relative position and we’ll add a repeated semi-transparent black background image. The borders will be rounded and we’ll give it a min-height of 20 pixels so that the loading element fits into the container initially when the first image get’s loaded:

.rg-image-wrapper{
	position:relative;
	padding:20px 30px;
	background:transparent url(../images/black.png) repeat top left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	min-height:20px;
}

The container that we’ll use to add the big image will be relative and have a line-height of 0. By adding text-align “center” we make all inline elements align in the center. But since we’ll not set the image to “display:block”, we need to add a line-height of 0. This will make sure that there is no gap under the image which is an inline-element by default:

.rg-image{
	position:relative;
	text-align:center;
	line-height:0px;
}

By setting the max-width of our large image to 100%, we make sure that it will always stay in the surrounding fluid container. This is very nicely explained in Fluid Images by Ethan Marcotte on A List Apart.
Now, why setting the max-height to 100% as well? We actually don’t need this but if you would like to restrict the size of the preview area you could set a fixed height for the “rg-image” class and the image would fit in it while still resizing when the width of the view-port changes.

.rg-image img{
	max-height:100%;
	max-width:100%;
}

Let’s style the navigation elements. The style of the arrow anchors will be the following:

.rg-image-nav a{
	position:absolute;
	top:0px;
	left:0px;
	background:#000 url(../images/nav.png) no-repeat -20% 50%;
	width:28px;
	height:100%;
	text-indent:-9000px;
	cursor:pointer;
	opacity:0.3;
	outline:none;
	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
}

This is actually the style of the left arrow and now we’ll overwrite some properties for the right arrow:

.rg-image-nav a.rg-image-nav-next{
	right:0px;
	left:auto;
	background-position:115% 50%;
	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
}

Since we already defined the left value for the elements in general we need to set it to auto again if we want to use “right” instead.

On hover we want to make them more opaque:

.rg-image-nav a:hover{
	opacity:0.8;
}

The caption will have the following style:

.rg-caption {
	text-align:center;
	margin-top:15px;
	position:relative;
}
.rg-caption p{
	font-size:11px;
	letter-spacing:2px;
	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
	line-height:16px;
	padding:0 15px;
	text-transform:uppercase;
}

Now, let’s style the switch options:

.rg-view{
	height:30px;
}
.rg-view a{
	display:block;
	float:right;
	width:16px;
	height:16px;
	margin-right:3px;
	background:#464646 url(../images/views.png) no-repeat top left;
	border:3px solid #464646;
	opacity:0.8;
}
.rg-view a:hover{
	opacity:1.0;
}
.rg-view a.rg-view-full{
	background-position:0px 0px;
}
.rg-view a.rg-view-selected{
	background-color:#6f6f6f;
	border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
	background-position:0px -16px;
}

And finally, we’ll make the loading element appear in the center of the image preview:

.rg-loading{
	width:46px;
	height:46px;
	position:absolute;
	top:50%;
	left:50%;
	background:#000 url(../images/ajax-loader.gif) no-repeat center center;
	margin:-23px 0px 0px -23px;
	z-index:100;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	opacity:0.7;
}

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

The JavaScript

The main idea of the gallery is to make it flexible, so partly we have achieved that by our style: the large image will adjust to the container. For making the thumbnail carousel responsive, we’ll use Elastislide, our previous plugin.
First, lets define some variables:

	// gallery container
var $rgGallery			= $('#rg-gallery'),
	// carousel container
	$esCarousel			= $rgGallery.find('div.es-carousel-wrapper'),
	// the carousel items
	$items				= $esCarousel.find('ul > li'),
	// total number of items
	itemsCount			= $items.length;

Then we’ll define our gallery function:

	Gallery				= (function() {
		//gallery function
	})();

Gallery.init();

Here we’ll define some variables for the current image, the mode and a variable for controlling if an image is being loaded. Then we’ll call some of our functions that are following below:

var current			= 0,
	// mode : carousel || fullview
	mode 			= 'carousel',
	// control if one image is being loaded
	anim			= false,
	init			= function() {

		// (not necessary) preloading the images here...
		$items.add('').imagesLoaded( function() {
			// add options
			_addViewModes();

			// add large image wrapper
			_addImageWrapper();

			// show first image
			_showImage( $items.eq( current ) );
		});

		// initialize the carousel
		_initCarousel();

	},

We need to call the Elastislide plugin:

_initCarousel	= function() {
	$esCarousel.show().elastislide({
		imageW 	: 65,
		onClick	: function( $item ) {
			if( anim ) return false;
			anim	= true;
			// on click show image
			_showImage($item);
			// change current
			current	= $item.index();
		}
	});

	// set elastislide's current to current
	$esCarousel.elastislide( 'setCurrent', current );

},

Read more about Elastislide’s options here: Elastislide – A Responsive jQuery Carousel Plugin.

Our next function will take care of the viewing modes and what happens when we switch the views:

_addViewModes	= function() {

	// top right buttons: hide / show carousel

	var $viewfull	= $(''),
		$viewthumbs	= $('');

	$rgGallery.prepend( $('').append( $viewfull ).append( $viewthumbs ) );

	$viewfull.bind('click.rgGallery', function( event ) {
		$esCarousel.elastislide( 'destroy' ).hide();
		$viewfull.addClass('rg-view-selected');
		$viewthumbs.removeClass('rg-view-selected');
		mode	= 'fullview';
		return false;
	});

	$viewthumbs.bind('click.rgGallery', function( event ) {
		_initCarousel();
		$viewthumbs.addClass('rg-view-selected');
		$viewfull.removeClass('rg-view-selected');
		mode	= 'carousel';
		return false;
	});

},

The _addImageWrapper function adds the structure for the large image and the navigation buttons if the number of total items is greater than one.
It also initializes the navigation events. Using the jQuery Touchwipe Plugin, we’ll add support for the wipe gesture and also for keyboard navigation:

_addImageWrapper= function() {

	$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );

	if( itemsCount > 1 ) {
		// addNavigation
		var $navPrev		= $rgGallery.find('a.rg-image-nav-prev'),
			$navNext		= $rgGallery.find('a.rg-image-nav-next'),
			$imgWrapper		= $rgGallery.find('div.rg-image');

		$navPrev.bind('click.rgGallery', function( event ) {
			_navigate( 'left' );
			return false;
		});	

		$navNext.bind('click.rgGallery', function( event ) {
			_navigate( 'right' );
			return false;
		});

		// add touchwipe events on the large image wrapper
		$imgWrapper.touchwipe({
			wipeLeft			: function() {
				_navigate( 'right' );
			},
			wipeRight			: function() {
				_navigate( 'left' );
			},
			preventDefaultEvents: false
		});

		$(document).bind('keyup.rgGallery', function( event ) {
			if (event.keyCode == 39)
				_navigate( 'right' );
			else if (event.keyCode == 37)
				_navigate( 'left' );
		});

	}

},

The navigation through the large images is controlled by the following function:

_navigate		= function( dir ) {

	if( anim ) return false;
	anim	= true;

	if( dir === 'right' ) {
		if( current + 1 >= itemsCount )
			current = 0;
		else
			++current;
	}
	else if( dir === 'left' ) {
		if( current - 1 < 0 )
			current = itemsCount - 1;
		else
			--current;
	}

	_showImage( $items.eq( current ) );

},

Depening in which direction we are moving, we are setting the current element to one less or one more.

And finally we’ll define the _showImage function that will add the large image and its caption:

_showImage		= function( $item ) {

	// shows the large image that is associated to the $item

	var $loader	= $rgGallery.find('div.rg-loading').show();

	$items.removeClass('selected');
	$item.addClass('selected');

	var $thumb		= $item.find('img'),
		largesrc	= $thumb.data('large'),
		title		= $thumb.data('description');

	$('').load( function() {

		$rgGallery.find('div.rg-image').empty().append('');

		if( title )
			$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

		$loader.hide();

		if( mode === 'carousel' ) {
			$esCarousel.elastislide( 'reload' );
			$esCarousel.elastislide( 'setCurrent', current );
		}

		anim	= false;

	}).attr( 'src', largesrc );

};

return { init : init };

And that’s all folks! I hope you enjoyed this gallery tutorial and find it useful!
View demo Download source

Fullscreen Slideshow with HTML5 Audio and jQuery

Jay Salvat — Tue, 05 Jul 2011 11:31:25 +0000

View demo Download source

In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

To create the slideshow and the fullscreen picture display, we’ll use the Vegas jQuery plugin that compiles many ideas previously shared in Codrops articles in one plugin. The audio elements will be controlled with Buzz, a JavaScript audio library. You can find out more about these two plugins that I wrote on my website: Jay Salvat’s website.

The thumbnails navigation will be spiced up with a custom scrollbar using jScrollPane by Kelvin Luck and some easing effects provided by the jQuery easing plugin by George McGinley Smith.

The New York photography is by Alessandro Artini, check out his photos on his Flickr photostream.

The Markup

Let’s set the stage! First we create a placeholder to contain the picture title and credits.


    New York Gallery
    Pictures by Alessandro Artini

Then the thumbnails are placed in an unordered list. Each thumbnail is linked to a big representation of the picture and carry the title of the picture. Note that we add a data attribute to some links to adjust the vertical alignment of the displayed fullscreen picture to avoid cropping an important part.

Two empty divs are added to hold the pointer and the flash effect when the slides change.

...

Finally, we place the links for the pause and volume management.

Paused

Sounds

The CSS

First, we’ll define the style of the title part which is placed at the bottom of the screen with a black background. We use the “rgba” notation which allow us to set the opacity of the color. Note that we prepend it by the standard hex notation #000 for older browsers.

The heading will be in the nice Ultra font from the Google fonts collection:

#title {
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    bottom: 0px;
    font: 11px Arial, Helvetica, sans-serif;
    padding: 10px 20px;
    position: fixed;
    right: 0px;
    text-align: right;
    width: 100%;
}
    #title h1 {
        font: 30px 'Ultra', Arial, serif;
        margin: 0;
        padding: 0;
    }

We’ll follow the same technique for the thumbnails. The elements of the list are floated to display the pictures as an horizontal bar.

#thumbnails {
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    height: 90px;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}
    #thumbnails ul {
        margin: 0;
        padding: 0;
    }
    #thumbnails li {
        float: left;
        list-style: none;
        margin: 5px;
        padding: 0;
    }
    #thumbnails a {
        outline: none;
    }
    #thumbnails img {
        width: 112px;
    }

The pointer is placed out of the page. It will be animated at the beginning of the slideshow and moved under the currently displayed slide.

#pointer {
    border: 2px solid #F30;
    cursor: pointer;
    height: 75px;
    left: -100px;
    margin: 3px;
    position: absolute;
    width: 112px;
}

The flash effect is done with a pure white div fixed over the whole screen. By default it is hidden. It will be shown and faded out dynamically.

#flash {
    background: #FFF;
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
}

The same idea holds for the pause text. It is hidden by default.

#pause {
    display: none;
    font: 100px 'Ultra', arial, serif;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    text-align: center;
    text-shadow: 0 0 5px #000;
    width: 100%;
}
    #pause a {
        color: #FFF;
        height: 100px;
        left: 50%;
        margin: -50px 0 0 -250px;
        position: absolute;
        text-transform: uppercase;
        top: 50%;
        width: 500px;
    }

For the volume links we’ll use some nice icons. The volume button has three states defined by three classes showing different icons. We use the CSS sprites technique to reduce the number of png files loaded. Read more about the CSS image replacement and CSS sprites technique on Css-tricks.

#volume {
    left: 10px;
    opacity: 0.8;
    position: absolute;
    top: 100px;
}
    #volume a {
    	background: transparent url(../img/icons.png) no-repeat;
    	display: block;
    	height: 30px;
    	text-indent: -9999px;
    	width: 30px;
    }
    #volume.all a {
        background-position: 0 0;
    }
    #volume.some a {
        background-position: -30px 0;
    }
    #volume.none a {
        background-position: -60px 0;
    }

Finally, we’ll customize some Vegas default styles to adjust the overlay pattern and the position of the loading indicator.

.vegas-loading {
    top: auto;
    bottom: 40px;
    left: 40px;
}
.vegas-overlay {
    background-image: url(../js/vegas/overlays/02.png);
}

And we’ll also make some adjustments to the jScrollPane default styles in order to get a nice scrollbar fitting our gallery.

.jspHorizontalBar {
    height: 5px;
}
    .jspHorizontalBar .jspTrack {
         background: #333;
    }
    .jspHorizontalBar .jspDrag {
         background: #666;
         cursor: ew-resize;
    }
#thumbnails:hover .jspHorizontalBar .jspDrag {
    background: #F30;
}

The JavaScript

We are reaching the main part: the JavaScript. Let’s start by caching some elements. The picture array will hold all the slides and their title and vertical alignment.

var pictures = [],
    $pointer = $( '#pointer' ),
    $thumbnails = $( '#thumbnails' ),
    $title = $( '#title' ),
    $pause = $( '#pause' ),
    $flash = $( '#flash' ),
    $volume = $( '#volume' );

It’s time to define the sounds of our gallery with Buzz. The HTML5 audio element is now supported by all modern browsers. Sounds are supported in a native way without the need for Flash. Unfortunately, there is not a single audio format supported by all of them. MP3 would have been a good choice, but Firefox doesn’t support it. We have to convert our sounds to several formats. The best combination is OGG and MP3 formats. To convert our audio elements we used the free online file converter Online Convert.

Buzz allows us to group sounds in order to easily control them. This is what we do with all the camera sounds.

If the user’s browser doesn’t support the HTML5 audio element, Buzz degrades properly. In that case, we’ll simply hide the volume button.

The traffic sound is played and looped as soon as it is loaded.

buzz.defaults.formats = [ 'ogg', 'mp3' ];

var trafficSound = new buzz.sound( 'sounds/traffic' ),
    clickSound = new buzz.sound( 'sounds/click' ),
    focusSound = new buzz.sound( 'sounds/focus' ),
    rewindSound = new buzz.sound( 'sounds/rewind' ),
    cameraSounds = new buzz.group( clickSound, focusSound, rewindSound );

if ( !buzz.isSupported() ) {
    $volume.hide();
}

trafficSound.loop().play().fadeIn( 5000 );

Now, let’s work on our thumbnails. We have to adjust the total width of the thumbnails bar. Without this step, the thumbnails would be display in more than one row.

$thumbnails.find( 'ul' ).width( function() {
    var totalWidth = 0;
    $( this ).find( 'li' ).each( function() {
        totalWidth += $( this ).outerWidth( true );
    });
    return totalWidth;
});

We’ll now apply jScrollPane to the thumbnails container. jScrollPane provides an easy way to work with its API. We use that in order to render a proper scrollbar when the window is resized. This API will be useful in a further step.

$thumbnails.jScrollPane();

var jScrollPaneApi = $thumbnails.data( 'jsp' );

$( window ).bind( 'resize', function() {
    jScrollPaneApi.reinitialise();
});

Now, the Vegas plugin needs to be set. We’ll fill the picture array by grabbing some information from the thumbnails list and pass it to Vegas in order to start the slideshow. A four second delay is applied between the slides.

$thumbnails.find( 'a' ).each( function() {
    pictures.push({
        src: $( this ).attr( 'href' ),
        title: $( this ).find( 'img' ).attr( 'title' ),
        valign: $( this ).find( 'img' ).data( 'valign' )
    });
})

$.vegas( 'slideshow', {
    backgrounds: pictures,
    delay: 4000
 })( 'overlay' );

Vegas triggers a bunch of events. The one we need now is the onload event trigger when a slide is loaded and displayed. With the src attribute of the loaded image, we’ll get the number of the currently active thumbnail. Also, a sound is played.

$( 'body' ).bind( 'vegasload', function( e, img ) {
    var src = $( img ).attr( 'src' ),
        idx = $( 'a[href="' + src + '"]' ).parent( 'li' ).index();

    focusSound.play();

    // ...
});

The title is modified in order to hold the picture title and is displayed with a nice fade-out/fade-in effect.

    $title.fadeOut( function() {
        $( this ).find( 'h1' ).text( pictures[ idx ].title );
        $( this ).fadeIn();
    });

The flash is fired…

    $flash.show().fadeOut( 1000 );

The pointer has to move over the current thumbnail. The jScrollPane API is used to automatically scroll the bar as the pointer is off the screen, but not if the user hovers over the bar.

    var pointerPosition = $thumbnails.find( 'li' ).eq( idx ).position().left;

    $pointer.animate({
        left: pointerPosition
    }, 500, 'easeInOutBack' );

    if ( ( pointerPosition > $thumbnails.width()
        || pointerPosition < jScrollPaneApi.getContentPositionX() )
        && !$thumbnails.is( ':hover' ) ) {
            jScrollPaneApi.scrollToX( pointerPosition, true );
    }

    $pointer.click( function() {
        $thumbnails.find( 'a' ).eq( idx ).click()
    });

Let’s see what we have to do with our volume button. The idea is to mute or unmute some sounds as the button is clicked. We change the class of the button and set the muting or playing of the sounds accordingly.

$volume.click( function() {
    if ( $( this ).hasClass( 'all' ) ) {
        cameraSounds.unmute();
        trafficSound.mute();

        $( this ).removeClass( 'all' ).addClass( 'some' );
    } else if ( $( this ).hasClass( 'some' ) ) {
        cameraSounds.mute();
        trafficSound.mute();

        $( this ).removeClass( 'some' ).addClass( 'none' );
    } else {
        cameraSounds.unmute();
        trafficSound.unmute();

        $( this ).removeClass( 'none' ).addClass( 'all' );
    }
    return false;
});

Our gallery is almost set. Now we want that clicking a thumbnail displays a new slide and pauses the slideshow. Its cursor is set to the current number of the clicked thumbnail. That way the slideshow will restart at the right position. All the elements of the page are hidden and we display a “paused” message.

Another sound is played.

$thumbnails.find( 'a' ).click( function() {
    $pause.show();
    $pointer.hide();

    $volume.animate( { top: '20px' });
    $thumbnails.animate( { top: '-90px' });
    $title.animate( { bottom: '-90px' });    

    var idx = $( this ).parent( 'li' ).index();
    $.vegas( 'slideshow', { step: idx } )( 'pause' );

    rewindSound.play();

    return false;
});

A click on the “paused” word restarts the slideshow and the thumbnails and title are shown again.

$pause.click( function() {
    $pause.hide();
    $pointer.show();

    $volume.animate( { top:'100px' });
    $title.animate( { bottom:'0px' });
    $thumbnails.animate( { top:'0px' });

    $.vegas( 'slideshow' );

    clickSound.play();

    return false;
});

That’s it! We hope you enjoyed the tutorial of mashing up some plugins and like the noisy result!

View demo Download source

Restaurant Website and Gallery Template

Mary Lou — Thu, 21 Apr 2011 09:26:42 +0000

View demo Download source

Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and an integrated Google map that shows the location.

The great food photography is by avlxyz and you can find his Flickr photostream here.
The license for these pictures is the Attribution-NonCommercial-ShareAlike 2.0 Generic License.

The main homepage photo of Venice at night is by krossbow, be sure to check out his Flickr photostream.

When coming to the homepage, the background image will fade in and we will see the first welcome content block:

When the user clicks on “Our Menu”, a little thumbnails gallery will appear in the content area:

Choosing a dish from the thumbnails gallery, will open the fullscreen gallery, that shows the dish image with a title and a description and the same image as background. Using the navigation arrows on screen, the left/right keyboard arrows, or the scrolling wheel of the mouse, the user can slide the images. The title and description will animate back behind the foreground image during the sliding.

When clicking on the foreground image, it will disappear and the background will become more bright. Now, the user can view the fullscreen image and navigate through them the same way. Clicking on the background will bring us back the foreground gallery element.

When we click on the cross on the top right corner, we will leave the image gallery.

The menu point “Visit us” will hide the content box and show a google map as the background of the whole page:

And that’s it! We really hope you liked this template idea and find it useful!

View demo Download source

Fullscreen Gallery with Thumbnail Flip

Mary Lou — Wed, 09 Feb 2011 13:21:34 +0000

View demo Download source

In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.

We will be using Flip!, a jQuery plugin by Lucca Manno that flips elements.

And we will also be using the jQuery Mousewheel Plugin by Brandon Aaron.

The beautiful images are by talented Polina Efremova. Visit her website and check out her profile on Behance.

Let’s get started with the markup!

The Markup

First, we will add a loading element that we want to show when the images are being loaded:

Then, we will create a container for all the images that will be shown in fullscreen:

We will use the “longdesc” attribute to indicate the path to the respective thumbnail. The last div element will server as the overlay pattern.

Next, we will add a container for the contents that are shown on the left bottom corner of the screen.


	
		Dreamer
		Far far away, behind the word mountains, ... 
	
	
		...
	
	...

Each box with a heading will be inside of an element with the class “tf_content”.

The structure for the thumbnail image on the right side of the screen we look as follows:

The span will either have the class “tf_zoom” or “tf_fullscreen” depending on in which mode we are in.

And finally, we will add some elements for the navigation:

Let’s take a look at the style.

The CSS

After doing a simple reset to the body and html, we will define the style for the full images container:

.tf_bg{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
}

The container will be fixed and occupy the whole screen. The images inside will be of absolute positioning and the real width and height will be calculated dynamically in our jQuery function:

.tf_bg img{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	z-index: 1;
	display:none;
}

The pattern will as well be absolute and have a repeated background image:

.tf_pattern{
	position:absolute;
	width:100%;
	height:100%;
	background:transparent url(../images/pattern.png) repeat top left;
	z-index:2;
}

We will position the content absolutely, too:

.tf_content{
	position:absolute;
	bottom:50px;
	left:50px;
	z-index:10;
	display:none;
}

The heading of the content will have a different font, that we will embed using the Google Font API. We’ll come back to that later.

.tf_content h2{
	color:#fff;
	font-size:90px;
	padding:0;
	margin:0;
	font-family: 'Dancing Script', arial, serif;
	text-shadow:1px 1px 2px #000;
}

The paragraph of the content will have a repeated image as background and some nice box- and text-shadow:

.tf_content p{
	color:#fff;
	padding:0;
	margin:0;
	background:transparent url(../images/bg_content.png) repeat top left;
	padding:40px;
	width:500px;
	font-family: 'PT Sans Narrow', arial, serif;
	font-size:20px;
	line-height:25px;
	text-transform:uppercase;
	text-shadow:2px 2px 1px #000;
	-moz-box-shadow:1px 1px 5px #202020;
	-webkit-box-shadow:1px 1px 5px #202020;
	box-shadow:1px 1px 5px #202020;
	border:4px solid #fff;
}

The thumbnail container will be positioned in the middle of the screen on the right side. We accomplish that with setting the top to 50% and the top margin to negative half of its height. We will give the container a reflection, that can be seen in Webkit browsers:

.tf_thumbs{
	position:absolute;
	z-index:12;
	right:50px;
	top:50%;
	margin-top:-79px;
	border:4px solid #fff;
	-moz-box-shadow:1px 1px 5px #202020;
	-webkit-box-shadow:1px 1px 5px #202020;
	box-shadow:1px 1px 5px #202020;
	-webkit-box-reflect:
		below 5px
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(transparent),
			color-stop(0.6, transparent),
			to(rgb(18, 18, 18))
		);
}
.tf_thumbs img{
	display:block;
}

The navigation elements will be placed next to the thumbnail container:

.tf_next,
.tf_prev{
	width:35px;
	height:14px;
	position:absolute;
	top:50%;
	right:320px;
	z-index:100;
	cursor:pointer;
	background:transparent url(../images/nav.png) no-repeat top left;
	opacity:0.5;
}
.tf_next{
	background-position:0px -14px;
	margin-top:80px;
}
.tf_prev{
	background-position:0px 0px;
	margin-top:-55px;
}
.tf_next:hover,
.tf_prev:hover{
	opacity:0.9;
}

The little icons for zoom and fullscreen mode will appear at the right top corner of the thumbnail:

.tf_zoom,
.tf_fullscreen{
	width:20px;
	height:20px;
	position:absolute;
	top:6px;
	right:6px;
	cursor:pointer;
	z-index:100;
	opacity:0.6;
	background:transparent url(../images/icons.png) no-repeat top left;
}
.tf_zoom{
	background-position:0px -20px;
}
.tf_fullscreen{
	background-position:0px 0px;
}
.tf_zoom:hover,
.tf_fullscreen:hover{
	opacity:0.9;
}

The loading element will be positioned in the center of the screen:

.tf_loading{
	position:fixed;
	top:50%;
	left:50%;
	margin:-30px 0px 0px -30px;
	width:60px;
	height:60px;
	background:#fff url(../images/loader.gif) no-repeat center center;
	z-index:999;
	opacity:0.7;
}

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

The JavaScript

First, we will include the following scripts:

Then, we will add the preload function for the images:

(function($) {
	$.fn.preload = function(options) {
		var opts 	= $.extend({}, $.fn.preload.defaults, options);
		o			= $.meta ? $.extend({}, opts, this.data()) : opts;
		var c		= this.length,
			l		= 0;
		return this.each(function() {
			var $i	= $(this);
			$('').load(function(i){
				++l;
				if(l == c) o.onComplete();
			}).attr('src',$i.attr('src'));
		});
	};
	$.fn.preload.defaults = {
		onComplete	: function(){return false;}
	};
})(jQuery);

In our jQuery function, we will first cache some element and define some variables:

var $tf_bg				= $('#tf_bg'),
	$tf_bg_images		= $tf_bg.find('img'),
	$tf_bg_img			= $tf_bg_images.eq(0),
	$tf_thumbs			= $('#tf_thumbs'),
	total				= $tf_bg_images.length,
	current				= 0,
	$tf_content_wrapper	= $('#tf_content_wrapper'),
	$tf_next			= $('#tf_next'),
	$tf_prev			= $('#tf_prev'),
	$tf_loading			= $('#tf_loading');

Then, we will preload the images:

$tf_bg_images.preload({
	onComplete	: function(){
		$tf_loading.hide();
		init();
	}
});

The next function will show the first image and initialize some events:

function init(){
	//get dimentions for the image, based on the windows size
	var dim	= getImageDim($tf_bg_img);
	//set the returned values and show the image
	$tf_bg_img.css({
		width	: dim.width,
		height	: dim.height,
		left	: dim.left,
		top		: dim.top
	}).fadeIn();

	//resizing the window resizes the $tf_bg_img
	$(window).bind('resize',function(){
		var dim	= getImageDim($tf_bg_img);
		$tf_bg_img.css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
		});
	});

	//expand and fit the image to the screen
	$('#tf_zoom').live('click',
	function(){
		if($tf_bg_img.is(':animated'))
			return false;

		var $this	= $(this);
		if($this.hasClass('tf_zoom')){
			resize($tf_bg_img);
			$this.addClass('tf_fullscreen')
			.removeClass('tf_zoom');
		}
		else{
			var dim	= getImageDim($tf_bg_img);
			$tf_bg_img.animate({
				width	: dim.width,
				height	: dim.height,
				top		: dim.top,
				left	: dim.left
			},350);
			$this.addClass('tf_zoom')
			.removeClass('tf_fullscreen');
		}
	}
	);

	//click the arrow down, scrolls down
	$tf_next.bind('click',function(){
		if($tf_bg_img.is(':animated'))
			return false;
		scroll('tb');
	});

	//click the arrow up, scrolls up
	$tf_prev.bind('click',function(){
		if($tf_bg_img.is(':animated'))
			return false;
		scroll('bt');
	});

	//mousewheel events - down / up button trigger the scroll down / up
	$(document).mousewheel(function(e, delta) {
		if($tf_bg_img.is(':animated'))
			return false;

		if(delta > 0)
			scroll('bt');
		else
			scroll('tb');
		return false;
	});

	//key events - down / up button trigger the scroll down / up
	$(document).keydown(function(e){
		if($tf_bg_img.is(':animated'))
			return false;

		switch(e.which){
			case 38:
				scroll('bt');
				break;	

			case 40:
				scroll('tb');
				break;
		}
	});
}

The next function takes care of showing the next or previous image:

function scroll(dir){
	//if dir is "tb" (top -> bottom) increment current,
	//else if "bt" decrement it
	current	= (dir == 'tb')?current + 1:current - 1;

	//we want a circular slideshow,
	//so we need to check the limits of current
	if(current == total) current = 0;
	else if(current < 0) current = total - 1;

	//flip the thumb
	$tf_thumbs.flip({
		direction	: dir,
		speed		: 400,
		onBefore	: function(){
			//the new thumb is set here
			var content	= '';
			content		+='';
			$tf_thumbs.html(content);
		}
	});

	//we get the next image
	var $tf_bg_img_next	= $tf_bg_images.eq(current),
	//its dimentions
	dim				= getImageDim($tf_bg_img_next),
	//the top should be one that makes the image out of the viewport
	//the image should be positioned up or down depending on the direction
	top	= (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';

	//set the returned values and show the next image
	$tf_bg_img_next.css({
		width	: dim.width,
		height	: dim.height,
		left	: dim.left,
		top		: top
	}).show();

	//now slide it to the viewport
	$tf_bg_img_next.stop().animate({
		top 	: dim.top
	},1000);

	//we want the old image to slide in the same direction, out of the viewport
	var slideTo	= (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
	$tf_bg_img.stop().animate({
		top 	: slideTo
	},1000,function(){
		//hide it
		$(this).hide();
		//the $tf_bg_img is now the shown image
		$tf_bg_img	= $tf_bg_img_next;
		//show the description for the new image
		$tf_content_wrapper.children()
		.eq(current)
		.show();
	});
	//hide the current description
	$tf_content_wrapper.children(':visible')
	.hide()

}

The resize function will animate the image to a screen fitting size:

function resize($img){
	var w_w	= $(window).width(),
	w_h	= $(window).height(),
	i_w	= $img.width(),
	i_h	= $img.height(),
	r_i	= i_h / i_w,
	new_w,new_h;

	if(i_w > i_h){
		new_w	= w_w;
		new_h	= w_w * r_i;

		if(new_h > w_h){
			new_h	= w_h;
			new_w	= w_h / r_i;
		}
	}
	else{
		new_h	= w_w * r_i;
		new_w	= w_w;
	}

	$img.animate({
		width	: new_w + 'px',
		height	: new_h + 'px',
		top		: '0px',
		left	: '0px'
	},350);
}

The last function will give us the dimensions of an image and its correct positioning:

function getImageDim($img){
	var w_w	= $(window).width(),
	w_h	= $(window).height(),
	r_w	= w_h / w_w,
	i_w	= $img.width(),
	i_h	= $img.height(),
	r_i	= i_h / i_w,
	new_w,new_h,
	new_left,new_top;

	if(r_w > r_i){
		new_h	= w_h;
		new_w	= w_h / r_i;
	}
	else{
		new_h	= w_w * r_i;
		new_w	= w_w;
	}

	return {
		width	: new_w + 'px',
		height	: new_h + 'px',
		left	: (w_w - new_w) / 2 + 'px',
		top		: (w_h - new_h) / 2 + 'px'
	};
}

And that was all the jQuery. Now, we want to embed some fonts. For that we will include the following references in the head of our HTML:

And that’s all! We hope you enjoyed the tutorial and learning something new today!

View demo Download source

3D Wall Gallery

Mary Lou — Wed, 02 Feb 2011 12:41:37 +0000

View demo Download source

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.

For seeing the 3D effect, please try the demo in Safari.

Summarized, you can do the following things in this gallery:

Hover an image to see a description
Slide through the images using the jQuery UI Slider at the top
Use the mouse wheel to scroll through the images
Use the thumbnail previewer at the bottom to choose an image
Use the hash anchor for the image in the URL to get to it directly
Click on an image to slide it to the left (notice the hash anchor in the URL)
Turn it into a 3D wall when scrolling/sliding (Safari users)
Flipping the perspective when changing the slide/scroll direction (Safari users)

We are using the jQuery hash change plugin by Ben Alman:
jQuery Hashchange Plugin

And we are also using the jQuery Mousewheel Plugin by Brandon Aaron:
jQuery Mousewheel Plugin

The beautiful photography is by Alan Antiporda from Illusive Photography and you can find his Flickr Photostream here: Illusive Photography Photostream

When viewed in the Safari browser, you will see the perspective happening while scrolling or sliding. When changing the direction of scrolling, you will notice that the perspective will tilt to the other side.

You can navigate through the images by either using the jQuery UI slider at the top or your mousewheel.

You can also use the thumbnails previewer to click on an image and get to it directly.

When hovering over an image you can see a little description at the top.

We hope that you enjoy our little experiment and find it useful!

View demo Download source