1 Topic by alak

  • alak
  • Guest

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../../../post/506/_/Archieve all/gfx/popeye/forum_subdomain/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(../../../post/506/_/Archieve all/gfx/popeye/forum_subdomain/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../../../post/506/_/Archieve all/gfx/popeye/forum_subdomain/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

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

  • From: La Coruña
  • Registered: 2012-08-04
  • Posts: 394
  • Reputation : [ 46 | 0 ]

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 Reply by alak

  • alak
  • Guest

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

I tried to download that plugin but I couldnt .

  • Awilum
  • Awilum
  • Monstra Founder & Lead Developer
  • Offline
  • From: #Ukraine #USA
  • Registered: 2012-04-12
  • Posts: 354
  • Reputation : [ 18 | 0 ]

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

Awilum's Website

5 Reply by alak

  • alak
  • Guest

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 Reply by alak

  • alak
  • Guest

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.

  • Awilum
  • Awilum
  • Monstra Founder & Lead Developer
  • Offline
  • From: #Ukraine #USA
  • Registered: 2012-04-12
  • Posts: 354
  • Reputation : [ 18 | 0 ]

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

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

Awilum's Website

8 Reply by alak

  • alak
  • Guest

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

Awilum wrote:

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

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 .

  • Awilum
  • Awilum
  • Monstra Founder & Lead Developer
  • Offline
  • From: #Ukraine #USA
  • Registered: 2012-04-12
  • Posts: 354
  • Reputation : [ 18 | 0 ]

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

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

Awilum's Website

  • From: La Coruña
  • Registered: 2012-08-04
  • Posts: 394
  • Reputation : [ 46 | 0 ]

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

  • Awilum
  • Awilum
  • Monstra Founder & Lead Developer
  • Offline
  • From: #Ukraine #USA
  • Registered: 2012-04-12
  • Posts: 354
  • Reputation : [ 18 | 0 ]

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

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

Awilum's Website

12 Reply by alak

  • alak
  • Guest

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

  • Awilum
  • Awilum
  • Monstra Founder & Lead Developer
  • Offline
  • From: #Ukraine #USA
  • Registered: 2012-04-12
  • Posts: 354
  • Reputation : [ 18 | 0 ]

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

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

Awilum's Website

14 Reply by Alak

  • Alak
  • Guest

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 Reply by alak

  • alak
  • Guest

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