jquery link

my custom css

slimbox 2

analytics

Friday, March 11, 2011

Installing jQuery lightBox plugin on Blogger...

First of all thanks a lot to:

Now, here's the steps required to install jQuery lightBox plugin on Blogger

Pre-installation steps
1) Download the plugin from here.

2) Extract the zip file.

3) Upload images in \jquery-lightbox-0.5\images to Picasa Web Albums.

4) Open \jquery-lightbox-0.5\js\jquery.lightbox-0.5.js.

5) Go to line 79 and replace the code below
    // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
    for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
        settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
    }
with this code and save changes
    // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
    for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
        if(jQueryMatchedObj[i].getAttribute('rel')==objClicked.getAttribute('rel')) {
            settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
        }
    }
Installation steps
1) Login to your Blogger Dashboard.

2) Go to Design > Page Elements, add three HTML/JavaScript gadgets and place it on top of Blog Posts like shown below.

Page Elements


3) Open \jquery-lightbox-0.5\css\jquery.lightbox-0.5.css, copy and paste the content (within <style> tag) into the first gadget and save the changes.

4) Open \jquery-lightbox-0.5\js\jquery.lightbox-0.5.js, copy and paste the content (within <script> tag) into the second gadget and save the changes. Don't forget to add link to jQuery library like shown below. Use jQuery 1.3.2, later version will cause problems with this plugin on IE8 (use latest version if you plan to ignore IE8).
    <script language='javascript' type='text/javascript' src='http://code.jquery.com/jquery-1.3.2.min.js'></script>
    
    <script language="javascript" type="text/javascript">
    // this is where you paste the content of \jquery-lightbox-0.5\js\jquery.lightbox-0.5.js
    </script>
5) For the third gadget, copy and paste the code below then save the changes.
    <script type="text/javascript">
    $(document).ready(function() {
        $('a[rel^=lightbox]').lightBox({
            imageLoading: 'your-url/lightbox-ico-loading.gif',
            imageBtnClose: 'your-url/lightbox-btn-close.gif',
            imageBtnPrev: 'your-url/lightbox-btn-prev.gif',
            imageBtnNext: 'your-url/lightbox-btn-next.gif',
            imageBlank: 'your-url/lightbox-blank.gif'
        }); 
    });
    </script>
Test the plugin.
1) Edit any post with image.

2) Add rel and title to image href.
    <a href="your image" ... rel="lightbox" title="title">
        <img src="your thumbnail image" />
    </a>
    
    <-- for grouping -->
    <a href="your image" ... rel="lightbox[album]" title="title">
        <img src="your thumbnail image" />
    </a>
3) For html generated from old editor, you need to remove onblur attribute and rename s1600-h to s1600 in the url.
    <-- change the html from this -->
    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jkdsue/AAAABB/s1600-h/someimage.jpg" ...>
        <img src="your thumbnail image" />
    </a>
    
    <-- into this -->
    <a href="http://1.bp.blogspot.com/_jkdsue/AAAABB/s1600/someimage.jpg" ... rel="lightbox" title="title">
        <img src="your thumbnail image" />
    </a>
4) Save changes and view your post. Click the image and you should see lightbox in action.

Next, I'll post on how to auto activate lightBox on Blogger. Feedback and comment are most welcome.

5 comments:

  1. How For Show Youtube Video Like Lightbox.com Bro....:)
    Thank's....

    ReplyDelete
  2. This post was quite old. maybe they've came up with new solution. Plus, blogspot has provided built in functionality to handle images. As for the youtube video, I've never tried that.

    ReplyDelete