How to set up multiple (Same Gallery) Jquery.popeye in a webpage?

Dear all,
I was trying to set up Jquery.Popeye in my website and I wanted to use several gallery(Same one). http://www.dublinawamileague.net46.net/test.html Here you can see my work and I found it is hard to fix this. I tried several days but couldnt do that. My 3rd gallery is not working properly and the second and 3rd gallery showing Nav-panel different way.I am sure where to fix this.I also tried to edit “jquery.popeye.style.css”. But it didnt work either.Can you plz help me on this.

Here is my jquery.popeye.style.css style sheet

HTML Code:

---

/* fallback styles for image list */
.ppy-imglist {
    width:          100%;
    display:        block;
    overflow:      hidden;
   
}
.ppy-imglist li {
    padding:        10px;
    border:        1px solid #f0f0f0;
    border-radius:          5px;
    -moz-border-radius:    5px;
    -khtml-border-radius:  5px;
    -webkit-border-radius:  5px;
    background:    #fff;
    list-style:    none;
    float:          left;
    display:        block;
    margin:        0 10px 10px 0;
}
.ppy-imglist li a img {
    display:        block;
    border:        0;
}


/* popeye example 4 */
#ppy1.ppy-active {
    width:          240px;
    float:          left;
    margin:        0 20px 10px 0;
}

#ppy1 .ppy-outer {
}

#ppy1 .ppy-stage {
    width:          240px;
    height:        180px;
    overflow:      hidden;
    cursor:        pointer;
}

#ppy1 .ppy-stagewrap {
    background:    #333;
}

#ppy1 .ppy-caption {
    margin:        10px 0 0 0;
    padding:        0 5px 3px 0;
    font-size:      0.9em;
    line-height:    1.3em;
    color:          #666;
    height:        60px;
    overflow:      auto;
    border-bottom:  1px solid #ddd;
}

#ppy1.ppy-expanded .ppy-caption {
    margin:        0;
    padding:        10px;
    color:          #fff;
    border-bottom:  1px solid #333;
    background:    #666;
}

#ppy1 .ppy-counter {
    background:    #333;
    color:          #fff;
    padding:        0 5px;
    font-size:      0.8em;
    position:      absolute;
    bottom:        0;
    left:          0;
    opacity:        0.7;
}

#ppy1 .ppy-loading {
    background:    #333 url([url]http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/loading3.gif[/url]) no-repeat center !important;
}

#ppy1 .ppy-nav {
    background:    #333;
    background:    rgba(51,51,51,0.7);
    background:    -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgba(51,51,51,1)),
        color-stop(0.4, rgba(51,51,51,0.7)),
        color-stop(0.6, rgba(51,51,51,0.7)),
        color-stop(1, rgba(51,51,51,1))
    );
    background:    -moz-linear-gradient(
        center bottom,
        rgba(51,51,51,1) 0%,
        rgba(51,51,51,0.7) 40%,
        rgba(51,51,51,0.7) 60%,
        rgba(51,51,51,1) 100%
    );
    width:          100%;
    height:        100%;
    text-align:    center;
}
#ppy1 .nav-wrap {
    width:          104px;
    height:        32px;
    padding:        30% 0 0 0;
    margin:        0 auto 0 auto;
}
#ppy1 .ppy-nav a {
    display:        block;
    overflow:      hidden;
    text-indent:    -900em;
    height:        22px;
    float:          left;
    padding:        5px;
    border-radius:          5px;
    -moz-border-radius:    5px;
    -khtml-border-radius:  5px;
    -webkit-border-radius:  5px;
}


#ppy1 .ppy-nav a:hover {
    background-color:  #333;
    cursor:        pointer;
}

/* popeye example 4 */
#ppy2.ppy-active {
    width:          240px;
    float:          left;
    margin:        0 20px 10px 0;
}

#ppy2 .ppy-outer {
}

#ppy2 .ppy-stage {
    width:          240px;
    height:        180px;
    overflow:      hidden;
    cursor:        pointer;
}

#ppy2 .ppy-stagewrap {
    background:    #333;
}

#ppy2 .ppy-caption {
    margin:        10px 0 0 0;
    padding:        0 5px 3px 0;
    font-size:      0.9em;
    line-height:    1.3em;
    color:          #666;
    height:        60px;
    overflow:      auto;
    border-bottom:  1px solid #ddd;
}

#ppy2.ppy-expanded .ppy-caption {
    margin:        0;
    padding:        10px;
    color:          #fff;
    border-bottom:  1px solid #333;
    background:    #666;
}

#ppy2 .ppy-counter {
    background:    #333;
    color:          #fff;
    padding:        0 5px;
    font-size:      0.8em;
    position:      absolute;
    bottom:        0;
    left:          0;
    opacity:        0.7;
}

#ppy2 .ppy-loading {
    background:    #333 url(([url]http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/loading3.gif[/url]) no-repeat center !important;
}

#ppy2 .ppy-nav {
    background:    #333;
    background:    rgba(51,51,51,0.7);
    background:    -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgba(51,51,51,1)),
        color-stop(0.4, rgba(51,51,51,0.7)),
        color-stop(0.6, rgba(51,51,51,0.7)),
        color-stop(1, rgba(51,51,51,1))
    );

    width:          100%;
    height:        100%;
    text-align:    center;
}
#ppy2 .nav-wrap {
    width:          104px;
    height:        32px;
    padding:        30% 0 0 0;
    margin:        0 auto 0 auto;
}
#ppy2 .ppy-nav a {
    display:        block;
    overflow:      hidden;
    text-indent:    -900em;
    height:        22px;
    float:          left;
    padding:        5px;
    border-radius:          5px;
    -moz-border-radius:    5px;
    -khtml-border-radius:  5px;
    -webkit-border-radius:  5px;
}


#ppy2 .ppy-nav a:hover {
    background-color:  #333;
    cursor:        pointer;
}


/* popeye example 6 */
#ppy3.ppy-active {
    width:          240px;
    float:          left;
    margin:        0 20px 10px 0;
}

#ppy3 .ppy-outer {
}

#ppy3 .ppy-stage {
    width:          240px;
    height:        180px;
    overflow:      hidden;
    cursor:        pointer;
}

#ppy3 .ppy-stagewrap {
    background:    #333;
}

#ppy3 .ppy-caption {
    margin:        10px 0 0 0;
    padding:        0 5px 3px 0;
    font-size:      0.9em;
    line-height:    1.3em;
    color:          #666;
    height:        60px;
    overflow:      auto;
    border-bottom:  1px solid #ddd;
}

#ppy3.ppy-expanded .ppy-caption {
    margin:        0;
    padding:        10px;
    color:          #fff;
    border-bottom:  1px solid #333;
    background:    #666;
}

#ppy3 .ppy-counter {
    background:    #333;
    color:          #fff;
    padding:        0 5px;
    font-size:      0.8em;
    position:      absolute;
    bottom:        0;
    left:          0;
    opacity:        0.7;
}

#ppy3 .ppy-loading {
    background:    #333 url([url]http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/loading3.gif[/url]) no-repeat center !important;
}

#ppy3 .ppy-nav {
    background:    #333;
    background:    rgba(51,51,51,0.7);
    background:    -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgba(51,51,51,1)),
        color-stop(0.4, rgba(51,51,51,0.7)),
        color-stop(0.6, rgba(51,51,51,0.7)),
        color-stop(1, rgba(51,51,51,1))
    );
    background:    -moz-linear-gradient(
        center bottom,
        rgba(51,51,51,1) 0%,
        rgba(51,51,51,0.7) 40%,
        rgba(51,51,51,0.7) 60%,
        rgba(51,51,51,1) 100%
    );
    width:          100%;
    height:        100%;
    text-align:    center;
}
#ppy3 .nav-wrap {
    width:          104px;
    height:        32px;
    padding:        30% 0 0 0;
    margin:        0 auto 0 auto;
}
#ppy3 .ppy-nav a {
    display:        block;
    overflow:      hidden;
    text-indent:    -900em;
    height:        22px;
    float:          left;
    padding:        5px;
    border-radius:          5px;
    -moz-border-radius:    5px;
    -khtml-border-radius:  5px;
    -webkit-border-radius:  5px;
}

#ppy3 .ppy-nav a:hover {
    background-color:  #333;
    cursor:        pointer;
}

---

I have also used Java script

Code:

---

<script type="text/javascript">
    <!--//<![CDATA[
   
    $(document).ready(function () {
        var options1 = {
            caption:    'hover',
            opacity:    1
        }
   
        var options2 = {
            caption:    'permanent',
            opacity:    1
        }

        var options3 = {
            caption:    'hover',
            opacity:    1
        }

        $('#ppy1').popeye(options1);
        $('#ppy2').popeye(options2);
        $('#ppy3').popeye(options3);
    });
   
    //]]>-->
</script>

---

I have also included "jquery.popeye-2.1.min.js" and "jquery.popeye-2.1.js" from this website http://dev.herr-schuessler.de/jquery/popeye. I didnt change anything inside those .JS files.

Any help will be appriciated.
Thanks & Regards,
Alak

Replace your http://www.dublinawamileague.net46.net/Archieve%20all/css/jquery.popeye.style.css with:

Code:

---

/*
 * jquery.popeye.style.css 2.1
 *
 * Example styles for jQuery.popeye
 *(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/prev3.png)
 * Copyright (C) 2011 Christoph Schuessler (schreib@herr-schuessler.de)
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 */

/* fallback styles for image list */
.ppy-imglist {
    width:          100%;
    display:        block;
    overflow:      hidden;
   
}
.ppy-imglist li {
    padding:        10px;
    border:        1px solid #f0f0f0;
    border-radius:          5px;
    -moz-border-radius:    5px;
    -khtml-border-radius:  5px;
    -webkit-border-radius:  5px;
    background:    #fff;
    list-style:    none;
    float:          left;
    display:        block;
    margin:        0 10px 10px 0;
}
.ppy-imglist li a img {
    display:        block;
    border:        0;
}


/* popeye example 1 */
.ppy-active {
    width:          240px;
    float:          left;
    margin:        0 20px 10px 0;
}

.ppy-outer {
}

.ppy-stage {
    width:          240px;
    height:        180px;
    overflow:      hidden;
    cursor:        pointer;
}

.ppy-stagewrap {
    background:    #333;
}

.ppy-caption {
    margin:        10px 0 0 0;
    padding:        0 5px 3px 0;
    font-size:      0.9em;
    line-height:    1.3em;
    color:          #666;
    height:        60px;
    overflow:      auto;
    border-bottom:  1px solid #ddd;
}

.ppy-expanded .ppy-caption {
    margin:        0;
    padding:        10px;
    color:          #fff;
    border-bottom:  1px solid #333;
    background:    #666;
}

.ppy-counter {
    background:    #333;
    color:          #fff;
    padding:        0 5px;
    font-size:      0.8em;
    position:      absolute;
    bottom:        0;
    left:          0;
    opacity:        0.7;
}

.ppy-loading {
    background:    #333 url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/loading3.gif) no-repeat center !important;
}

.ppy-nav {
    background:    #333;
    background:    rgba(51,51,51,0.7);
    background:    -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgba(51,51,51,1)),
        color-stop(0.4, rgba(51,51,51,0.7)),
        color-stop(0.6, rgba(51,51,51,0.7)),
        color-stop(1, rgba(51,51,51,1))
    );
    background:    -moz-linear-gradient(
        center bottom,
        rgba(51,51,51,1) 0%,
        rgba(51,51,51,0.7) 40%,
        rgba(51,51,51,0.7) 60%,
        rgba(51,51,51,1) 100%
    );
    width:          100%;
    height:        100%;
    text-align:    center;
}
.nav-wrap {
    width:          104px;
    height:        32px;
    padding:        30% 0 0 0;
    margin:        0 auto 0 auto;
}
.ppy-nav a {
    display:        block;
    overflow:      hidden;
    text-indent:    -900em;
    height:        22px;
    float:          left;
    padding:        5px;
    border-radius:          5px;
    -moz-border-radius:    5px;
    -khtml-border-radius:  5px;
    -webkit-border-radius:  5px;
}

.ppy-prev {
    width:          22px;
    background:    url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/prev3.png) no-repeat center;
}

.ppy-next {
    width:          22px;
    background:    url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/next3.png) no-repeat center;
}

.ppy-switch-enlarge {
    width:          30px;
    background:    url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/enlarge3.png) no-repeat center;
}

.ppy-switch-compact {
    width:          30px;
    background:    url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/compact3.png) no-repeat center;
}

.ppy-play {
    width:          22px;
    background:    url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/play3.png) no-repeat center;
}

.ppy-pause {
    width:          22px;
    background:    url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/pause3.png) no-repeat center;
}

.ppy-nav a:hover {
    background-color:  #333;
    cursor:        pointer;
}

---

Oh, and you don't need this:

Code:

---

<script type="text/javascript" src="Archieve all/lib/jquery.popeye-2.1.js"></script>

---

because you already have this:

Code:

---

<script type="text/javascript" src="Archieve all/lib/jquery.popeye-2.1.min.js"></script>

---

Thanks John, It is working now....I was wondering why there shouldnt be multiple Ids like Pop1, pop2, pop3...in CSS style sheets. In Html were not these correspondoning each boxes? And where there were actual error? Can you plz tell me that?
Thanks.

You only need to distinguish between the id's if things are different. And then, only where they differ.

I can't really tell you where the error was though. Everything looked right in Chrome, but not in any other browser. So it must have been a subtle error. All I did was remove all references to id and drop all the rules that hadn't been for pop1. I did that because obviously pop1 looked right, so it stood to reason that it's styles should work for all three.

Yeah, I forgot to mention that in Chorme all three were looking right. But after all these it was a great work. Thanks very much.