» » Flexible Image Lightbox With Animated Effect Transition

Flexible Image Lightbox With Animated Effect Transition

Posted by Cloud VPS Labels: Tutorial 5:20 PM


Image Lightbox AnimatedThere are many other version to display image or content in lightbox while in Blogger platform has this feature but with standard display if you set "yes" the showcase images with lightbox in the dashboard. This post tutorial will explain to you how to create a Flexible Image Lightbox, and this box will display image with effect transition if navigation key clicked to the previous or next image. Actually you can change the effect with other type of transition in the CSS style.

The feature basicaly will show any image with adding a class in the image link, so this function can works as properly. You can also add some title or caption of the image as well as you can see the complete feature in demo page. If you are using Blogger platform and to avoid conflict with Blogger version (if any) then I recommend you to set "no" in the dashboard for the showcase images. Commonly this version works with all major modern browsers and also on other platform not only in Blogger.


This lightbox has a cool preview but originaly modified from responsive JQuery modal box "smoothbox" and the script created by Kevin Thornbloom as free to use and modify personaly under MIT license (open source) and free of charge to any person. It designed with efficient, friendly and compatible with major modern browsers such as Chrome, Firefox, Safari, Opera and Internet Explorer. The code is already minified and optimized with efficiency and the script itself has a very light weight, small size as 2kb in minified version.

Create Flexible Image Lightbox

To add this feature only takes a few minutes and this lightbox function is ready to show up as soon the webpage is ready. Here are the step by step applying the flexible lightbox.

1. Add the following code above ]]></b:skin> or </style> in CSS style section.

CSS Tab View

body, html {
    height:100%;
    width:100%;
}
/* wrapper */
.smoothbox {
    position: fixed;
    top:0;
    left:0;
    background:rgb(0,0,0);
    background: rgba(0, 0, 0, 0.9);
    height:100%;
    width:100%;
    z-index: 9999;
}
/* wrapper after loading */
.sb-load {
    background:rgb(0,0,0);
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH6aiPNCn8k_0Q8N18naEEkrqVQO72NdAf29K2TyiaZ-DG1Z665KtRSnX3xMJbrbJ0GQ4HPoII8qX0oy9zHhCyV1DnI4l4NOrvEUUyc-UANNqVv9AkUKKMceTHjotixc0WrHhuooryQ2L/s128/loading.gif") center no-repeat rgba(0,0,0,.9);
}
/* vertical centering */
.smoothbox-table {
    top:0;
    height:100%;
    width:100%;
    display:table;
}
.smoothbox-centering {
    display:table-cell;
    vertical-align:middle;
    top:0;
    height:100%;
    width:100%;
}
/* horizontal centering & sizing */
.smoothbox-sizing {
    display:none;
    position: relative;
    margin: 0 auto;
    padding: 0px;
    width: 80%;
}
/* item wrapper */
.sb-items {
    margin: 0 auto;
    width: auto;
    padding: 0;
    list-style: none;    
    border-radius: 2px;
    display: table;
}
.sb-items:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* items */
.sb-item {
    left: 0;
    top:0;
    width: 100%;
    max-height: 80%;
    float: left;
    margin-right: -100%;
    position: relative;
    zoom: 1;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 17px 9px #E0FF00;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 500ms ease-out;
    -moz-transition:all 500ms ease-out;
    -o-transition:all 500ms ease-out;
    -ms-transition:all 500ms ease-out;
    transition: all 500ms ease-out;
    max-width: 800px;
    max-height: 550px;
}

.no-trans {
    -webkit-transition:none;
    -moz-transition:none;
    transition:none;
}

.sb-item img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 2px;
    position: relative;
    max-width:800px;
    max-height: 550px;
}
/* forward animation */
.sb-item-ani {
    top: 100px;
    opacity:0;
    -webkit-transform: scale(.3) rotate(720deg);
    -moz-transform: scale(.3) rotate(720deg);
    -o-transform: scale(.3) rotate(720deg);
    -ms-transform: scale(.3) rotate(720deg);
    transform: scale(.3) rotate(720deg);
}
/* back animation */
.sb-item-ani2 {
    top:50px;
    -webkit-transform: rotate(720deg) scale(.3);
    -moz-transform: rotate(720deg) scale(.3);
    -o-transform: rotate(720deg) scale(.3);
    -ms-transform: rotate(720deg) scale(.3);
    transform: rotate(720deg )scale(.3);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity:0;
}
.sb-caption {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background:rgb(0,0,0);
    background: rgba(0, 0, 0, 0.9);
    color: #CCC;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    z-index: 1;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity:0.8;
}
/* buttons */
.sb-nav {
    position:absolute;
    top: 10px;
    width: 100%;
    margin: 0 auto;
    display: none;
    z-index: 10;
    text-align: center;
    font-size: 0;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    zoom:1;
}
.sb-nav:hover {

}

.sb-prev {
    display: inline-block;
    background:#000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0oR_2oEhCbmkASX7Bs6jLxN8L1CpEamnfR6vLqgG100Tes6oV-1XzqYHjBKluHdhl1Glm8Jf07nUhUPuWnBCZr-EmU6wbHOmFv2cuwvcYesn9JqBRnkX9VtjKTxCpEy17hBEGF3iVhP4_/s128/button-square.png") no-repeat -12px -70px;
    position: relative;
    margin-right:1px;
    width: 30px;
    height: 23px;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity:0.3;
}
.sb-next {
    display: inline-block;
    background:#000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0oR_2oEhCbmkASX7Bs6jLxN8L1CpEamnfR6vLqgG100Tes6oV-1XzqYHjBKluHdhl1Glm8Jf07nUhUPuWnBCZr-EmU6wbHOmFv2cuwvcYesn9JqBRnkX9VtjKTxCpEy17hBEGF3iVhP4_/s128/button-square.png") no-repeat -11px -15px;
    position: relative;
    margin-right:1px;
    width: 30px;
    height: 23px;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    opacity:0.3;
}
.sb-cancel {
    display: inline-block;
    background:#fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7HEExvLZK2Tm_OXoxeB2uQBkrbfJGAtrHVoQs6oUaQEF9hPxhdhzDoJDlfDst1P3QcCXiTFsaqwGIYHbiVVPlhhCMrRyLq_PSZnwdQ_GOEr-emoyUuQH6W_exhv7FOwnx3Idi3LOYuJKa/s128/close.gif") no-repeat 4px 4px;
    position: relative;
    margin-right:1px;
    width: 24px;
    height: 23px;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity:0.3;
}
.sb-nav a:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity:1;
}

Note: Try first without editing.
Blue color is a few image links for navigation control's and you should change these links with your own links.

2. Add the following Jquery script code above the </head>

JQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>


Note: If you already add any similar JQuery above with another version, then skip the step.

3. Add the following JavaScript code above the </head>

Javascript Simple

<script type='text/javascript'>
/*!
 * Smoothbox
 * http://kthornbloom.com/smoothbox.php
 *
 * Copyright 2013, Kevin Thornbloom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

$(document).ready(function(){$(".sb").click(function(b){var a=$(this).index(".sb");$("body").append('<div class="smoothbox sb-load"><div class="smoothbox-table"><div class="smoothbox-centering"><div class="smoothbox-sizing"><div class="sb-nav"><a href="#" class="sb-prev sb-prev-on" alt="Previous"></a><a href="#" class="sb-cancel" alt="Close"></a><a href="#" class="sb-next sb-next-on" alt="Next"></a></div><ul class="sb-items"></ul></div></div></div></div>');$.fn.reverse=[].reverse;$(".sb").reverse().each(function(){var d=$(this).attr("href");if($(this).attr("title")){var c=$(this).attr("title");$(".sb-items").append('<div class="sb-item"><div class="sb-caption">'+c+'</div><img src="'+d+'"/></div>')}else{$(".sb-items").append('<div class="sb-item"><img src="'+d+'"/></div>')}});$(".sb-item").slice(0,-(a)).appendTo(".sb-items");$(".sb-item").not(":last").hide();$(".sb-item img:last").load(function(){$(".smoothbox-sizing").fadeIn("slow",function(){$(".sb-nav").fadeIn();$(".sb-load").removeClass("sb-load")})});b.preventDefault()});$(document).on("click",".sb-cancel",function(a){$(".smoothbox").fadeOut("slow",function(){$(".smoothbox").remove()});a.preventDefault()});$(document).on("click",".sb-next-on",function(a){$(this).removeClass("sb-next-on");$(".sb-item:last").addClass("sb-item-ani");$(".sb-item:last").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){$(".sb-item").eq(-2).addClass("no-trans").fadeIn("fast");$(this).removeClass("sb-item-ani").prependTo(".sb-items").hide();$(".sb-item:last").removeClass("no-trans");$(".sb-next").addClass("sb-next-on");$(".sb-item").unbind()});a.preventDefault()});$(document).on("click",".sb-prev-on",function(a){$(this).removeClass("sb-prev-on");$(".sb-item:last").hide();$(".sb-item:first").addClass("sb-item-ani2 no-trans").appendTo(".sb-items");$(".sb-item:last").show().removeClass("no-trans").delay(1).queue(function(b){$(".sb-item:last").removeClass("sb-item-ani2");b()});$(this).addClass("sb-prev-on");a.preventDefault()})});if(!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)){jQuery(function(a){a("a[href]").filter(function(){return/\.(jpg|png|gif)$/i.test(this.href)}).sb({},null,function(b){return(this==b)||(this.parentNode&&(this.parentNode==b.parentNode))})})};
</script>

4. Save the template.

5. Add a class="sb" for any image in the post page that you want to display in lightbox and add a caption if you want.

HTML

<a class="sb" href='...images/blackberry.jpg' title="blackberry" ><img src="images/blackberry.jpg" /></a>

Orange is the caption.

6. Done and see the results.

Hopefully can be useful.