jquery link

my custom css

slimbox 2

analytics

Wednesday, March 16, 2011

Auto activate Slimbox 2 on Blogger...

Why I switched to Slimbox 2?
  • No issues when using with latest jQuery library on IE8.
  • Small footprint.
  • Centers images vertically on startup, not just horizontally.

Installation steps
1) Download the plugin from here.

2) Extract the file.

3) Upload images in \slimbox-2.04\css to Picasa Web Albums.

4) Login to your Blogger Dashboard.

5) Go to Design > Page Elements, add two HTML/JavaScript gadgets and place it below header.

6) Open \slimbox-2.04\css\slimbox2.css, copy the content and paste it into first HTML/JavaScript gadget (within <style> tag) and save changes. Note, need to tweak images url in css so that it'll point to our image in Picasa Web.
    <style type="text/css">
    /* paste \slimbox-2.04\css\slimbox2.css content here */
    </style>
7) Open \slimbox-2.04\js\slimbox2.js, copy the content and paste it into second HTML/JavaScript gadget (within <script> tag) and save changes.
    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

    <script type="text/javascript">
    /* paste \slimbox-2.04\js\slimbox2.js content here */
    </script>
8) Save changes to Page Elements.

Auto activation
Slimbox 2 provide an auto activation script within the distribution for convenient use. Here's how to:

1) Open \slimbox-2.04\extra\autoactivation.js and copy the content.

2) On Blogger, go to Design > Page Elements. Open second HTML/Javascript gadget that contains Slimbox JS. Replace the code block below with the one from autoactivation.js.
    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
        jQuery(function($) {
            $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
                return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
            });
        });
    }
3) Save changes.

Note:
I've used autoactivation.js but somehow it didn't grouped my images correctly. Something might be wrong from my side. For now, I'm using my own auto activation code below. Not as elegant as the one that came from Slimbox, but at least it works for me.
    <script language="javascript" type="text/javascript">

    ...

    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
        jQuery(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']").slimbox({/* Put custom options here */}, null, function(el) {
                return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
            });
        });
    }
    </script>
Update (17/03/2011)
Found out that the combination of Slimbox 2, jQuery 1.5.1 and SyntaxHighlighter 3 will caused the image viewer to stop working on IE8 (only IE8). Removed SyntaxHighlighter will solve the problem. I need to find a better way to fix this.

No comments:

Post a Comment