From The Mad Lab – A CSS3 & jQuery based Japanese Paper Fan Image Gallery « HBird's Internet Developer's Resource Blog

From The Mad Lab – A CSS3 & jQuery based Japanese Paper Fan Image Gallery

HB Admin | Mad Lab | 3 Comments

Tags: css, css3, demo, free code, gallery, javascript, jquery

We are back with another issue of the “The Mad Lab” posts. And this time we are mixing CSS3 with a little bit of jQuery to cook up a Japanese fan like image gallery with a zoom out to original size on clicking each items in the gallery.

As usual with the concept of “The Mad Lab” posts we are experimenting with CSS and JavaScript and are presenting our readers with a solution that may not be practical in any manner. But they can tinker with the solutions here to make it useful and practical for their own personal use.

In this edition of “The Mad Lab” post we are going to build a bit unusual form of image gallery – An image gallery that is going to resemble an unfurled Japanese Fan and that too with provision to accommodate varying numbers of images in the gallery.

We are going to use the CSS transforms for making the images to get arranged in an unfurled fan like arrangement and are going to use jQuery for calculating the angles for each of the images in the gallery and making the gallery a bit dynamic in accommodating any number of images.

So here is the Japanese Fan Gallery

The goal of this session is to build a gallery of images arranged in an unfurled fan like arrangement as given in the screenshot below:

If you want to take a sneak peek at this gallery now, then use the demo given below.

In this edition of the “Mad Lab” we are going to take the concept of the content gallery that we created in the previous issue for the imaginary back issues store for the Discover magazine and are going to present the magazine covers in an unfurled fan like arrangement.

So without any further waiting let’s get cracking.

Step 1 – The HTML Mark-up

First things First! Let’s create the mark-up for this image gallery as the initial step.

<html>
<head>
<meta charset="utf-8">
<title>The CSS3 Image Gallery</title>
</head>
<body>
<div id="container">
<ul id="gallery">
<li> <img src="./gallery/1.jpg" align="left"></li>
<li> <img src="./gallery/2.jpg" align="left"></li>
<li> <img src="./gallery/3.jpg" align="left"></li>
<li> <img src="./gallery/4.jpg" align="left"></li>
<li> <img src="./gallery/5.jpg" align="left"></li>
<li> <img src="./gallery/6.jpg" align="left"></li>
<li> <img src="./gallery/7.jpg" align="left"></li>
<li> <img src="./gallery/8.jpg" align="left"></li>
<li> <img src="./gallery/9.jpg" align="left"></li>
<li> <img src="./gallery/10.jpg" align="left"></li>
<li> <img src="./gallery/1.jpg" align="left"></li>
<li> <img src="./gallery/8.jpg" align="left"></li>
<li> <img src="./gallery/9.jpg" align="left"></li>
<li> <img src="./gallery/10.jpg" align="left"></li>
<li> <img src="./gallery/1.jpg" align="left"></li>
</ul>
<div id="cutout">
The Japanese Fan Gallery
</div>
</div>
<div id="msg">The Japanese Fan Gallery - A little bit of jQuery blended with CSS3</div>
<div id="footer">
<h2>The CSS3 Japanese Fan Gallery - by the labs of <a href="http://www.hbirddesigns.com">Humming Bird Media</a></h2>
</div>
</body>
</html>

This is our basic mark-up for the image gallery. And it will result in a page like the screen-shot given below, which looks pretty mundane.

Step 2 – Basic CSS

Now we are going to add some basic CSS declarations

*
{
	margin:0;
	padding:0;
}
body
{
	text-align:center;background-image:url('bg.jpg');
}
#container
{
	width:900px;
	height:550px;
	border:10px solid #ccc;
	border-top:3px solid #333;
	border-right:3px solid #333;
	border-left:3px solid #333;
	border-bottom:3px solid #333;
	margin:0 auto;
	background-image:url('wood.jpg');
	margin-top:25px;
}
ul#gallery
{
	width:100%;
	z-index:1;
	list-style-type:none;
	margin-left:150px;
}
ul#gallery li
{
	background-image:url('paper.gif');
	padding:0;
	list-style:none;
	z-index:1!important;
	text-align:left;
	font-family:"Kaufmann";font-size:17px;color:#333;
	word-wrap:break-word;
	padding:15px;
	height:300px;width:229px;
	position:absolute;
}

With this piece of CSS our gallery will resemble the screen given below.

Step 3 – Adding Basic CSS Transforms

Now each of the images in the gallery declared inside list items are stacked one atop the other using an absolute positioning declaration. Now we are going to add some CSS transitions and transform for each of these list items. We are setting up a scale transform to make the gallery items show up as thumbnails. We are also adjusting the origin points of transforms for each list item using the transform-origin CSS3 declaration. This makes the images in the gallery will have their bottom left corners aligned nicely together when later arranged in an unfurled fan like arrangement. So for each list item add these too:

-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transform-origin:10px bottom;
	-moz-transform-origin:10px bottom;
	-o-transform-origin:10px bottom;
	transform-origin:10px bottom;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);

At this point we are adding some more style declarations for making the page elements look a bit more spicy. The whole CSS will then look:

@font-face
{
	font-family:'Kaufmann';
	src:url(./Tt0726m_.ttf);
}
@font-face
{
	font-family:'Copperplate';
	src:url(./COPGOTHB.ttf);
}
*
{
	margin:0;
	padding:0;
}
body
{
	text-align:center;background-image:url('bg.jpg');
}
#container
{
	width:900px;
	height:550px;
	border:10px solid #ccc;
	border-top:3px solid #333;
	border-right:3px solid #333;
	border-left:3px solid #333;
	border-bottom:3px solid #333;
	margin:0 auto;
	background-image:url('wood.jpg');
	margin-top:25px;
}
ul#gallery
{
	width:100%;
	z-index:1;
	list-style-type:none;
	margin-left:150px;
}
ul#gallery li
{
	background-image:url('paper.gif');
	padding:0;
	list-style:none;
	z-index:1!important;
	text-align:left;
	font-family:"Kaufmann";font-size:17px;color:#333;
	word-wrap:break-word;
	padding:15px;
	height:300px;width:229px;
	position:absolute;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transform-origin:10px bottom;
	-moz-transform-origin:10px bottom;
	-o-transform-origin:10px bottom;
	transform-origin:10px bottom;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
}
ul#gallery li:hover
{
z-index:999!important;
cursor:pointer;
}
h1
{
	font-family:"Kaufmann";
	font-size:45px;
	color:#ccc;
	text-shadow:0px 1px #777;
	margin-top:10px;
}
#msg
{
	clear:both;
	font-family:"Kaufmann";
	font-size:25px;
}
#footer
{
	margin-top:20px;
	font-family:"Kaufmann";
	font-size:17px;color:pink;
}
#footer h2
{
	font-family:"Copperplate";
	font-size:13px;
	color:pink;
	text-shadow:0px 1px #666;
	margin-top:10px;
}
#cutout{
font-family:"Copperplate";
font-size:105px;
position:relative;
top:55px;
left:380px;
width:350px;
text-shadow:1px 1px 20px #fff;
color:rgba(255,255,255,.20);
}

The page now looks nice. And our gallery is all arranged stack together in to a single heap of images. Now it is the time to unfurl them and spread them out in to an arrangement to resemble a fan.

Step 4 – Making the gallery items unfurl by rotating them

For this we are going to use the rotate CSS3 transfrom to make the images arranged with slightly increasing angles to make them displayed like an unfolded paper fan. We could have used slightly different rotate tranform declarations for each list item in the style sheet themselves, but that would have resulted in the gallery being static and not automatic in calculating the angles for each items. So we are going to use a bit of javascript to add this functionality.

So in order to do this we are adding the jQuery library in to our page.

<script type="text/JavaScript" src="jquery-1.4.1.min.js"></script>

Now we are going to add a slightly different rotate transform CSS declaration to each list items in the gallery using the power of jQuery . And we are also going to attach a toggle click event handler to make the gallery item popout to show in original size and to shrink back on alternate clicks on each gallery items.

The jQuery Code will be:

$(document).ready(function() {
//Get the number of items in the gallery
galItems = $('#gallery li').size();

//We are using a starting rotational degree -for the first item in the gallery
//and a range of degrees up to which the elements in gallery will be rotated
rangeDegree = 100;
startDegree = -50;

//Calculate the rotational angle for each item - will be auto calculated based on the number of gallery items
peritemDeg = Math.ceil(rangeDegree/galItems);
currentDeg = startDegree;

for(i=0;i<galItems;i++)
	{
	//We are going to make a CSS declaration value like - scale(0.5) rotate(-50deg) -
	//here values for the degrees will be incremented based on the angle of degree that we got for each item
	str = '"scale(0.5) rotate('+currentDeg+'deg)"';

	//Apply that css value to the css declaration, since we want it to be cross browser we are using vendor specific styles too
	$('#gallery li:eq('+i+')').css("-webkit-transform",eval(str));
	$('#gallery li:eq('+i+')').css("-o-transform",eval(str));
	$('#gallery li:eq('+i+')').css("-moz-transform",eval(str));
	$('#gallery li:eq('+i+')').css("transform",eval(str));

	//Now Set Event Handlers for each item
	$('#gallery li:eq('+i+')').toggle(function(){

		//Make the image move out and show up as big using translate css transform
		$(this).stop(true).css('z-index','9999');
		$(this).stop(true).css('-o-transform','translate(400px,130px)');
		$(this).stop(true).css('-webkit-transform','translate(400px,130px)');
		$(this).stop(true).css('-moz-transform','translate(400px,130px)');
		$(this).stop(true).css('transform','translate(400px,130px)');
	},function(){
		//Move the item back to its position in the fan arrangement
		//Recalculate it's rotation angle using its position in stack and the permited rotation angle for each item
		cval = peritemDeg * $('#gallery li').index(this);
		cval = startDegree + cval;

		//Apply that recalculated rotation angle along with a negative half scale factor to make the image go back to the fan
		str = '"scale(0.5) rotate('+cval+'deg)"';
		$(this).stop(true).css('z-index','1!important');
		$(this).stop(true).css("-o-transform",eval(str));
		$(this).stop(true).css("-moz-transform",eval(str));
		$(this).stop(true).css("-webkit-transform",eval(str));
		$(this).stop(true).css("transform",eval(str));
	});

	//Permited roration angle for next item
	currentDeg = currentDeg + peritemDeg;
	}
});

The code is pretty self explanatory as we have sprinkled it with comments. We are using jQuery to find the number of items in the gallery and then using a starting and maximum rotational degree declarations we are calculating the allowable rotational angle for each of the items to make them spread inside the range of degrees declared by us. Now using the looping feature of jQuery we are taking each of the items in the gallery and are applying a rotation CSS3 transform declaration.

We are also adding a toggle event handler to make the images popout to a fixed co-ordinate using the translate transform. In the second part of the toggle we are making the item go back to its original place in the fan arrangement by recalculating its rotational angle with in the range and reapplying it with a rotation and 0.5 scale transform.

Now you can see the gallery in all its glory.

Conclusion

That’s it. That brings us to an end to our third experiment on “The Mad Lab”. This lab session was meant to take a deep look at the CSS3 transforms and we have seen the rotational, scaling and translational transforms in action here. We will be back with more JavaScript, CSS and HTML crazy ideas in the upcoming editions of this corner.

This entry was posted on Thursday, September 15th, 2011 at 11:28 am and is filed under Mad Lab. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.