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