JS Tutorial
- Overview
- Documents
The Image Slider
This image slider doesn’t do slide on displaying image, as I described before it will be flying out the selected image to the front of images stack. So all images will be positioned stacked each other. When user click on of the image, it will be move to the outer left of image stack and move back with rotating effect to the stack and positioned on top of it.
All of the other images in front of the selected image will be move backward smoothly and automatically positioned based on its stack order. Here’s the prototype of images stack :
When user click one of the image it will move to the left and back to the stack :
The HTML & Styling
The HTML structure is very simple, we need two divs for wrapping images and their description. The first div named itemlist and the other named itemdescription. Each of them has children, itemlist will have list of all images and the other will have list of all descriptions.
I’m using some free WordPress theme screenshot for the image, they are : Busby Theme, Gridly Theme, Reco Theme and The Blog Theme.
<div id="container">
<div id="itemlist">
<img src="images/busby.jpg" alt="Busby" id="busby">
<img src="images/gridly.jpg" alt="Gridly" id="gridly">
<!-- to n image -->
</div>
<div id="itemdescription">
<span data-for="busby">Busby Theme</span>
<span data-for="gridly">Gridly Theme</span>
<!-- to n description -->
</div>
</div>
As you see on above code each image has an id attribute and description has data-forattribute, this aim to make us easy when changing selected image’s description.
Since all images are stacked each other we need to make their position to absolute and to make each of them visible we ‘ll modify their left value. We’ll also playing with transform scale value to make the stack more beautiful.
#itemdescription {
position: relative;
width: 400px;
margin: 0 auto;
left: 6em;
top: 2em;
}
#itemdescription span {
display: none;
}
#itemlist {
display: block;
width: 400px;
margin: 3em auto;
position: relative;
transform-style: preserve-3d;
}
#itemlist img {
position: absolute;
cursor: pointer;
left: 0;
box-shadow: 0px 15px 50px rgba(0,0,0,0.4);
}
#itemlist img:hover {
top: -5px;
}
#itemlist img.item-0 {
z-index: 4;
transform: scale(1);
}
#itemlist img.item-1 {
z-index: 3;
left: -80px;
transform: scale(0.9);
}
#itemlist img.item-2 {
z-index: 2;
left: -160px;
transform: scale(0.8);
}
#itemlist img.item-3 {
z-index: 1;
left: -240px;
transform: scale(0.7);
}
We need transition property on each image to move them backward smoothly so we also need a separate class with transition property and use them later. We will also create a class named show, this class has an animation keyframe to move the selected image with flyout effect.
.transition {
transition: 0.5s ease-out;
}
.show {
animation: show 1s linear;
}
@keyframes show{
25% {
left: -450px;
}
50% {
z-index: 5;
left: -500px;
transform: rotate3d(0,1,0,0deg);
}
70% {
z-index: 5;
left: -250px;
transform: rotate3d(0,1,0,180deg);
}
100% {
z-index: 5;
left: 0px;
transform: rotate3d(0,1,0,360deg);
}
}
Here’s our image slider result :
The jQuery
First to do is to traverse and ordering the image list automatically, we will add class name we prepared before to each of them based on their DOM ordering and hide all image description and show the first image description.
//Initiliaze
var itemList, item, className, thisItem, newOrder, itemDesc, desc;
itemList= $('#itemlist');
item= itemList.children('img');
itemDesc= $('#itemdescription');
desc= itemDesc.children('span');
//Add class name for each item
item.each(function(index) {
className= 'item-' + index;
$(this).addClass(className).attr('data-order', index);
});
//Show first item description
desc.filter(':first-child').fadeIn();
When the image is being clicked, the image will be added by a CSS class named show to force the image animating, when the animation done we will show its description and hide others and also change its ordering attribute value.
//On clicked fire animation
item.on('click', function() {
thisItem= $(this);
thisOrder = parseInt(thisItem.attr('data-order')) - 1;
thisItem.addClass('show');
//Reorder item position
item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() {
thisItem.removeClass().addClass('item-0').attr('data-order', '0');
//Show selected item description
desc.hide();
desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast');
});
While the selected image being animated we will move backward the other images in front of the selected image based on its order. We also add class transition to them to move smoothly. Lastly, when the transition end we will remove transition class from them.
//Move siblings items backward
window.setTimeout(function () {
for(var i = thisOrder; i >= 0; i--) {
//Reorder item position
movedItem = item.filter('[data-order=' + i + ']');
newOrder= parseInt(movedItem.attr('data-order')) + 1;
className = 'item-' + newOrder;
//Move them with transition
movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);
//Remove their transition
item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() {
item.removeClass('transition');
});
}
}, 500);
Done
We’re done you can try them on demo page above. Hope you enjoy the tutorial and feel useful, thanks for reading!
