JQuery Lightbox Image Overlay Pop Out Effect For Blogger

Add jQuery Lightbox Image Overlay Plug In To Blogger


Step 1. In your Blogger dashboard click Design > Edit Html



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)

]]></b:skin>

Step 3. Copy and paste the following code diectly Above / Before ]]></b:skin>

/*start css lightbox*/<br /> /**<br /> * jQuery lightBox plugin<br /> * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)<br /> * and adapted to me for use like a plugin from jQuery.<br /> * @name jquery-lightbox-0.5.css<br /> * @author Leandro Vieira Pinho - http://leandrovieira.com<br /> * @version 0.5<br /> * @date April 11, 2008<br /> * @category jQuery plugin<br /> * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)<br /> * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US<br /> * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin<br /> */<br /> #jquery-overlay {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> z-index: 90;<br /> width: 100%;<br /> height: 500px;<br /> }<br /> #jquery-lightbox {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> z-index: 100;<br /> text-align: center;<br /> line-height: 0;<br /> }<br /> #jquery-lightbox a img { border: none; }<br /> #lightbox-container-image-box {<br /> position: relative;<br /> background-color: #fff;<br /> width: 250px;<br /> height: 250px;<br /> margin: 0 auto;<br /> }<br /> #lightbox-container-image { padding: 10px; }<br /> #lightbox-loading {<br /> position: absolute;<br /> top: 40%;<br /> left: 0%;<br /> height: 25%;<br /> width: 100%;<br /> text-align: center;<br /> line-height: 0;<br /> }<br /> #lightbox-nav {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> height: 100%;<br /> width: 100%;<br /> z-index: 10;<br /> }<br /> #lightbox-container-image-box > #lightbox-nav { left: 0; }<br /> #lightbox-nav a { outline: none;}<br /> #lightbox-nav-btnPrev, #lightbox-nav-btnNext {<br /> width: 49%;<br /> height: 100%;<br /> zoom: 1;<br /> display: block;<br /> }<br /> #lightbox-nav-btnPrev { <br /> left: 0; <br /> float: left;<br /> }<br /> #lightbox-nav-btnNext { <br /> right: 0; <br /> float: right;<br /> }<br /> #lightbox-container-image-data-box {<br /> font: 10px Verdana, Helvetica, sans-serif;<br /> background-color: #fff;<br /> margin: 0 auto;<br /> line-height: 1.4em;<br /> overflow: auto;<br /> width: 100%;<br /> padding: 0 10px 0;<br /> }<br /> #lightbox-container-image-data {<br /> padding: 0 10px; <br /> color: #666; <br /> }<br /> #lightbox-container-image-data #lightbox-image-details { <br /> width: 70%; <br /> float: left; <br /> text-align: left; <br /> } <br /> #lightbox-image-details-caption { font-weight: bold; }<br /> #lightbox-image-details-currentNumber {<br /> display: block; <br /> clear: left; <br /> padding-bottom: 1.0em; <br /> } <br /> #lightbox-secNav-btnClose {<br /> width: 66px; <br /> float: right;<br /> padding-bottom: 0.7em; <br /> }<br /> /*end lightbox css*/


Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)

</head>

Step 5. Copy and paste the following code Directly Above / Before

<!--Start lightbox scripts info from http://www.spiceupyourblog.com--><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/> <script src='http://suyb.googlecode.com/files/jquery.lightbox-0.5.min.js' type='text/javascript'/> <script type='text/javascript'> $(function() { $('a.spicebox') .lightBox({ overlayOpacity: 0.6, imageLoading: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_H62sXpzTQu6Kp2dRt7iXJa1yRUhJ-4yF-xOgdTY04N_KR5J2HmLRbXPOz2_yFr57I7ISmZgw7bIEj94xzdcIwvq5wPwP8nxt8usRRcxhjf8QHH3P6VttqKJ4OFMRwCspCLL09rURaSqp/s1600/lightbox-ico-loading.gif', imageBtnClose: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUR17AZM5gRohRxoZ3NfkFBkqyBd90-xR7AIEqIkAHWUllXWygog_45IcAbYTYrs5_LGrZkxXOYqk6rBbONk3qVH-VyUy7h03_vTqyjuS7QZjkoiXrVXWZgGL42SEpJMLnxHaA-1VfAf3-/s1600/lightbox-btn-close.gif', imageBtnPrev: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_338vD_2XnYiWYJlOpCTOWJeXe13QA7R2hwAWIdqib7taa-S8yTELGF7rV_958nwu3krF7hEWBcVjLpK0n3Fh91dzhb5_fyVq-BPYWnNkOgwIE6Y2aKWFUJzcBpfMYFnPkRbTUUis08d/s1600/lightbox-btn-prev.gif', imageBtnNext: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgungBnyBH8nOy7g9AUp9TCGcKVOCvl298QdyKZWnUkxqdyELyupvIGeRRU4r0cn_WzjLxCZj-L5l-_uyDTtyPvQPp3s4pYoTlPg7Y1OuHl_4_9K-703mn8E5zLK-n9rA7qfjbEEYYOtU1A/s1600/lightbox-btn-next.gif', containerResizeSpeed: 350, txtImage: 'Image', txtOf: 'Of' }); }); </script><br /> <!--end lightbox scripts-->


Save your template, that's the Css and Script added next we see how to add it to selected images.

When you add an image to your blog that you want to use the lightbox effect simply add class="spicebox" and title="Description Here".

<a class="spicebox" title="Image Description Here" href="http://image.jpg"><img src="http://image.jpg"></a>


On an image uploaded directly to Blogger it would look like this :
<div class="separator" style="clear: both; text-align: center;"><a class="spicebox" title="Image Description Here" href="http://1.bp.blogspot.com/image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/image.jpg" width="320" /></a></div>

SAMPLE :