Implementing jquery.popeye in Blogger

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.
Though the script is quick and easy to setup, it offers great flexibility in both behaviour and styling.
jQuery.popeye takes a different approach: not only allows it for browsing all thumbnails as well as the large images in a single image space, it also repects the page flow and stays anchored and rooted in the webpage at all times, thus giving a less disruptive user experience than modal windows.

Note: jQuery.popeye comes in three different styles of which only one works fine with Blogger templates, the rest have some minor bugs due to conflicting CSS rules with default Blogger templates.

             

Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/jquery.popeye/css/popeye/jquery.popeye.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="http://your-server-url/jquery.popeye/css/popeye/jquery.popeye.style.css" media="screen" /> 
<!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="your-server-url/jquery.popeye/lib/popeye/jquery.popeye-2.0.4.js"></script>

2.Go to the Post/Page you want to add jQuery.popeye and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/jquery.popeye/css/popeye/jquery.popeye.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="your-server-url/jquery.popeye/css/popeye/jquery.popeye.style.css" media="screen" /> 
<!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="your-server-url/jquery.popeye/lib/popeye/jquery.popeye-2.0.4.js"></script>

4.Now adding the images into jQuery.popeye is a little different ,see the following Markup:

<div class="ppy" id="ppy2">
<ul class="ppy-imglist">
<li><a href="a.jpg"><img src="a_m.jpg"  /></a></li>
<li><a href="f.jpg"><img src="f_m.jpg"  /></a></li>
<li><a href="3.jpg"><img src="3_m.jpg"  /></a></li>
<li><a href="e.jpg"><img src="e_m.jpg"  /></a></li>
<li><a href="d.jpg"><img src="d_m.jpg"  /></a></li>
<li><a href="4.jpg"><img src="4_m.jpg"  /></a></li>
<li><a href="2.jpg"><img src="2_m.jpg"  /></a></li>
<li><a href="1.jpg"><img src="1_m.jpg"  /></a></li>
<li><a href="a3.jpg"><img src="a3_m.jpg"  /></a></li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong> 
</div>
</div>
<div class="ppy-nav">
<div class="nav-wrap">
<a class="ppy-next" title="Next image">Next image</a> 
<a class="ppy-prev" title="Previous image">Previous image</a> 
<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a> 
<a class="ppy-switch-compact" title="Close">Close</a> 
</div>
</div>
</div>
</div>

The main thing to note Here is that to add images just focus on the ul list staring from Line 2

This plugin also offers the ability to show small descriptions when a item is hovered upon.To add the same just include your description in alt tags inside the img tags (Like alt="This is the Sun")



Now add the following JavaScript to link it:

<script type="text/javascript"> 
    <!--//<![CDATA[

    $(document).ready(function () {
        var options2 = {
            caption:    false,
            navigation: 'permanent',
            direction:  'left'
        }
    
        $('#ppy2').popeye(options2);
        
    });
    
    //]]>-->
</script> 

5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

             

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox