1

Topic: How to setup Multiple gallery(Same gallery) in 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]

/* 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(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/loading3.gif) 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-prev {
    width:          22px;
    background:     url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/prev3.png) no-repeat center;
}

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

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

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

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

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

#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((http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/loading3.gif) 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))
    );
    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;
}
#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-prev {
    width:          22px;
    background:     url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/prev3.png) no-repeat center;
}

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

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

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

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

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

#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(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/loading3.gif) 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-prev {
    width:          22px;
    background:     url(http://www.dublinawamileague.net46.net/Archieve%20all/gfx/popeye/prev1.png) no-repeat center;
}

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

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

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

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

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

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


I have also used Java script <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

Re: How to setup Multiple gallery(Same gallery) in webpage

you have tried this plugin ?

http://forum.monstra.org/topic/144/new- … ye-jquery/

..::: Moncho Varela ::::..   ..::: @Nakome ::::..   ..::: Github ::::..

nakome's Website

3

Re: How to setup Multiple gallery(Same gallery) in webpage

I tried to download that plugin but I couldnt .

Re: How to setup Multiple gallery(Same gallery) in webpage

1) donwload plugin http://forum.monstra.org/topic/144/new- … ye-jquery/
2) install plugin http://monstra.org/documentation/plugins-installation

5

Re: How to setup Multiple gallery(Same gallery) in webpage

Can you pls just show me where I need to do that change and what CSS style or .JS need to be change in order to do that successfully? Thaanks

6

Re: How to setup Multiple gallery(Same gallery) in webpage

I couldnt save the Plugin in my local Machine coz It comes to me as "popeye_zip?dl=1" and it cant be downloaded.

Re: How to setup Multiple gallery(Same gallery) in webpage

https://www.dropbox.com/s/0fk6902doz7kh2g/popeye.zip

8

Re: How to setup Multiple gallery(Same gallery) in webpage

I know that already . But I am using windows 7. From directly I wanted to download that but it comes to me as a different format and it is not saving in my laptop. I also wanted to register in drop box but I couldnt .

Re: How to setup Multiple gallery(Same gallery) in webpage

Mirror Link: http://monstra.org/public/uploads/plugins/popeye.zip

Re: How to setup Multiple gallery(Same gallery) in webpage

I am using windows 7 and it works fine  try this link

..::: Moncho Varela ::::..   ..::: @Nakome ::::..   ..::: Github ::::..

nakome's Website

Re: How to setup Multiple gallery(Same gallery) in webpage

>>I am using windows 7
Laptop and Windows 7 too

12

Re: How to setup Multiple gallery(Same gallery) in webpage

Thanks at last I have downloaded that but I found its a .php. I dont have that much knowledge about php. Ok now so where I should begin this. A little instruction will be very helpful. Tahnks

Re: How to setup Multiple gallery(Same gallery) in webpage

2) install plugin http://monstra.org/documentation/plugins-installation

14

Re: How to setup Multiple gallery(Same gallery) in webpage

Hi Sorry, As I am new here, can you please tell me what Admin Panel did you mean. I have a FTP client but It doesnt have anything "Admin Panel" and also It doesnt have anything folder called "Plugins". Sorry again but If you can tell em in details,that might will help.
Thanks & Regards,
Alak

15

Re: How to setup Multiple gallery(Same gallery) in webpage

Now this has been sorted out.I can use several Pop-eye gallery now.Thanks