Cinemagraph: 28 Still Photos With Subtle Motion

Cinemagraph: 28 Still Photos With Subtle Motion: "
So today we’re going to showcase animated GIF artwork but there are not the regular GIF we use on websites. These are beautiful twist from somehow nasty animated Gif artworks with the use of high quality photos from modern photography, and the pioneer, Jamie Beck and Kevin Burg called it – Cinemagraph.
(Image source: From Me To You)
Like what you’ve seen in most GIF animation, cinemagraph is a product of still photo with minor elements moving on. It’s nothing impressive on technique but what makes cinemagraph unique is it brings back certain part of the photo to life, thus making the entire photo more realistic, attractive and sometimes even thought-provoking, just like the magical newspaper from the movie Harry Potter.
Dozens of photographers have found this technique interesting, so do we. While they are making their first attempt on cinemagraph, we go on by collecting 28 quality, realistic and thought-provoking cinemagraphs for your enjoyment and inspiration and, be prepared to get impressed!

28 Inspiring Cinemagraphs

A Wonderful World. It’s still yet it’s moving, it’s silent yet it’s thought-provoking. It’s the beauty of cinemagraph. (Image source: From Me To You)

Can You Smell Them? I can’t really smell them, but I can feel that it’s hot and delicious! This is what cinemagraph can do, strengthens the expression of a photo. (Image source: From Me To You)

Cheers. Endless wine with endless elegance, achieved by cinemagraph. (Image source: From Me To You)

Coco Takes Manhattan. If you cannot capture wind, make a cinemagraph to get people feel it. (Image source: From Me To You)

Delicious Bacon. Believe me, cinemagraph will be the next big thing for food advertising. (Image source: Vickan Flickan)

Endless Time. Time is endless, so is cinemagraph. (Image source: Tilen Sepic)

Have A Bubbly Weekend! The moving effect has grabbed all you focus to the wine, showing you the attention-grabbing power of cinemagraph. (Image source: From Me To You)

Have An Adventurous Weekend. By simply moving some grasses, the entire photo has brought back to life completely. (Image source: From Me To You)

He Swept Her Away. Amazed by the dynamic of the swinging dress, simply cool. (Image source: From Me To You)

How He Passed The Time. Cinemagraph can not only give you the feel of wind, but also the feel of speed. (Image source: From Me To You)

Infinite Coke. Where can I buy this coke? I will pay any money for it. An interesting effect achieved by cinemagraph to confuse your mind. (Image source: Superwhite)

It’s My Birthday. Oops, don’t scroll down too fast or the candle will be blown away! Revive your most lovely moment with cinemagraph. (Image source: From Me To You)

Joel Naughgle Of Devil At My Doorstep. Professional output with lively portrait, a very great attempt from David Tribbly. (Image source: Tribby)

Laypark. They are all silent, only her keep playing her phone. She comes alive by the power of cinemagraph. (Image source: Teman | Design)

Meet Me At The Bar. A creative cinemagraph utilizing the reflection of window. (Image source: From Me To You)

Mouse Is Always Busy. Is he browsing the Hongkiat? Perfect cinemagraph that captures the life of a computer addict. (Image source: Superwhite)

Paint It On. Beauty needs patience. (Image source: From Me To You)

Prabal’s Beauty. Inspiring and lively at the same time, demonstrating how cinemagraph can be the best piece in your portfolio. (Image source: From Me To You)

Reading Newspaper. Impressive attempt with interesting ideas, I had a pleasing moment with this cinemagraph. (Image source: Kyla Hernandez)

Ride On A Swing. Instead of moving the swinging girl, the author moves another part of swing which makes entire cinemagraph more interesting, great idea. (Image source: product26)

Shave And A Haircut. Can you see all pole barble lamps in the photo are whirling? This cinemagraph stands out by its great attention to detail. (Image source: From Me To You)

Slide To Unlock. How many times you unlock iDevice a day? A common activity made interesting by cinemagraph. (Image source: Superwhite)

Smoke ‘n Models. Now I will call this professional, both makeup artist, photographer and cinemagrapher. (Image source: From Me To You)

So Tasty! How fresh it is! A tasty cinemagrah made for online grocery site, Gilt Taste. (Image source: From Me To You)

Spinning Coffee. Very nice attempt from Editor Simon, I like the peaceful feel of the entire photo, and the motion part has really strengthened the feel. (Image source: Editor Simon)

Sweeping Moments. Great collaboration between model and cinemagrapher, I believe more models will want to have a cinemagraph as self portrait, it’s simply more attractive. (Image source: From Me To You)

The Never-ending Commute. The moving train really adds to the epicness of this photo. (Image source: From Me To You)

Yuki. Its name is Yuki, an animal brought back to life by cinemagraph. (Image source: kirk7784)

References

Cinemagraphs in this showcase are referred from these following awesome websites:

• From Me To You
• Superwhite
• David Tribby Photography
• Editor Simon
• Kirk7784
• Kyla Hernandez
• Product26
• Teman | Design
• Vickan Flickan
• You Have To Start Somewhere

Reflection

The review for these cinemagraph is pretty diverse. Some praised it as the revolution of Gif animation, some criticized it as an old form of animated Gif artwork with a new name. In either way, more photographers found cinemagraph interesting and made their first attempt. Will it become the next big thing of photography and Gif animation? I will leave this for you to judge.
Wondered how to achieve magical cinemagraph? There’re some in-depth tutorials for you to get it!

• Cinemagraph/Subtle GIF Tutorial (Anthony-scavarelli.com)
• How to make a Cinemagraph with Photoshop and After Effects (vfxhaiku.com)
• Cinemagraph Tutorial (fernandojbaez.com)
• How I Made a Cinemagraph (anaestheticdiscourse.com)
• How To Make Your Own Cinemagraphs: A New Take on GIFs (tested.com)

Oh, and don’t forget to tell us which cinemagraph impresses you the most!
"

read more

Posted in: Cinemagraph,Photo,Showcase,Subtle Motion

Thumbnails Navigation Gallery with jQuery

Thumbnails Navigation Gallery with jQuery: "

View demoDownload source

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

The beautiful photos are from Mark Sebastian’s photostream on Flickr. You can find all the images used in the demo in the set The “IT” Factor. Please review the Creative Commons license that is included in the demo.

So, let’s get started!

The Markup

Our HTML is mainly going to consist of a wrapper and the menu list. We will have some other elements, like the full image, the loading div and the halftone overlay. First, let’s create the wrapper:

<div id="st_main" class="st_main">

</div>

Inside of our wrapper we will add the following:

<img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/>

<div class="st_overlay"></div>

<h1>Mark Sebastian</h1>

<div id="st_loading" class="st_loading">
<span>Loading...</span>
</div>

The first element is our full preview image. The overlay is going to be a fixed div which will stretch over the whole screen repeating a halftone pattern to create a fancy overlay effect on the image. We also add a title and a loading div.

We then add an unordered list where each li element is going to contain a span for its title and the thumbnails wrapper. The last li element is going to contain some wrapper for text, that’s why we will not give it the class “album”. Later, in the jQuery function we will need to distinguish that.

<ul id="st_nav" class="st_navigation">
<li class="album">
<span class="st_link">
Newest Collection
<span class="st_arrow_down"></span>
</span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
...
</div>
</div>
</li>
...
<li>
<span class="st_link">
About
<span class="st_arrow_down"></span>
</span>
<div class="st_about st_thumbs_wrapper">
<div class="st_subcontent">
<p>
Some description
</p>
</div>
</div>
</li>
</ul>

The thumbnail images get the alt value of the path to the full size image. That might not be the proper use of the alt attribute, but it’s just so convenient for our functionality that we will use it this way.

Let’s take a look at the style.

The CSS

First, let’s reset the paddings and margins for all elements and define the general styles:

*{
margin:0;
padding:0;
}
body{
font-family:'Myriad Pro','Trebuchet MS', Helvetica, sans-serif;
font-size:16px;
color:#fff;
background-color:#000;
overflow:hidden;
}
h1{
margin:20px;
font-size:40px;
}

Making the body overflow hidden we avoid any scroll bar appearing, but you can adapt that to your needs. I.e. if it is important that the full sized image is completely viewable by the user, you might want to remove the overflow:hidden property.

Next, we will define the style for the full size image, the overlay and the loading div:

.st_main img.st_preview{
position:absolute;
left:0px;
top:0px;
width:100%;
}
.st_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(../images/pattern.png) repeat-x bottom left;
opacity:0.3;
}
.st_loading{
position:fixed;
top:10px;
right:0px;
background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
padding:15px 40px 15px 60px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
opacity:0.6;
}

By setting the image width to be always 100%, we make sure that it occupies all the horizontal space on the page. For very large screens the image might look pixelated which can, of course, be avoided by using gigantic images. In our demo we use a maximum width of 1600 pixel to make the loading time bearable. The halftone pattern on top of the image helps a little to disguise a pixelated effect.

Please note that whenever opacity is used, the IE filter property needs to be used if you want to achieve semi-transparent effects in IE. The overlay looks like crap if you use the filter property, though. Check out the ZIP file, I added the IE DXImageTransform filter to the respective styles.

The navigation will be positioned absolutely:

ul.st_navigation{
position:absolute;
width:100%;
top:140px;
left:-300px;
list-style:none;
}

The initial left value is set to -300 pixel because we want to slide it in only after our full image is loaded. If you use longer titles in the list items, you might need to adapt this value.

Our list elements are going to have the following style:

ul.st_navigation li {
float:left;
clear:both;
margin-bottom:8px;
position:relative;
width:100%;
}

The span for the title will be styled as follows:

ul.st_navigation li span.st_link{
background-color:#000;
float:left;
position:relative;
line-height:50px;
padding:0px 20px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}

Next, we define the style for the spans with the up/down arrow for opening and closing the thumbnail container:

ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
position:absolute;
margin-left:15px;
width:40px;
height:50px;
cursor:pointer;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
background:#000 url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
background:#000 url(../images/icons/up.png) no-repeat center center;
}

The wrapper for the thumbnail container will be positioned absolutely and we want to hide any vertical overflow:

.st_wrapper{
display:none;
position: absolute;
width:100%;
height:126px;
overflow-y:hidden;
top:50px;
left:0px;
}

Although the thumbs are only 120 pixels high, we want to leave some space so that the box shadow of the images inside will not be cut away.

The thumbnails container will simply be styled as follows:

.st_thumbs{
height:126px;
margin: 0;
}

The thumbnails will have a neat box shadow and some spacing:

.st_thumbs img{
float:left;
margin:3px 3px 0px 0px;
cursor:pointer;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
opacity:0.7;
}

The st_about class is the wrapper class for the text container:

.st_about{
display:none;
position:absolute;
top:50px;
left:0px;
opacity:0.6;
}

And, finally the text container itself:

.st_subcontent{
background:#000;
padding:30px;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}

And that’s all the style! Let’s make some magic!

The JavaScript

In our jQuery function we will first define some variables:

//the loading image
var $loader  = $('#st_loading');
//the ul element
var $list  = $('#st_nav');
//the current image being shown
var $currImage  = $('#st_main').children('img:first');

The first thing that we want to do is to load the current full size image. After it’s loaded, we want the navigation to appear:

$('<img>').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//slide out the menu
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));

The buildThumbs() function calculates the widths of all the thumbnail containers. We need that value for the automatic scrolling function later on:

buildThumbs();

function buildThumbs(){
$list.children('li.album').each(function(){
var $elem    = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs   = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW    = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}

Next, we define the behavior of clicking on the arrows. If it’s down, we will expand the thumbnail container and hide any other. If it’s up, we will make the current container hide again.

$list.find('.st_arrow_down').live('click',function(){
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});

Before we define the hideThumbs() function, we specify what happens when clicking on a thumb. The full size image will show and while it’s loading we will make the loading div appear. Then we animate the opacity and fade the image in:

$list.find('.st_thumbs img').bind('click',function(){
var $this = $(this);
$loader.show();
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});

The function to hide the thumbnails looks as follows:

function hideThumbs(){
$list.find('li.current')
.animate({'height':'50px'},400,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide(200)
.andSelf()
.find('.st_link span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}

We animate the height of the li and make the thumbnails container disappear like that. We also need to set the class for the arrow span correctly.

And finally, we will define the makeScrollable() function that automatically scrolls the thumbnails div horizontally on mouse move:

function makeScrollable($outer, $inner){
var extra    = 800;
//Get menu width
var divWidth = $outer.width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
//Find last image in container
var lastElem = $inner.find('img:last');
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
$outer.scrollLeft(left);
});
}

For cufonizing the titles and adding some decent shadow, we will include the following into the head of our html document:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('span,p,h1',{
textShadow: '0px 0px 1px #ffffff'
});
</script>

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

View demoDownload source
"

read more

Posted in: jQuery,jQuery Plugin,Photo

Minimalistic Slideshow Gallery with jQuery

Minimalistic Slideshow Gallery with jQuery: "

View demoDownload source

In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

So, let’s start!

The Markup

The main HTML structure will consist of the main slideshow wrapper that contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs):

<div id="msg_slideshow" class="msg_slideshow">
<div id="msg_wrapper" class="msg_wrapper"></div>
<div id="msg_controls" class="msg_controls">
<a href="#" id="msg_grid" class="msg_grid"></a>
<a href="#" id="msg_prev" class="msg_prev"></a>
<a href="#" id="msg_pause_play" class="msg_pause"></a>
<a href="#" id="msg_next" class="msg_next"></a>
</div>
<div id="msg_thumbs" class="msg_thumbs">
<div class="msg_thumb_wrapper">
<a href="#">
<img src="images/thumbs/1.jpg" alt="images/1.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/2.jpg" alt="images/2.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/3.jpg" alt="images/3.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/4.jpg" alt="images/4.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/5.jpg" alt="images/5.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/6.jpg" alt="images/6.jpg"/>
</a>
</div>
<div class="msg_thumb_wrapper" style="display:none;">
<a href="#">
<img src="images/thumbs/1.jpg" alt="images/7.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/2.jpg" alt="images/8.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/3.jpg" alt="images/9.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/4.jpg" alt="images/10.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/5.jpg" alt="images/11.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/6.jpg" alt="images/12.jpg"/>
</a>
</div>
<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
<span class="msg_loading"></span>
</div>
</div>

The alt attribute of the thumbnails will contain the path the full view image.

The class names are getting the prefix “msg” so that the style does not interfere with anything else in your web site.

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

The CSS

First, we will define the style for the main wrapper:

.msg_slideshow{
width:400px;
height:400px;
padding:10px;
position:relative;
overflow:hidden;
background:#101010 url(../icons/loading.gif) no-repeat center center;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

By setting the loading GIF to be the background image we are performing a small trick: while we are waiting for the next picture to show, our wrapper will be empty and show the loader. When the next image gets loaded it will simply hide the loader.

We will remove borders and outlines from the link elements:

.msg_slideshow a{
outline:none;
}
.msg_slideshow a img{
border:none;
}

In order to center the full image in the container, both, vertically and horizontally, we need to add another wrapper around. That wrapper will be displayed as a table cell. Adding the vertical-align:middle property will center the image.

.msg_wrapper{
width:400px;
height:400px;
position:relative;
margin:0;
padding:0;
display:table-cell;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
.msg_wrapper img{
display: inline-block!important;
vertical-align:middle;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}

The display property in the image style will make sure that our image does not become display:block because of the fadeIn we will use in our jQuery function. Since we want to keep our image centered horizontally, we need to keep is as an inline (-block) element.

The control element will have the following style:

.msg_controls{
position:absolute;
bottom:15px;
right:-110px;
width:104px;
height:26px;
z-index: 20;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#000;
opacity:0.8;
}

The common style for all the control elements will be as follows:

.msg_controls a{
float:left;
background-color:#000;
width:20px;
height:20px;
margin:3px 3px;
opacity:0.5;
background-repeat:no-repeat;
background-position: center center;
}
.msg_controls a:hover{
opacity:1.0;
}

The style for each icon:

.msg_controls a.msg_grid{
background-image:url(../icons/grid.png);
}
.msg_controls a.msg_prev{
background-image:url(../icons/prev.png);
}
.msg_controls a.msg_next{
background-image:url(../icons/next.png);
}
.msg_controls a.msg_pause{
background-image:url(../icons/pause.png);
}
.msg_controls a.msg_play{
background-image:url(../icons/play.png);
}

The thumbs container will slide in from the top, so we will position it absolutely and hide it initially by setting the top to -230px:

.msg_thumbs{
background:#000;
position:absolute;
width:250px;
height:166px;
top:-230px;
left:50%;
padding:30px;
margin:0 0 0 -155px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
opacity:0.9;
overflow:hidden;
}

With a left of 50% and a left margin of minus half of its width, we can center the absolute element horizontally.

The wrapper containing the thumbnails will have the following style:

.msg_thumb_wrapper{
position:absolute;
width:250px;
height:166px;
top:30px;
left:30px;
z-index:30;
}

The style of the thumbnails will be as follows:

.msg_thumb_wrapper a{
display:block;
width:75px;
height:75px;
float:left;
margin:4px;
opacity:0.8;
}

When we hover the thumbnail we will set the opacity to 1.0, but that we will animate in our jQuery function for a nice effect.

The style for the navigation controls:

.msg_thumbs a.msg_thumb_next,
.msg_thumbs a.msg_thumb_prev{
width:18px;
height:20px;
background-repeat:no-repeat;
background-position: center center;
position:absolute;
top:50%;
margin-top:-10px;
opacity:0.5;
}
.msg_thumbs a.msg_thumb_next:hover,
.msg_thumbs a.msg_thumb_prev:hover{
opacity:1.0;
}
.msg_thumbs a.msg_thumb_next{
background-image:url(../icons/next_thumb.png);
right:5px;
}
.msg_thumbs a.msg_thumb_prev{
background-image:url(../icons/prev_thumb.png);
left:5px;
}

The little element for sliding back the grid view:

.msg_thumbs a.msg_thumb_close{
position:absolute;
bottom:0px;
width:50px;
left:50%;
margin:0 0 0 -25px;
background:#202020 url(../icons/up.png) no-repeat center center;
height:16px;
opacity:0.7;
-moz-border-radius:5px 5px 0 0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}

We are adding some border radius to the top right and top left corners. When we hover, we will make it opaque:

.msg_thumbs a.msg_thumb_close:hover{
opacity:1.0;
}

And finally, the loading element for the grid view which we center horizontally and vertically with our 50% method:

.msg_loading{
position:absolute;
background:transparent url(../icons/loading.gif) no-repeat center center;
top:50%;
left:50%;
width:50px;
height:50px;
margin:-25px 0 0 -25px;
z-index:25;
display:none;
}

And that’s all the style. Now, let’s add some magic!

The JavaScript

First, we will define some variables:

• interval: time between the display of images
• playtime: the timeout for the setInterval function
• current: number to control the current image
• current_thumb: the index of the current thumb wrapper
• nmb_thumb_wrappers: total number of thumb wrappers
• nmb_images_wrapper: the number of images inside of each wrapper

var interval   = 4000;
var playtime;
var current    = 0;
var current_thumb   = 0;
var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length;
var nmb_images_wrapper  = 6;

We start the slideshow:

play();

When we hover over the main container, we will make the controls slide in from the right:

slideshowMouseEvent();
function slideshowMouseEvent(){
$('#msg_slideshow').unbind('mouseenter')
.bind('mouseenter',showControls)
.andSelf()
.unbind('mouseleave')
.bind('mouseleave',hideControls);
}

When we click on the grid icon in the controls we will show the thumbnails view, pause the slideshow, and hides the control:

$('#msg_grid').bind('click',function(e){
hideControls();
$('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
pause();
$('#msg_thumbs').stop().animate({'top':'0px'},500);
e.preventDefault();
});

Clicking on the icon to hide the thumbnails view will again show the controls:

$('#msg_thumb_close').bind('click',function(e){
showControls();
slideshowMouseEvent();
$('#msg_thumbs').stop().animate({'top':'-230px'},500);
e.preventDefault();
});

Next, we define what happens when we click pause or play. Besides changing the class, we will call the pause() or play() function:

$('#msg_pause_play').bind('click',function(e){
var $this = $(this);
if($this.hasClass('msg_play'))
play();
else
pause();
e.preventDefault();
});

Clicking on “next” or “previous” control will pause our slideshow and show the respective image:

$('#msg_next').bind('click',function(e){
pause();
next();
e.preventDefault();
});
$('#msg_prev').bind('click',function(e){
pause();
prev();
e.preventDefault();
});

Next, we define the functions for showing and hiding the controls. By setting the right value, we will make it slide. Remember, that we set an initial negative value in the CSS.

function showControls(){
$('#msg_controls').stop().animate({'right':'15px'},500);
}
function hideControls(){
$('#msg_controls').stop().animate({'right':'-110px'},500);
}

The play() function which makes the slideshow go:

function play(){
next();
$('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
playtime = setInterval(next,interval)
}

The function for pausing the slideshow. We change again the class and clear the timeout:

function pause(){
$('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
clearTimeout(playtime);
}

The next two function will show the next or previous image:

function next(){
++current;
showImage('r');
}
function prev(){
--current;
showImage('l');
}

The next function is for showing the image. We also call alternateThumbs(), which will always change the grid to display the view where the current image is located.

function showImage(dir){
/**
* the thumbs wrapper being shown, is always
* the one containing the current image
*/
alternateThumbs();

/**
* the thumb that will be displayed in full mode
*/
var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
.find('img');
if($thumb.length){
var source = $thumb.attr('alt');
var $currentImage = $('#msg_wrapper').find('img');
if($currentImage.length){
$currentImage.fadeOut(function(){
$(this).remove();
$('<img />').load(function(){
var $image = $(this);
resize($image);
$image.hide();
$('#msg_wrapper').empty().append($image.fadeIn());
}).attr('src',source);
});
}
else{
$('<img />').load(function(){
var $image = $(this);
resize($image);
$image.hide();
$('#msg_wrapper').empty().append($image.fadeIn());
}).attr('src',source);
}

}
else{ //this is actually not necessary since we have a circular slideshow
if(dir == 'r')
--current;
else if(dir == 'l')
++current;
alternateThumbs();
return;
}
}

The thumbs wrapper being shown is always the one containing the current image. So, we define a function that controls this:

function alternateThumbs(){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.hide();
current_thumb = Math.ceil(current/nmb_images_wrapper);
/**
* if we reach the end, start from the beggining
*/
if(current_thumb > nmb_thumb_wrappers){
current_thumb  = 1;
current   = 1;
}
/**
* if we are at the beggining, go to the end
*/
else if(current_thumb == 0){
current_thumb  = nmb_thumb_wrappers;
current   = current_thumb*nmb_images_wrapper;
}

$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.show();
}

Next, we define what happens when we navigate through the thumbs:

$('#msg_thumb_next').bind('click',function(e){
next_thumb();
e.preventDefault();
});
$('#msg_thumb_prev').bind('click',function(e){
prev_thumb();
e.preventDefault();
});
function next_thumb(){
var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
if($next_wrapper.length){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.fadeOut(function(){
++current_thumb;
$next_wrapper.fadeIn();
});
}
}
function prev_thumb(){
var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
if($prev_wrapper.length){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.fadeOut(function(){
--current_thumb;
$prev_wrapper.fadeIn();
});
}
}

Clicking on a thumbnail will load the respective image:

$('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
var $this   = $(this);
$('#msg_thumb_close').trigger('click');
var idx   = $this.index();
var p_idx  = $this.parent().index();
current   = parseInt(p_idx*nmb_images_wrapper + idx + 1);
showImage();
e.preventDefault();
}).bind('mouseenter',function(){
var $this   = $(this);
$this.stop().animate({'opacity':1});
}).bind('mouseleave',function(){
var $this   = $(this);
$this.stop().animate({'opacity':0.5});
});

And finally, our resize function that fits the image inside of our container, which we defined to be 400×400 pixel:

function resize($image){
var theImage  = new Image();
theImage.src  = $image.attr("src");
var imgwidth  = theImage.width;
var imgheight  = theImage.height;

var containerwidth  = 400;
var containerheight = 400;

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

And that’s it! We hope you enjoyed this tutorial and find our little slideshow useful!

View demoDownload source

"

read more

Posted in: jQuery,jQuery Plugin,Photo

How to Create a Photo Stack Gallery with jQuery & CSS3

How to Create a Photo Stack Gallery with jQuery & CSS3: "
Beautiful Photo Stack Gallery with jQuery and CSS3 tells us how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.
We will use jQuery and CSS3 properties for the rotated image effect. We will also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect.

Requirements: PHP Framework, jQuery Framework
Demo: http://tympanus.net/Tutorials/PhotoStack/
License: License Free

Related Posts

• Polaroid Photo Viewer with CSS3 and jQuery
• Micro Image Gallery jQuery Plugin
• How to Create a Stunning Full Page Photo Wall Gallery
• How to Create An Elegant jQuery Image Gallery
• Fancy Apple.com-Style Search Suggestion jQuery Plugin

"

read more

Posted in: CSS,jQuery,jQuery Plugin,Photo