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


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

Post a Comment

hello ^^~
I want to resize images for better
Can you help me ^^~
thanks a lot :D

I mean to adjust the slide frame of mind ^^~
Thanks againt :x

I suppose you are wanting to have larger images in the magnified mode.

To do that go to jquery.popeye-2.0.4.js and search for "width" ,you will find something like this:

position: 'absolute',
width: 'auto',
height: 'auto',

change auto of both width as well as height with a value of your choice in pixels

tks very much ^^~

your blog is very nice :D
I hope you will visit my blog :D

http://pu3k.blogspot.com/