In this tutorial I will try to explain how to create simple Lightbox, and this box has feature to display image with effect transition. Actually we can change the transition effect with other version using JavaScript with other easing effect, but I set this with "ease out elastic" as default. Basically Blogger platform has this feature but with standard display if you set "yes" the showcase images with lightbox in dashboard. To avoid conflict with this version then you have to set "no" in the dashboard. This simple lightbox also works on other platform not only in Blogger, and commonly works with all major modern browsers.The feature is very simple and will work to display any image with jpg, png and gif extension in the webpage automaticaly. The images will show up in lightbox according to their parent section, in example all images in the post section, sidebar section and other section as well. The image will show with ease out elastic effect and automatically resize the width and height with maximum resolution. You can also add some title of the image as well as you can see the complete feature in demo page.
This lightbox originaly modified from slimbox2 created by Christhope Beyls as free software with MIT license (open source) and free of charge to any person. It designed with efficient, very small size, standard friendly and compatible with major modern browsers such as Firefox, Chrome, Opera, Safari and Internet Explorer. The code is already optimized with efficiency and the script itself has a very light weight, small size as 4kb in minified version.
Create Lightbox
To add this feature only takes a few minutes. This lightbox is ready to show up as soon the webpage is ready, which means that you don't have to wait for all images to be loaded before clicking on it that will soon launch the transition with effect. Here are the step by step applying the simple lightbox.1. Add the following CSS code above
]]></b:skin> or </style> in CSS style section.CSS
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #000;
box-shadow: 0px 0px 23px 5px #0020FF;
}
#lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #000;
background:rgba(0,0,0,0.5);
margin-top:-41px;
}
.lbLoading {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9jdV17QQOgZ34MnWHw2BEq-uUIDlgTYS4wUeDpd4FRAD_jNnVoQjh_39GxyvPC2idlhLkb3dHe8-5ygOj2vZLaOq762sv3tUFa4TIAGEWDqgWdApyCJusHoQjjCF_ePkCnSDnfLm_wouY/s128/ajax-loader.gif") no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
max-width:900px; max-height:550px;
background-repeat: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#lbPrevLink {
left: 0;
display: block;
position: absolute;
top: 0;
width: 50px;
outline: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcKook2MqtFhrYdfJ-vT6iQ6CVlacSHSBj-rADzfEBxAPlMrP81thGN6Gxp2ctwpr-5a7i0X2qNHj7bpoEDmwyKVTHu6YN3aFdG4I6fnNqb3G5HRnixpb6HfaxDVArYX2qwu__q4D2mFgS/s128/prevbutton-clean.png") no-repeat;
opacity:0.4;
}
#lbPrevLink:hover {
opacity:1;
}
#lbNextLink {
left: 50px;
display: block;
position: absolute;
top: 0;
width: 50px;
outline: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyBU_t1dis-fBXwzjHry5XBu6alovSWAxmhoy9a3SfVqEFg3Nre4HHRkFufNwWtC8-u58ludpcOP7dVyUt4nqBD35_oOCaRbKwWNUJXowAATMZaHlwTotyr-LFAbXnMsx6mS3tewy9Aee/s128/nextbutton-clean.png") no-repeat;
opacity:0.4;
}
#lbNextLink:hover {
opacity:1;
}
#lbBottom {
font:12px Verdana, Arial, Geneva, Helvetica, sans-serif;
color: #D3D3D3;
line-height: 1.4em;
text-align: left;
border-top-style: none;
padding:5px;
}
#lbCloseLink {
display: block;
float: right;
width: 15px;
height: 15px;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtL8YSb9mVVIJxsDw32HQOC3T0SXzYyVV6gM0AC-c_R14-fDdrX6KYNhqCIY5C7gJbnhm6B9KWzlpDjfWOyaFnJ-WK2isoATTqbN5V-vnpjLODRTt1pU8rZ3sCqw6rpKtVdSOtZCVyWfQQ/s128/close.gif") no-repeat;
margin: 5px;
outline: none;
}
#lbCaption {
font:12px Verdana, Arial, Geneva, Helvetica, sans-serif; padding-bottom:5px;
}
#lbNumber {
font:10px Verdana, Arial, Geneva, Helvetica, sans-serif;
}
#lbCaption {
font-weight: bold;
}Note: Try first without editing.
Blue color is the image link icon for previous, next close and loader, and you should change this and use with your own upload server.
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
<script type='text/javascript'>
/*! Slimbox v2.05 - The ultimate lightweight Lightbox clone for jQuery (c) 2007-2013 Christophe Beyls <http://www.digitalia.be>
MIT-style license. */
(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />').click(C)[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"easeOutElastic",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.which,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():null}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);jQuery.extend(jQuery.easing,{easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e}});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)}).slimbox({},null,function(b){return(this==b)||(this.parentNode&&(this.parentNode==b.parentNode))})})};
</script>3. Below only if you want to add some title for the image.
HTML
<a href='.../images/example.jpg' title="Description: Air Bubbles"><img src=".../images/example.jpg" /></a>Green color is the title for the image and you can add something like this to other image.
4. Don't forget to Save Template, and see the results.
Hopefully can be useful, thank's for read.
