View demo Download source

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

The Markup

The structure of markup is very simple and intuitive. Create a container that will have our image and all the other infomation.

Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. (For some examples, we’ll need to add the mask element as a separate element and wrap the description in a devi with class content.)

<div class="view">
     <img src="image.gif" />
     <div class="mask">
     <h2>Title</h2>
     <p>Your Text</p>
         <a href="#" class="info">Read More</a>
     </div>
</div>

The CSS

After creating our markup we’re going to set our style.
We set the general rules for our class and then we are going to add a special class with the desired effect styles. We will omit the CSS3 vendor prefixes when showing the style.

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

And now we’ll look at the ten effects.

Example 1

Add the special class view-first to the element with the class view for this effect. We will be adding a special class to each example’s view element (view-first, view-second, view-third, etc.).

<div class="view view-first">
     
</div>

In this first example we will just use some basic transitions to create a nice hover effect.

.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
	transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
	transition: all 0.2s ease-in-out;
}

And now comes the heart of our effect. When you move the mouse over the image, we can use the delay property to emulate simple animations. The transition-delay that we use in the hover class can be altered, to be differnt than the one in the normal class. In this example we did not use any delay in the normal class; but we added a delay on hover, which will make the transition start a bit later. Moving the mouse out, the default value of 0s will apply and the “reverse” will be quicker.

.view-first:hover img {
	transform: scale(1.1);
}
.view-first:hover .mask {
	opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

Example 2

In this second example we will add the special class view-second, but we will leave the element with the class mask empty and wrap the description in a div with the class content

<div class="view view-second">
	<img src="images/5.jpg" />
	<div class="mask"></div>
	<div class="content">
		<h2>Hover Style #2</h2>
		<p>Some description</p>
		<a href="#" class="info">Read More</a>
	</div>
</div>

Here the mask class will have different attributes to satisfy our effect, in fact we are going to apply the transform property (translate and rotate) and will make a square out of it. The description elements will be translated, i.e. moved so that we can slide them in on hover:

.view-second img {
	transition: all 0.2s ease-in;
}
.view-second .mask {
	background-color: rgba(115,146,184, 0.7);
	width: 300px;
    padding: 60px;
	height: 300px;
	opacity: 0;
	transform: translate(265px, 145px) rotate(45deg);
	transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(200px, -200px);
	transition: all 0.2s ease-in-out;
}
.view-second p {
	transform: translate(-200px, 200px);
	transition: all 0.2s ease-in-out;
}
.view-second a.info {
    transform: translate(0px, 100px);
	transition: all 0.2s 0.1s ease-in-out;
}

For our hover effect we exploit the translate transformation in order to move our elements in place. The mask will also be rotated. The elements of the description will each come with a little delay:

.view-second:hover .mask {
	opacity:1;
	transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
	transform: translate(0px,0px);
	transition-delay: 0.3s;
}
.view-second:hover p {
    transform: translate(0px,0px);
	transition-delay: 0.4s;
}
.view-second:hover a.info {
	transform: translate(0px,0px);
	transition-delay: 0.5s;
}

Example 3

In this third example we will use the translate and rotate transforms to bring up our content:

.view-third img {
    transition: all 0.2s ease-in;
}
.view-third .mask {
	background-color: rgba(0,0,0,0.6);
	opacity: 0;
	transform: translate(460px, -100px) rotate(180deg);
	transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
	transform: translateY(-100px);
	transition: all 0.2s ease-in-out;
}
.view-third p {
	transform: translateX(300px) rotate(90deg);
	transition: all 0.2s ease-in-out;
}
.view-third a.info {
	transform: translateY(-200px);
	transition: all 0.2s ease-in-out;
}

These are the simple instructions that are applied on hover. Now we will reverse the appearing of the description elements by setting the transition-delay accordingly:

.view-third:hover .mask {
	opacity:1;
	transition-delay: 0s;
	transform: translate(0px, 0px);
}
.view-third:hover h2 {
	transform: translateY(0px);
	transition-delay: 0.5s;
}
.view-third:hover p	{
    transform: translateX(0px) rotate(0deg);
	transition-delay: 0.4s;
}
.view-third:hover a.info {
	transform: translateY(0px);
	transition-delay: 0.3s;
}

Example 4

Here in the fourth example we will perform a simple zoom out image and a zoom in of our content with rotation, all thanks to the scale transform. We set the transition-delay to 0.2s for the image style, but on hover we’ll say that it’s 0s. This will make it start immediately on hover, but delay it on mouse out.

.view-fourth img {
	transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
}
.view-fourth .mask {
	background-color: rgba(0,0,0,0.8);
	opacity: 0;
	transform: scale(0) rotate(-180deg);
	transition: all 0.4s ease-in;
    border-radius: 0px;
}
.view-fourth h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
	transition: all 0.5s ease-in-out;
}
.view-fourth p {
	opacity: 0;
	transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
    opacity: 0;
	transition: all 0.5s ease-in-out;
}

These are the simple instructions to get the effect – with CSS3 you can do everything :)

.view-fourth:hover .mask {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	transition-delay: 0.2s;
}
.view-fourth:hover img 	  {
	transform: scale(0);
    opacity: 0;
	transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

Example 5

In this fifth example we will use the translate property along with the transition-timing-function ease-in-out in order to slide the content in from the left.

.view-fifth img {
	transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
	background-color: rgba(146,96,91,0.3);
	transform: translateX(-300px);
	opacity: 1;
	transition: all 0.4s ease-in-out;
}
.view-fifth h2{
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}

The hover effect will make the image slide to the right and the description come from the left, as if it’s pushing the image:

.view-fifth:hover .mask {
	transform: translateX(0px);
}
.view-fifth:hover img {
	transform: translateX(300px);
	transition-delay: 0.1s;
}
.view-fifth:hover p{
    opacity: 1;
    transition-delay: 0.4s;
}

Example 6

In this example we will make the description come from the front, zooming out until its original size (scale from factor 10 to 1). The info button will slide in from the bottom (translate).

.view-sixth img {
	transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
	background-color: rgba(146,96,91,0.5);
	opacity:0;
	transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
	opacity:0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
	opacity:0;
    transform: scale(10);
	transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
	opacity:0;
    transform: translateY(100px);
	transition: all 0.3s ease-in-out 0.1s;
}

The reverse transition will be delayed in such a way that it looks smooth:

.view-sixth:hover .mask {
	opacity:1;
	transition-delay: 0s;
}
.view-sixth:hover img {
	transition-delay: 0s;
}
.view-sixth:hover h2 {
	opacity: 1;
    transform: scale(1);
	transition-delay: 0.1s;
}
.view-sixth:hover p {
	opacity:1;
    transform: scale(1);
	transition-delay: 0.2s;
}
.view-sixth:hover a.info {
	opacity:1;
    transform: translateY(0px);
	transition-delay: 0.3s;
}

Example 7

In this seventh example the idea is to rotate the image to the center and scale it down. Then the description comes rotating from up with the description content following.

.view-seventh img{
    transition: all 0.5s ease-out;
	opacity: 1;
}
.view-seventh .mask {
	background-color: rgba(77,44,35,0.5);
    transform: rotate(0deg) scale(1);
	opacity: 0;
	transition: all 0.3s ease-out;
    transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
    transform: translateY(-200px);
	transition: all 0.2s ease-in-out;
}
.view-seventh p {
    transform: translateY(-200px);
	transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
    transform: translateY(-200px);
	transition:  all 0.2s ease-in-out;
}

On hover we add a delay for the desciption elements. This will show us the rotating image first and then the description will come into the picture. In the reverse transition, everything will disappear immediately and we’ll see the image rotate back:

.view-seventh:hover img{
    transform: rotate(720deg) scale(0);
	opacity: 0;
}
.view-seventh:hover .mask {
	opacity: 1;
    transform: translateY(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.view-seventh:hover h2 {
    transform: translateY(0px);
	transition-delay: 0.7s;
}
.view-seventh:hover p {
	transform: translateY(0px);
	transition-delay: 0.6s;
}
.view-seventh:hover a.info {
    transform: translateY(0px);
	transition-delay: 0.5s;
}

Example 8

In this eighth example we’ll use an animation and recreate a bounce effect. The description will bounce in from the top.

.view-eighth .mask {
	background-color: rgba(255, 255, 255, 0.7);
	top: -200px;
	opacity: 0;
	transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
    transform: translateY(-200px);
	transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
    color: #333;
    transform: translateY(-200px);
	transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
    transform: translateY(-200px);
	transition:  all 0.2s ease-in-out 0.3s;
}

We’ll add the animation to the mask element and define some fitting delays for the onset of the description elements:

.view-eighth:hover .mask {
	opacity: 1;
	top: 0px;
	transition-delay: 0s;
    animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
    transform: translateY(0px);
	transition-delay: 0.4s;
}
.view-eighth:hover p {
	transform: translateY(0px);
	transition-delay: 0.2s;
}
.view-eighth:hover a.info {
    transform: translateY(0px);
	transition-delay: 0s;
}

To recreate a true bounce effect we use the translateY, as you can see there are a couple of frames, in order to make the effect:

@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}

Example 9

In this example, we will use two mask elements to slide them in from the bottom right and the top left:

<div class="view view-ninth">
	<img src="images/11.jpg" />
	<div class="mask mask-1"></div>
	<div class="mask mask-2"></div>
	<div class="content">
		<h2>Hover Style #9</h2>
		<p>Some Text</p>
		<a href="#" class="info">Read More</a>
	</div>
</div>

The two masks will have a different translation and a transfrom origin. Also, we’ll set one to be aligned at the top and the other at the bottom:

.view-ninth .mask-1,
.view-ninth .mask-2{
	background-color: rgba(0,0,0,0.5);
    height: 361px;
    width: 361px;
	background: rgba(119,0,36,0.5);
	opacity: 1;
    transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
    left: auto;
    right: 0px;
    transform: rotate(56.5deg) translateX(-180px);
    transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
    top: auto;
    bottom: 0px;
    transform: rotate(56.5deg) translateX(180px);
    transform-origin: 0% 100%;
}

The content will be styled in a way that it looks like as if it’s coming out as a tiny slice through the touching edges of the two masks:

.view-ninth .content{
    background: rgba(0,0,0,0.9);
    height: 0px;
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    transform: rotate(-33.5deg) translate(-112px,166px);
    transform-origin: 0% 100%;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
    display: none;
}

On hover, we’ll make the content come out from the slot and make the masks touch at their edges:

.view-ninth:hover .content{
    height: 120px;
    width: 300px;
    opacity: 0.9;
    top: 40px;
    transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
	transition-delay: 0s;
}
.view-ninth:hover .mask-1{
    transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    transform: rotate(56.5deg) translateX(-1px);
}

We are setting the transition-delay for the masks in such a way, that when we hover, the transition happens instantly. But when moving out with the mouse, the delay will be longer, as if its “waiting” for the content to move back into the slot.

Example 10

In the last example, we will zoom in the image and make it fade out while bringing the descpription to the front. We can do that by using the scale transform and setting the opacity level:

.view-tenth img {
	transform: scaleY(1);
	transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
    background-color: rgba(255, 231, 179, 0.3);
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth a.info {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

On hover, we’ll simply scale the image up and fade it out by decreasing its opacity to 0:

.view-tenth:hover img {
	transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask {
	opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
    transform: scale(1);
    opacity: 1;
}

Conclusion

CSS3 has a really great potential for creating nice effects. Soon, we’ll hopefully be able to avoid the use of JavaScript for simple effects and rely 100% on CSS, in all browsers.
I hope that you liked these experiments, but above all I hope that they can inspire you for your projects.

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:

<div id="tf_loading" class="tf_loading"></div>

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

<div id="tf_bg" class="tf_bg">
	<img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" />
	<img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/>
	<img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/>
	<img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/>
	<img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/>
	<img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/>
	<div class="tf_pattern"></div>
</div>

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.

<div id="tf_content_wrapper" class="tf_content_wrapper">
	<div class="tf_content" id="content1" style="display:block;">
		<h2>Dreamer</h2>
		<p>Far far away, behind the word mountains, ... </p>
	</div>
	<div class="tf_content" id="content2">
		...
	</div>
	...
</div>

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:

<div id="tf_thumbs" class="tf_thumbs">
	<span id="tf_zoom" class="tf_zoom"></span>
	<img src="images/thumbs/1.jpg" alt="Thumb1"/>
</div>

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:

<div id="tf_next" class="tf_next"></div>
<div id="tf_prev" class="tf_prev"></div>

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:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>

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);
			$('<img/>').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		+='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
			$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:

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />

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

View demoDownload source

View demoDownload source

In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.

The scrolling functionality of the thumbnails bar is based on the great tutorial by Andrew Valums: Horizontal Scrolling Menu made with CSS and jQuery.
Additionally, we will be using PHP to get the images and thumbs automatically from the folder structure. The folders will contain album sub-folders and we will add a select option to the gallery which allows to choose an album.

Just like in the Sliding Panel Photo Wall Gallery with jQuery we will be using a resize function for the image displayed.

We will also add an XML file that (optionally) contains the descriptions of the images.

Another neat functionality that we are going to add is the changing cursor: depending in which mode and in which position of the full image we are, the cursor will change to a left or right arrow (for browsing the pictures), or to a plus or minus sign (for zooming in or out).

The beautiful images in the demo are from the Models 1 – Photoshoots album from Vincent Boiteau’s photostream on Flickr.

We also have a static version of the image gallery without the album option. You can find the demo link and the ZIP file in the end of this post.

And don’t forget to check out the tutorial of the  mobile version of this gallery: Awesome Mobile Image Gallery Web App

So, let’s start!

The Folder Structure

Today we will start this tutorial by the folder structure since it is important for our PHP functionality.

The necessary folders for the PHP to work are the images folder and the thumbs folder. They both need to be located in the root folder (where you will have the index.php file).

Whatever album sub-folder will be in the thumbs folder, also needs to be in the images folder. So, if we have thumbs/album1/22.jpg we also need images/album1/22.jpg which will be the full-size image.

With that organization we will be able to automatically display the album thumbnails and create a select box for all albums.

In each album folder of the thumbs we will also have an XML file with the descriptions for the images. We will call that file desc.xml. Adding the description for images is not obligatory, i.e. we will just read the ones that are there. The structure of the XML file will be the following:

<descriptions>
	<image>
		<name>1.jpg</name>
		<text>This is a nice description</text>
	</image>
	<image>
		<name>2.jpg</name>
		<text>red!</text>
	</image>
	<image>
		<name>3.jpg</name>
		<text>another one...</text>
	</image>
	...
</descriptions>

It is important that we name the images in the name tag correctly.
And also, make sure not to have any other files lying around in those folders.

The Markup and PHP

Let’s take a look at the HTML and also the PHP. We have a simple structure that will be dynamically “filled” by our PHP and JavaScript code:

<div class="albumbar">
	<span>Vincent Boiteau's photostream</span>
	<div id="albumSelect" class="albumSelect">
		<ul>
			<!-- We will dynamically generate the items -->
			<?php
				$firstAlbum = '';
				$i=0;
				if(file_exists('images')) {
					$files = array_slice(scandir('images'), 2);
					if(count($files)) {
						natcasesort($files);
						foreach($files as $file) {
							if($file != '.' && $file != '..') {
								if($i===0)
									$firstAlbum = $file;
								else
									echo "<li><a>$file</a></li>";
								++$i;
							}
						}
					}
				}
			?>
		</ul>
		<div class="title down">
			<?php echo $firstAlbum;?>
		</div>
	</div>
</div>
<div id="loading"></div>
<div id="preview">
	<div id="imageWrapper">
	</div>
</div>
<div id="thumbsWrapper">
</div>
<div class="infobar">
	<span id="description"></span>
</div>

The select box items get generated dynamically: we check the sub-folders in the images folder and put all the names in our items. The first album will be “selected” by default.

When we click on one of the items we will call the thumbs.php (inside the ajax folder) from within the JavaScript. We will get back an array (JSON) with all the information that we need to build our thumbnails. Let’s look at that PHP code first and later we will go through the JS:

$album 		= $_GET['album'];
$imagesArr	= array();
$i		= 0;

/* read the descriptions xml file */
if(file_exists('../thumbs/'.$album.'/desc.xml')) {
    $xml = simplexml_load_file('../thumbs/'.$album.'/desc.xml');
}
/* read the images from the album and get the
 * description from the XML file:
 */
if(file_exists('../thumbs/'.$album)) {
    $files = array_slice(scandir('../thumbs/'.$album), 2);
    if(count($files)) {
        foreach($files as $file) {
            if($file != '.' && $file != '..' &&  $file!='desc.xml') {
                if($xml) {
                    $desc = $xml->xpath('image[name="'.$file.'"]/text');
                    $description = $desc[0];
                    if($description=='')
                        $description = '';
                }
                $imagesArr[] = array('src' => 'thumbs/'.$album.'/'.$file,
                    'alt'	=> 'images/'.$album.'/'.$file,
                    'desc'	=> $description);
            }
        }
    }
}
$json 		= $imagesArr;
$encoded 	= json_encode($json);
echo $encoded;
unset($encoded);

So, we basically get all the thumbnails of the requested album and prepare the information for each img element. The final element that we will then add to our HTML will contain an alt attribute with the full image location as value and a title attribute with the description of the regarding picture as value. The description of the image is taken from the XML file we mentioned before. With an xpath expression we get to the node “name” that contains the image name and then we get the text of the description. In the JS we will then say that the description should be the value of the “title” attribute.

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

The CSS

First, we will add some default styling to the body:

body{
    font-family:Verdana;
    text-transform:uppercase;
    color:#fff;
    font-size:10px;
    overflow:hidden;
    background-color:#f9f9f9;
}

The current background color will be almost white but you can try other colors, it looks really wonderful with some!

Let’s style the album bar for the title of the page:

.albumbar{
    height:24px;
    line-height:24px;
    text-align:center;
    position:fixed;
    background-color:#000;
    left:0px;
    width:100%;
    top:0px;
    -moz-box-shadow:-2px 0px 4px #333;
    -webkit-box-shadow:-2px 0px 4px #333;
    box-shadow:-2px 0px 4px #333;
    z-index:11;
}

And also the info bar which will contain the description of each image:

.infobar{
    height:22px;
    line-height:22px;
    text-align:center;
    position:fixed;
    background-color:#000;
    left:0px;
    width:100%;
    bottom:0px;
    -moz-box-shadow:0px -1px 2px #000;
    -webkit-box-shadow:0px -1px 2px #000;
    box-shadow:0px -1px 2px #000;
}
span#description, .albumbar span{
    text-shadow:0px 0px 1px #fff;
    color:#fff;
}
.albumbar span a{
    color:#aaa;
    text-decoration:none;
}
.albumbar span a:hover{
    color:#ddd;
}

The info bar and the album bar will be fixed and located at the top and bottom of the page.
The select box and the inner list will be styled as follows:

.albumSelect{
    height:18px;
    line-height:18px;
    position:absolute;
    right:5px;
    top:2px;
    width:120px;
}
.albumSelect .title{
    color:#f0f0f0;
    z-index:10;
    border:1px solid #444;
    background-color:#555;
    background-repeat:no-repeat;
    background-position:90% 50%;
    cursor:pointer;
    text-align:left;
    text-indent:10px;
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
}

The title div will have a little triangle as background image. We define two classes, up and down, that we will then set dynamically depending on if the album list is expanded or not:

.down{
    background-image:url(../icons/down.png);
}
.up{
    background-image:url(../icons/up.png);
}

The unordered list with all the albums will be styled as follows:

.albumSelect ul {
    list-style:none;
    display:none;
    padding:0px;
    width:100%;
    border:1px solid #444;
    background-color:#555;
    margin:22px 0px 0px 0px;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
}
.albumSelect ul li a{
    text-decoration:none;
    cursor:pointer;
    display:block;
    padding:3px 0px;
    color:#ccc;
}
.albumSelect ul li a:hover{
    background-color:#000;
    color:#fff;
}

The list is set to display:none in the beginning since we only want it to appear when the user clicks on the triangle to expand it.

The loading container will be set to appear at the center of the page, with just a little bit more to the top since we have the thumbnails bar appearing sometimes. Setting top to 40% gives us what we need:

#loading{
    display:none;
    width:50px;
    height:50px;
    position:absolute;
    top:40%;
    left:50%;
    margin-left:-24px;
    background:transparent url(../icons/loading.gif) no-repeat top left;
}

To make the thumbs bar scrollable by moving the mouse we need to give it a special style. The thumbsWrapper will be positioned absolutely and occupy the width of the window. We set the vertical overflow to hidden because we don’t want any scroll bar to appear on the right.
The horizontal overflow will be managed in the JavaScript (it will be hidden).

#thumbsWrapper{
    position: absolute;
    width:100%;
    height:102px;
    overflow-y:hidden;
    background-color:#000;
    bottom:0px;
    left:0px;
    border-top:2px solid #000;
}

The thumbsContainer will be the inner div that will have a width equal to the sum of all the thumbnail widths. We will calculate the width dynamically in the JavaScript, so we don’t define it in the class:

#thumbsContainer{
    height:79px;
    display:block;
    margin: 0;
}

The thumbnail images will have the following style:

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

We give them a low opacity value since we want to add a hover effect.

The imageWrapper that contains the full image has the following style:

#imageWrapper{
    position:relative;
    text-align:center;
    padding-top:30px;
}

We add a top padding because we have the album bar at the top of the page. We don’t want the image to get hidden by it. The margin 0 auto will center the image horizontally:

#imageWrapper img{
    margin:0 auto;
    -moz-box-shadow:2px 2px 10px #111;
    -webkit-box-shadow:2px 2px 10px #111;
    box-shadow:2px 2px 10px #111;
}

We also create a neat box shadow for all modern browsers :)
Some of you might wonder why we set text-align center in the imageWrapper if we have the margin in the image. When we make things appear with the fadeIn function in jQuery, the display of the respective element becomes “block”. For that case our “margin:0 auto” will center the image. But for the case when we put the first image initially we need the inline centering property which is to give the parent “text-align:center”.

And finally, we define the classes for the different cursor types:

.cursorRight{
.cursorRight{
    cursor:url("../icons/next.cur"), url("icons/next.cur"), default;
}
.cursorLeft{
    cursor:url("../icons/prev.cur"), url("icons/prev.cur"),  default;
}
.cursorPlus{
    cursor:url("../icons/plus.cur"), url("icons/plus.cur"), default;
}
.cursorMinus{
    cursor:url("../icons/minus.cur"), url("icons/minus.cur"), default;
}

OK, this is basically a hack and not really nice, but the reason for this ugliness is the browsers’ handling. The first url is the path for FireFox, the second one is for IE and the default value needs to be there again for Firefox. Read more about custom cursors and cross-browser compatibility here.

Now, let’s get to the JavaScript.

The JavaScript

Let’s go step by step through the jQuery code. I will not follow the order like it is in the script but by the usage of the functions. I hope that it will be easier to understand like that.
In our $(function() { } we will add the following JavaScript:

/* name of the selected album, in the top right combo box */
    var album	= $('#albumSelect div').html();
    /* mode is small or expanded, depending on the picture size  */
    var mode = 'small';
    /* this is the index of the last clicked picture */
    var current = 0;

So, we will first declare some variables that we will need later and then we call:

 buildThumbs();

The buildThumbs() function is going to get the current album and generate the images with the accoring source and information:

function buildThumbs(){
	current=1;
	$('#imageWrapper').empty();
	$('#loading').show();
	$.get('ajax/thumbs.php?album='+album, function(data) {
		var countImages = data.length;
		var count = 0;
		var $tContainer = $('<div/>',{
			id	: 'thumbsContainer',
			style	: 'visibility:hidden;'
		})
		for(var i = 0; i < countImages; ++i){
			try{
				var description = data[i].desc[0];
			}catch(e){
				description='';
			}
			if(description==undefined)
				description='';
			$('<img title="'+description+'" alt="'+data[i].alt+'" height="75" />').load(function(){
				var $this = $(this);
				$tContainer.append($this);
				++count;
				if(count==1){
					/* load 1 image into container*/
					$('<img id="displayed" style="display:block;" class="cursorPlus"/>').load(function(){
						var $first = $(this);
						$('#loading').hide();
						resize($first,0);
						$('#imageWrapper').append($first);
						$('#description').html($this.attr('title'));
					}).attr('src',$this.attr('alt'));
				}
				if(count == countImages){
					$('#thumbsWrapper').empty().append($tContainer);
					thumbsDim($tContainer);
					makeScrollable($('#thumbsWrapper'),$tContainer,15);
				}
			}).attr('src',data[i].src);
		}
	},'json');
}

As we mentioned before, we will be using the thumbs.php file to get the info we need. When we are done building all the thumb images we append it to the thumbsWrapper and determine the size of the container with thumbsDim (line 36):

/* adjust the size (width) of the scrollable container
- this depends on all its images widths
*/
function thumbsDim($elem){
	var finalW = 0;
	$elem.find('img').each(function(i){
		var $img 		= $(this);
		finalW+=$img.width()+5;
	//plus 5 -> 4 margins + 1 to avoid rounded calculations
	});
	$elem.css('width',finalW+'px').css('visibility','visible');
}

Then we use makeScrollable (line 37) to make the thumbnail container scrollable by mouse move:

//Get our elements for faster access and set overlay width
function makeScrollable($wrapper, $container, contPadding){
	//Get menu width
	var divWidth = $wrapper.width();

	//Remove scrollbars
	$wrapper.css({
		overflow: 'hidden'
	});

	//Find last image container
	var lastLi = $container.find('img:last-child');
	$wrapper.scrollLeft(0);
	//When user move mouse over menu
	$wrapper.unbind('mousemove').bind('mousemove',function(e){

		//As images are loaded ul width increases,
		//so we recalculate it each time
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + contPadding;

		var left = (e.pageX - $wrapper.offset().left) * (ulWidth-divWidth) / divWidth;
		$wrapper.scrollLeft(left);
	});
}

The following function takes care of the click event on a thumbnail and also the hover event:

/*
clicking on a thumb loads the image
(alt attribute of the thumb is the source of the large image);
mouseover and mouseout for a nice spotlight hover effect
*/
$('#thumbsContainer img').live('click',function(){
	loadPhoto($(this),'cursorPlus');
}).live('mouseover',function(){
	var $this   = $(this);
	$this.stop().animate({
		'opacity':'1.0'
	},200);
}).live('mouseout',function(){
	var $this   = $(this);
	$this.stop().animate({
		'opacity':'0.4'
	},200);
});

When a thumbnail is clicked we call the function loadPhoto (and we also pass the current cursor mode):

/*
loads a picture into the imageWrapper
the image source is in the thumb's alt attribute
*/
function loadPhoto($thumb,cursorClass){
	current		= $thumb.index()+1;
	$('#imageWrapper').empty();
	$('#loading').show();
	$('<img id="displayed" title="'+$thumb.attr('title')+'" class="'+cursorClass+'" style="display:none;"/>').load(function(){
		var $this = $(this);
		$('#loading').hide();
		resize($this,0);
		if(!$('#imageWrapper').find('img').length){
                  $('#imageWrapper').append($this.fadeIn(1000));
                  $('#description').html($this.attr('title'));
            }
	}).attr('src',$thumb.attr('alt'));
}

When want to adapt the size of the picture when we resize the window:

/* when resizing the window resize the picture */
$(window).bind('resize', function() {
	resize($('#displayed'),0);
});

The resize function is defined as follows:

/* function to resize an image based on the windows width and height */
function resize($image, type){
	var widthMargin     = 10
	var heightMargin    = 0;
	if(mode=='expanded')
		heightMargin = 60;
	else if(mode=='small')
		heightMargin = 150;
	//type 1 is animate, type 0 is normal
	var windowH      = $(window).height()-heightMargin;
	var windowW      = $(window).width()-widthMargin;
	var theImage     = new Image();
	theImage.src     = $image.attr("src");
	var imgwidth     = theImage.width;
	var imgheight    = theImage.height;

	if((imgwidth > windowW)||(imgheight > windowH)){
		if(imgwidth > imgheight){
			var newwidth = windowW;
			var ratio = imgwidth / windowW;
			var newheight = imgheight / ratio;
			theImage.height = newheight;
			theImage.width= newwidth;
			if(newheight>windowH){
				var newnewheight = windowH;
				var newratio = newheight/windowH;
				var newnewwidth =newwidth/newratio;
				theImage.width = newnewwidth;
				theImage.height= newnewheight;
			}
		}
		else{
			var newheight = windowH;
			var ratio = imgheight / windowH;
			var newwidth = imgwidth / ratio;
			theImage.height = newheight;
			theImage.width= newwidth;
			if(newwidth>windowW){
				var newnewwidth = windowW;
				var newratio = newwidth/windowW;
				var newnewheight =newheight/newratio;
				theImage.height = newnewheight;
				theImage.width= newnewwidth;
			}
		}
	}
	if((type==1)&&(!$.browser.msie))
		$image.stop(true).animate({
			'width':theImage.width+'px',
			'height':theImage.height+'px'
			},1000);
	else
		$image.css({
			'width':theImage.width+'px',
			'height':theImage.height+'px'
			});
}

The heightMargin depends on the mode we are in: if the thumbnails bar is out, we have less space so we reduce the allowed height of the image.

The following functions take care of what happens when we select an album:

/* Album combo events to open, close,
and select an album from the combo
*/
$('#albumSelect div').bind('click',function(){
	var $this = $(this);
	if($this.is('.up'))
		closeAlbumCombo();
	else if($this.is('.down'))
		openAlbumCombo();
});
$('#albumSelect ul > li').bind('click',function(){
	var $this 	= $(this);
	album 		= $this.find('a').html();
	buildThumbs();
	var $combo = $('#albumSelect div');
	$this.find('a').html($combo.html());
	$combo.html(album);
	closeAlbumCombo();
	orderCombo($this.parent());
});

And these are the three functions taking care of our self made combo box:

//functions to control the albums combos
function closeAlbumCombo(){
	var $combo = $('#albumSelect div');
	$combo.addClass('down').removeClass('up');
	$combo.prev().hide();
}
function openAlbumCombo(){
	var $combo = $('#albumSelect div');
	$combo.addClass('up').removeClass('down');
	$combo.prev().show();
}
function orderCombo($ul){
	var items = $ul.find('li').get();
	items.sort(function(a,b){
		var keyA = $(a).text();
		var keyB = $(b).text();

		if (keyA < keyB) return -1;
		if (keyA > keyB) return 1;
		return 0;
	});
	$.each(items, function(i, li){
		$ul.append(li);
	});
}

Now we define what happens when we hover over the main image or when we click on it. Depending on where we hover over the image, we want a certain cursor to appear. For that we check where we are with the mouse and apply the regarding class to the image:

/*
when hovering the main image change the mouse icons (left,right,plus,minus)
also when clicking on the image, expand it or make it smaller depending on the mode
*/
$('#displayed').live('mousemove',function(e){
	var $this 	= $(this);
	var imageWidth 	= parseFloat($this.css('width'),10);

	var x = e.pageX - $this.offset().left;
	if(x<(imageWidth/3))
		$this.addClass('cursorLeft')
			 .removeClass('cursorPlus cursorRight cursorMinus');
	else if(x>(2*(imageWidth/3)))
		$this.addClass('cursorRight')
			 .removeClass('cursorPlus cursorLeft cursorMinus');
	else{
		if(mode=='expanded'){
			$this.addClass('cursorMinus')
				 .removeClass('cursorLeft cursorRight cursorPlus');
		}
		else if(mode=='small'){
			$this.addClass('cursorPlus')
				 .removeClass('cursorLeft cursorRight cursorMinus');
		}
	}
}).live('click',function(){
	var $this = $(this);
	if(mode=='expanded' && $this.is('.cursorMinus')){
		mode='small';
		$this.addClass('cursorPlus')
			 .removeClass('cursorLeft cursorRight cursorMinus');
		$('#thumbsWrapper').stop().animate({
			'bottom':'0px'
		},300);
		resize($this,1);
	}
	else if(mode=='small' && $this.is('.cursorPlus')){
		mode='expanded';
		$this.addClass('cursorMinus')
			 .removeClass('cursorLeft cursorRight cursorPlus');
		$('#thumbsWrapper').stop().animate({
			'bottom':'-85px'
		},300);
		resize($this,1);
	}
	else if($this.is('.cursorRight')){
		var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current+1)+')');
		if($thumb.length){
			++current;
			loadPhoto($thumb,'cursorRight');
		}
	}
	else if($this.is('.cursorLeft')){
		var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current-1)+')');
		if($thumb.length){
			--current;
			loadPhoto($thumb,'cursorLeft');
		}
	}
});

When we click on the image, we check which cursor we had, because like that we know which image we have to display next (i.e. the next or the previous one). Our “current” variable helps us keep track of which picture we are currently viewing.

And that’s it! I hope you enjoyed this gigantic tutorial!

Note that in this demo we don’t use very big images, so the “zoom in”/ resize will just show you the full image maximum and never resize the picture beyond its real dimensions. If you use very large images the effect will be a nice experience for users with a large screen.

View demoDownload source

We also have a static version of this photo gallery without the album functionality. Check out the static demo or download the ZIP file.

We created a mobile version of this gallery: Awesome Mobile Image Gallery Web App

1. uploadify
2. ad-gallery
3. class.upload.php

click on the image to see a demo

It’s easy to find a lot of good image galleries out there, a lot of upload scripts and thumbnail generators. But I found it hard to find one script that includes them all, so I decided to try to integrate them in one, which is actually what is interesting to have in a site. I basically put them together and added one or two functions to the whole thing, and added some Ajax script to load the pictures.
So now, besides being able to see the gallery, which is pretty cool by the way, you can upload multiple image files (for this demo just jpg and gif, although you can configure what you want) next to it and have them added to the gallery on the fly, after the upload is finished (you can click on “last uploads” in the demo to see the last images). If you don’t want that the images are loaded immediatly after you upload them, then just remove the onAllComplete option in the innitialization of the uploadify plugin, in index.html.
Because this is a demo I limited the pictures size that you can upload to 500kb, and you can just upload 5 at a time. Of course then you can configure this as you like.
For the thumbs and images generator, I use the class.upload.php script  (very nice work), and I call it in the file uploadify.php. There you can configure the way you want your pictures to be generated, both original and thumbnail (for example the sizes, the filenames, the maximum size, if you want that pictures with the same name are replaced …). For this script I generate a hash for the name of the files, which will be always different. You can change that if you want… Remember that the folder where the pictures are stored (images and images/thumbs) should have the right permissions in order for you to upload your files.

I would suggest that you take a look at the possible configurations for each one of the scripts that I used:

• for the class.upload.php here
• for the uploadify here
• for the ad-gallery here

see the DEMO

download source code here

You can find more jQuery Image Galleries here

If you have any suggestions for this script, or if you find some bugs please let me know.