TechChimp

Implement Lightbox 2 In Your Blogger Blog

Written by GeekChimp on 11:30 PM

 

Lightbox is javascript application used to view larger versions of images without having to leave the current page.Click on the image below to see preview.

Preview





How it works (From wikipedia)

On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of the image using a gliding animation. Lightbox determines which images will be shown in the modal window through the XHTML "rel" attribute, which is used on an element wrapped around the element. Lightbox also provides a way to attach captions to images and to run a slide show, which can be navigated using the arrow keys.

Installation 

• Login to blogger dashboard --> Template --> Edit Html
• Find section </head>
• Paste the following code just above section

<!--Light Box Code Starts-->

<style>

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }



#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }



#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#imageContainer&gt;#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}



#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDIUNTs0dOSZeGZKrws6fOOXUYPSL7OruA-In1PdSS7qDIvxeJ5naBGyBjoYdXSiWqgqha4UQvUr6wl54vaWntR3fBVSqlTCcD924q_OkJo7RNsG2iXKnzi33C7j1MZzIWMJG9x0Tl8Pc/) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYUHvcUzlg2LItR9T4UnfdA6wTFRb9gTvYZX4EmWviaJjcSCIZWUzcMwS36zNLoUyv0fnTf-d-u7kOrHXupaNZib7n_W6DPbd5EBIrvzzay40ekpPcK0bTxA_6M2BdrMR1REHjn9i-gU/) right 15% no-repeat; }



#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }



#imageData{ padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }

#imageData #caption{ font-weight: bold; }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }

#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}



#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

round-color: #000; }

lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

round-color: #000; }

</style>

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>

<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>

<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>

<!--Light Box Code Ends-->

• Now while inserting image in blog post use this code

<a href="IMAGE-LINK" rel="lightbox[album-name]" title="IMAGE-TITLE"><img src="IMAGE-LINK" /></a>

• You can also Group images to create album like interface.

<a href="IMAGE-LINK1" rel="lightbox[album-name]" title="IMAGE-TITLE1"><img src="IMAGE-LINK1" /></a>

<a href="IMAGE-LINK2" rel="lightbox[album-name]" title="IMAGE-TITLE2"><img src="IMAGE-LINK2" /></a>

<a href="IMAGE-LINK3" rel="lightbox[album-name]" title="IMAGE-TITLE3"><img src="IMAGE-LINK3" /></a>

<a href="IMAGE-LINK4" rel="lightbox[album-name]" title="IMAGE-TITLE4"><img src="IMAGE-LINK4" /></a>

<a href="IMAGE-LINK5" rel="lightbox[album-name]" title="IMAGE-TITLE5"><img src="IMAGE-LINK5" /></a>

Sample 

• Single Image

• Album

Source : LightBox2 [via]