jquery link

my custom css

slimbox 2

analytics

Saturday, March 12, 2011

Auto activate lightBox on Blogger...

So, you have successfully installed jQuery lightBox plugin on your Blogger. Now the toughest part would be applying rel="lightbox" attribute to all your images (not to forget image grouping rel="lightbox[album-n]"). It's going to be a pain process if you have 50+ images in an n amount of posts. Worst, post from old editor required two more extra steps (removing onblur attribute and renaming s1600-h to s1600).

Using jQuery, this process can be automatically done without the need to change on html code. Here's the steps:

Prerequisites:
jQuery 1.3.2, later version will cause problems with this plugin on IE8 (use latest version if you plan to ignore IE8).

Steps:
1) Login to your Blogger Dashboard.

2) Go to Design > Page Elements.

3) Open the third HTML/JavaScript gadget as mentioned in my previous post (create a new one if you've installed the plugin by other methods).

Page Elements


4) Replace the old script with the new one below (assuming you've added the link to jQuery library before, otherwise add the link on top of the script below).
    <script type="text/javascript">
    $(document).ready(function() {
        $('div.post-body').each(function() {
            var $postbody = $(this);
            var index = $('div.post-body').index(this);
            
            $('a[href*=".jpg"],a[href*=".png"],a[href*=".gif"]', $postbody).each(function() {
                var $div = $(this).parent();
                var $title = $('p', $div);
                var htmltext = $title.html() != null ? $title.html() : '';

                if($(this).attr('onblur')) { $(this).removeAttr('onblur'); }

                var hrefval = $(this).attr('href');
                $(this).attr('href', hrefval.replace('s1600-h', 's1600'));

                if(!$(this).attr('rel')) { $(this).attr('rel', 'lightbox[album' + index + ']'); }
                if(!$(this).attr('title')) { $(this).attr('title', htmltext); }
            });
        });

        $('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>
5) Save changes.

Explanation:
1) Once page load completed, script will query for all <DIV>s that use post-body (you might need to change the script if you're using non-standard Blogger theme) css class.

2) Search an <A> elements with href value contains ".jpg", ".png" and ".gif" (case sensitive, add the uppercase value if needed) in each <DIV>.

3) Search <P> element for retrieving image title (this is for the structure that I've use like shown below). If none exist it'll return an empty string (compatible with other structure).
    <div>
        <a href="">
            <img src="" />
        </a>
        <p>title</p>
    </div>
4) Remove onblur attribute from <A> element if exist.

5) Rename "s1600-h" to "s1600" on <A> href attribute value.

6) Adding rel and title attribute to <A> element if none exist. Otherwise, leave an existing value.

Test:
1) Click image on any post and you'll see Lightbox in action.

2) One image group per post.

This might not be the best solution. Feedback and comment are most welcome.

Note:
Tested with images posted from both new and old editor. Using Google Chrome, Firefox, IE7, IE8 and IE9 RC.

Update (13/03/2011)
This auto activation script will not work with lightBox JS version. This is due to conflict between the JS version and jQuery library.

Update (14/03/2011)
Script updated. Added ".gif" to selector.

2 comments:

  1. Installing LightBox as of your guide worked fine for me, however this script doesn't.

    ReplyDelete
  2. That's because the script is searching for div with "post-body" css class (which is applicable to standard blogger theme).

    I've checked your blog and I think for you case it would be div with "date-outer" or "date-posts" class.

    ReplyDelete