Jquery Lightbox for Blogger | Blogspot

jquery lightbox in blogger.. jquery may be difficult to apply to a Blogspot blog but it is not imposible. this simple way is to host files on google and link jquery to your blogger. i have added a jquery image gallery to my blog below is the demo of jquery image viewer, image gallery, it includes three parts .js file CSS part and Naming the image to work with jquery script.

Blogger jquery lightbox tutorial

Demo of lightbox in Blogger/Blogspot:

lightbox in blogger | blogspot lightbox tutorial | blogger jquery lightbox lightbox in blogger | blogspot lightbox tutorial | blogger jquery lightbox
lightbox in blogger | blogspot lightbox tutorial | blogger jquery lightbox lightbox in blogger | blogspot lightbox tutorial | blogger jquery lightbox

How to install lightbox in Blogger


step 1: adding jquery in Blogger:

Copy the below code and past it after the <Head> section in Edit HTML of the Blogger template
Incase lightbox does not work change the position of this code in head of the template... try adding above </HEAD> or after the title and meta tags...

<script src='http://jquery-hosting-blogge.googlecode.com/files/lightbox.js' type='text/javascript'/>

step 2: adding style to lightbox:


To add CSS code to your Blog, Go to Design>Edit HTML, find ]]</b:skin> past the code above it and Save Template

OR Go to Template Designer>Advanced>Add CSS, Past the code and click on Apply to Blog
#lightbox{
 background-color:#eee;
 padding: 10px;
 border-bottom: 2px solid #666;
 border-right: 2px solid #666;
 }
#lightboxDetails{
 font-size: 0.8em;
 padding-top: 0.4em;
 } 
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(http://1.bp.blogspot.com/-B6R41EjOobU/TrZkBklKcrI/AAAAAAAAEk8/dBzVL1ojJSY/s1600/overlay.png); }

* html #overlay{
 background-color: #333;
 background-color: transparent;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifSxze0hBVfJ-CqDw3ChQbjMz6vEDTbZgXuQ8Es5VKu4uomY3PN4y9xLq6x6swklLxuwm9fEOLxxkwM0adNyPSyhvTsLOZI4HlmjbsRsJ2vvT2lF7WYEw8ZCkp358xRrEId95BVZp1CISA/s320/overlay.png", sizingMethod="scale");
 }

step 3: Adding rel="lightbox" to image:

Simply give image a rel rel="lightbox" attribution to the image
<a href="image-url" rel="lightbox" title="lightbox"><img src="url-of-image" width="150" Height="160"/></a>
upload all images and add rel="lightbox" to all images to make lightbox image gallery <a href="image-url" rel="lightbox"><img src="image"></a>

Comments


  1. You have discussed an interesting topic that everybody should know. Very well explained with examples. I have found a similar website
    lightboxes
    visit the site to know more about sinking.

    ReplyDelete
  2. i like your feed, Lightbox is one of the most effective advertising tools
    I'm happy to see your site

    ReplyDelete

Post a Comment