Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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
    Last edited by keyboard; 09-25-2012 at 10:56 PM. Reason: Format - Code Tags

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,946
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 09-23-2012 at 05:13 PM. Reason: add "Oh and . . ."
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,946
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Resolved jQuery .post multiple callback
    By ggalan in forum JavaScript
    Replies: 1
    Last Post: 12-07-2011, 01:37 AM
  2. jquery ajaxlink multiple content
    By Mohammadreza in forum JavaScript
    Replies: 0
    Last Post: 11-19-2011, 12:40 AM
  3. jquery lava lamp with multiple menu
    By davelf in forum Looking for such a script or service
    Replies: 1
    Last Post: 07-21-2011, 02:33 AM
  4. jQuery Image Magnify multiple images
    By pvernaglia in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-16-2010, 04:53 PM
  5. Random gallery for webpage
    By Amen-Ra in forum JavaScript
    Replies: 0
    Last Post: 05-03-2008, 08:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •