JQuery Popeye Gallery

Developer
Boyd Massie
Size
6,817 Kb
Views
22,264
  1. JQuery Popeye Gallery Previews
  2. JQuery Popeye Gallery HTML Codes
  3. JQuery Popeye Gallery CSS Codes

How do I make an jquery popeye gallery?

A cool JQuery gallery - allows visitors to scroll between images and see caption/description. Also, shows a big image of your image without leaving the page. http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/. What is a jquery popeye gallery? How do you make a jquery popeye gallery? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.

JQuery Popeye Gallery Previews
IQ Test

JQuery Popeye Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JQuery Popeye Gallery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dev.herr-schuessler.de/jquery/popeye/lib/site/site.js"></script>
<script type="text/javascript" src="http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/lib/popeye/jquery.popeye-2.0.4.min.js"></script>
<div id="page-margins"> <div style="margin-top:20px"> <div class="ppy" id="ppy1"> <ul class="ppy-imglist"> <li> <a href="http://farm4.static.flickr.com/3461/3760102198_0e3de1eec3.jpg"> <img src="http://farm4.static.flickr.com/3461/3760102198_0e3de1eec3_m.jpg" alt="" /> </a> <span class="ppy-extcaption"> <strong>Eyes of a Holcocephala fusca Robber Fly</strong><br /> shot by flickr member Thomas Shahan<br /> <a href="http://www.flickr.com/photos/opoterser/3760102198/">View on flickr.com</a> </span> </li> <li> <a href="http://farm2.static.flickr.com/1317/908814138_9fa713a687.jpg"> <img src="http://farm2.static.flickr.com/1317/908814138_9fa713a687_m.jpg" alt="" /> </a> <span class="ppy-extcaption"> <strong>Crocodile's eye</strong><br /> shot by flickr member Tambako the Jaguar<br /> <a href="http://www.flickr.com/photos/tambako/908814138/">View on flickr.com</a> </span> </li> <li> <a href="http://farm4.static.flickr.com/3357/3633927491_d8864d5235.jpg"> <img src="http://farm4.static.flickr.com/3357/3633927491_d8864d5235_m.jpg" alt="" /> </a> <span class="ppy-extcaption"> <strong>Daipeem</strong><br /> shot by flickr member Furryscaly<br /> <a href="http://www.flickr.com/photos/furryscalyman/3633927491">View on flickr.com</a> </span> </li> <li> <a href="http://farm4.static.flickr.com/3335/3198858060_365ce0ba53.jpg"> <img src="http://farm4.static.flickr.com/3335/3198858060_365ce0ba53_m.jpg" alt="" /> </a> <span class="ppy-extcaption"> <strong>basiliscus plumifrons</strong><br /> shot by flickr member Joachim S. Müller<br /> <a href="http://www.flickr.com/photos/joachim_s_mueller/3198858060/in/set-72157612281941653/">View on flickr.com</a> </span> </li> <li> <a href="http://farm3.static.flickr.com/2597/4162969117_cbbc452a26.jpg"> <img src="http://farm3.static.flickr.com/2597/4162969117_cbbc452a26_m.jpg" alt="" /> </a> <span class="ppy-extcaption"> <strong>Eyes of Jumping spider</strong><br /> shot by flickr member Lukjonis<br /> <a href="http://www.flickr.com/photos/38628972@N05/4162969117/">View on flickr.com</a> </span> </li> </ul> <div class="ppy-outer"> <div class="ppy-stage"> <div class="ppy-nav"> <a class="ppy-prev" title="Previous image">Previous image</a> <a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a> <a class="ppy-switch-compact" title="Close">Close</a> <a class="ppy-next" title="Next image">Next image</a> </div> </div> </div> <div class="ppy-caption"> <div class="ppy-counter"> Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong> </div> <span class="ppy-text"></span> </div> </div> <h2>Example 1</h2> <p>The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. The caption displays the html code inside the <code>&lt;span class="ppy-extcaption"&gt;</code>.</p> <p>By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image.</p> <p class="mute">No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.</p> </div> <div class="example"> <h2>Example 2</h2> <div class="ppy" id="ppy2"> <ul class="ppy-imglist"> <li><a href="http://farm2.static.flickr.com/1428/1387537684_c1ce69e15a.jpg"><img src="http://farm2.static.flickr.com/1428/1387537684_c1ce69e15a_m.jpg" alt="yankee stadium shot by flickr member andre stoeriko" /></a></li> <li><a href="http://farm1.static.flickr.com/243/516200107_08d8e90a7f.jpg"><img src="http://farm1.static.flickr.com/243/516200107_08d8e90a7f_m.jpg" alt="Up There, shot by flickr member Nils Geylen" /></a></li> <li><a href="http://farm2.static.flickr.com/1230/587925720_95a59f71f3.jpg"><img src="http://farm2.static.flickr.com/1230/587925720_95a59f71f3_m.jpg" alt="99 Luftballons, shot by flickr member Iguana Jo" /></a></li> <li><a href="http://farm2.static.flickr.com/1077/1362086820_0e15e9a21e.jpg"><img src="http://farm2.static.flickr.com/1077/1362086820_0e15e9a21e_m.jpg" alt="The english bikers, shot by flickr member diebmx" /></a></li> <li><a href="http://farm1.static.flickr.com/144/405993690_5c5838a6d4.jpg"><img src="http://farm1.static.flickr.com/144/405993690_5c5838a6d4_m.jpg" alt="Acephalous, shot by flickr member wilhei55" /></a></li> <li><a href="http://farm2.static.flickr.com/1026/1405752274_fa0dd74922.jpg"><img src="http://farm2.static.flickr.com/1026/1405752274_fa0dd74922_m.jpg" alt="Always Reaching, shot by flickr member ecstaticist" /></a></li> <li><a href="http://farm2.static.flickr.com/1021/531198146_57e1fd9541.jpg"><img src="http://farm2.static.flickr.com/1021/531198146_57e1fd9541_m.jpg" alt="dive buddy, shot by flickr member leafbug" /></a></li> <li><a href="http://farm2.static.flickr.com/1134/593106554_1e3b2bda73.jpg"><img src="http://farm2.static.flickr.com/1134/593106554_1e3b2bda73_m.jpg" alt="True Blue, shot by flickr member welshbaloney" /></a></li> </ul> <div class="ppy-outer"> <div class="ppy-stage"> <div class="ppy-counter"> <strong class="ppy-current"></strong> / <strong class="ppy-total"></strong> </div> </div> <div class="ppy-nav"> <div class="nav-wrap"> <a class="ppy-next" title="Next image">Next image</a> <a class="ppy-prev" title="Previous image">Previous image</a> <a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a> <a class="ppy-switch-compact" title="Close">Close</a> </div> </div> </div> </div> <p>The second popeye-box has the following user-defined options: <code>direction: 'left'</code> - open to the left. <code>caption: false</code> - do not display captions (even though the images have alt tags with text). <code>navigation: 'permanent'</code> - the navigation is always visible.</p> <p>The navigation stays fixed to the right of the image. Absolute poisitioning plays a key role in displaying the navigation wherever you want - to the left, right, below or above the image.</p> <p class="mute">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod risus non diam. Proin et neque. Fusce molestie eros et urna. Aliquam sed enim nec lacus bibendum suscipit. Sed varius, quam nec aliquam sagittis, risus sapien luctus nisi, sit amet convallis risus metus a mauris. Curabitur aliquam ultrices est. Pellentesque felis. Mauris luctus orci id justo. Mauris tincidunt massa nec pede. Proin auctor suscipit augue.</p> <p class="mute">Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.</p> </div> <div class="example"> <div class="ppy" id="ppy3"> <ul class="ppy-imglist"> <li><a href="http://farm4.static.flickr.com/3142/3053892214_390c0365df.jpg"><img src="http://farm4.static.flickr.com/3142/3053892214_390c0365df_m.jpg" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod risus non diam." /></a></li> <li><a href="http://farm4.static.flickr.com/3014/3053902638_7871e32230.jpg"><img src="http://farm4.static.flickr.com/3014/3053902638_7871e32230_m.jpg" alt="In tempus consequat purus. Curabitur in massa nec purus semper adipiscing. Donec convallis odio nec nibh. Nam viverra, tortor nec cursus accumsan, purus purus ultricies mauris, in dignissim orci dui at est. Morbi non quam at ante cursus posuere. Sed ornare sem vitae diam tempor blandit. Nam risus diam, faucibus eget, fermentum et, dignissim eu, tellus. Praesent non justo. Proin vestibulum diam at mi. Cras molestie eleifend mi. Morbi massa enim, auctor at, rhoncus nec, consequat nec, diam. In laoreet lacus vel velit. Sed vulputate commodo ligula." /></a></li> <li><a href="http://farm4.static.flickr.com/3136/3053075339_ca3f303a6d.jpg"><img src="http://farm4.static.flickr.com/3136/3053075339_ca3f303a6d_m.jpg" alt="Sed consequat tincidunt sapien." /></a></li> <li><a href="http://farm4.static.flickr.com/3234/3053054359_090927b527.jpg"><img src="http://farm4.static.flickr.com/3234/3053054359_090927b527_m.jpg" alt="Proin aliquam libero ac lectus. Sed consequat tincidunt sapien. Suspendisse hendrerit porta ante. Proin aliquam libero ac lectus. Sed consequat tincidunt sapien. Suspendisse hendrerit porta ante." /></a></li> <li><a href="http://farm4.static.flickr.com/3161/3053878060_16a1ed4786.jpg"><img src="http://farm4.static.flickr.com/3161/3053878060_16a1ed4786_m.jpg" alt="Aenean tristique pellentesque quam. Proin aliquam libero ac lectus." /></a></li> <li><a href="http://farm4.static.flickr.com/3247/3053897646_df5b74c794.jpg"><img src="http://farm4.static.flickr.com/3247/3053897646_df5b74c794_m.jpg" alt="" /></a></li> <li><a href="http://farm4.static.flickr.com/3225/3053039525_2d3ef0c58e.jpg"><img src="http://farm4.static.flickr.com/3225/3053039525_2d3ef0c58e_m.jpg" alt="Suspendisse hendrerit porta ante." /></a></li> </ul> <div class="ppy-outer"> <div class="ppy-stage"> <div class="ppy-nav"> <div class="nav-wrap"> <a class="ppy-prev" title="Previous image">Previous image</a> <a class="ppy-play" title="Play Slideshow">Play Slideshow</a> <a class="ppy-pause" title="Stop Slideshow">Stop Slideshow</a> <a class="ppy-next" title="Next image">Next image</a> </div> </div> <div class="ppy-counter"> <strong class="ppy-current"></strong> / <strong class="ppy-total"></strong> </div> </div> <div class="ppy-caption"> <span class="ppy-text"></span> </div> </div> </div> <h2>Example 3</h2> <p>Here you can see the <strong>slideshow</strong> in action. Just click the play/pause button to toggle the slideshow on and off. Works in both normal and enlarged mode.</p> <p>In addition, in this example I'm using some fancy new CSS features like semitransparent gradients that probably won't work in the next 500 Versions of Internet Explorer.</p> <p class="mute">Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.</p> <p class="mute">Nam viverra, tortor nec cursus accumsan, purus purus ultricies mauris, in dignissim orci dui at est. Morbi non quam at ante cursus posuere. Sed ornare sem vitae diam tempor blandit. Nam risus diam, faucibus eget, fermentum et, dignissim eu, tellus. Praesent non justo. Proin vestibulum diam at mi. Cras molestie eleifend mi. Morbi massa enim, auctor at, rhoncus nec, consequat nec, diam. In laoreet lacus vel velit. Sed vulputate commodo ligula.</p>
</div>
<script type="text/javascript"> <!--//<![CDATA[ $(document).ready(function () { var options2 = { caption: false, navigation: 'permanent', direction: 'left' } var options3 = { caption: 'permanent', opacity: 1 } $('#ppy1').popeye(); $('#ppy2').popeye(options2); $('#ppy3').popeye(options3); }); //]]>-->
</script>
</body>
</html>

JQuery Popeye Gallery - Script Codes CSS Codes

body {	margin: 0;	font: normal 0.8em/1.4em 'Segoe UI', Tahoma, Arial, 'Lucida Grande', Verdana, Helvetica, sans-serif;	background: #fafafa;	color: #5b5b5b;
}
#page-margins {	width: 900px;	margin: 0 auto;	padding: 0 0 3em 0;
}
pre.toggle {	display: none;
}
a {	color: #0593da;	text-decoration: none;
}
a:hover {	text-decoration: underline;
}
a:focus, a:active {	outline: none;
}
.ppy-outer {	display: none;
}
.ppy-active .ppy-outer {	display: block;
}
.ppy-stage {	background-repeat: no-repeat !important;	background-position: center center !important;	position: relative;
}
.ppy-placeholder {	position: relative;
}
.ppy-caption, .ppy-captionwrap {	overflow: hidden;
}
.ppy-hidden {	display: none !important;
}
/* 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;
}
#ppy1 .ppy-extcaption {	width: 240px;	display: block;
}
#ppy1 .ppy-imglist li {	width: 240px;	height: 270px;
}
#ppy2 .ppy-imglist li, #ppy2 .ppy-imglist li a {	width: 160px;	height: 160px;	overflow: hidden;	display: block;
}
/* popeye example 1 */
#ppy1.ppy-active {	width: 262px;	float: left;	margin: 0 20px 10px 0;
}
#ppy1 .ppy-outer {	padding: 10px;	border: 1px solid #e1f1a1;	border-radius: 0 10px 10px 10px;	-moz-border-radius: 0 10px 10px 10px;	-webkit-border-radius: 0 10px 10px 10px;	background: #eff9c7;
}
#ppy1 .ppy-stage {	width: 240px;	height: 173px;	border-radius: 0 5px 5px 5px;	-moz-border-radius: 0 5px 5px 5px;	-webkit-border-radius: 0 5px 5px 5px;
}
#ppy1 .ppy-outer:hover, #ppy1.ppy-expanded .ppy-outer {	border: 1px solid #d5e68e;	box-shadow: 0 0 7px #ccc;	-moz-box-shadow: 0 0 7px #ccc;	-webkit-box-shadow: 0 0 7px #ccc;
}
#ppy1 .ppy-caption {	margin: 5px 0 0 0;	padding: 10px;	font-size: 0.9em;	line-height: 1.3em;	color: #809f21;	background: #eeffa8;	border-radius: 10px;	-moz-border-radius: 10px;	-webkit-border-radius: 10px;	box-shadow: 0 0 7px #ccc;	-moz-box-shadow: 0 0 7px #ccc;	-webkit-box-shadow: 0 0 7px #ccc;	visibility: hidden; /* prevent flash of content before popeye loads */
}
#ppy1 .ppy-caption a {	color: #66bde9;
}
#ppy1 .ppy-caption a:hover {	text-decoration:underline;
}
#ppy1 .ppy-counter {	border-bottom: 1px solid #d5e68e;	color: #b8cf5a;	padding: 0 0 2px 0;	margin: 0 0 5px 0;	font-size: 0.9em;
}
#ppy1 .ppy-stagewrap {	background: #0c3b3d;	border-radius: 0 5px 5px 5px;	-moz-border-radius: 0 5px 5px 5px;	-webkit-border-radius: 0 5px 5px 5px;
}
#ppy1 .ppy-loading {	background: #0c3b3d url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/loading1.gif) no-repeat center !important;
}
#ppy1 .ppy-nav {	background: #0c3b3d;	background: -moz-linear-gradient( center bottom, rgb(12,59,61) 0%, rgb(58,131,133) 100% );	width: 104px;	height: 32px;	padding: 5px;	position: absolute;	top: 0;	left: 0;	border-radius: 0 0 5px 5px;	-moz-border-radius: 0 0 5px 5px;	-webkit-border-radius: 0 0 5px 5px;
}
#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.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/prev3.png) no-repeat center;
}
#ppy1 .ppy-next {	width: 22px;	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/next3.png) no-repeat center;
}
#ppy1 .ppy-switch-enlarge {	width: 30px;	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/enlarge3.png) no-repeat center;
}
#ppy1 .ppy-switch-compact {	width: 30px;	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/compact3.png) no-repeat center;
}
#ppy1 .ppy-nav a:hover {	background-color: #a1c436;	cursor: pointer;
}
/* popeye example 2 */
#ppy2.ppy-active {	width: 224px;	float: right;	margin: 0 0 10px 20px;
}
#ppy2 .ppy-outer {	padding: 0 46px 0 0;
}
#ppy2 .ppy-stagewrap {	padding: 7px;	border-radius: 5px 0 5px 5px;	-moz-border-radius: 5px 0 5px 5px;	-webkit-border-radius: 5px 0 5px 5px;	background: #c1eaff;	background: rgba(193,234,255,0.7);
}
#ppy2 .ppy-stage {	width: 160px;	height: 160px;	border: 2px solid #fff;	border-radius: 3px;	-moz-border-radius: 3px;	-webkit-border-radius: 3px;	background-color: #777;
}
#ppy2 .ppy-counter {	background: #fff;	color: #333;	padding: 0 5px;	font-size: 0.8em;	position: absolute;	bottom: 0;	right: 0;	opacity: 0.7;	border-radius: 5px 0 0 0;	-moz-border-radius: 5px 0 0 0;	-khtml-border-radius: 5px 0 0 0;	-webkit-border-radius: 5px 0 0 0;
}
#ppy2 .ppy-loading {	background-image: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/loading2.gif);	background-repeat: no-repeat;	background-position:center;
}
#ppy2 .ppy-nav {	border-radius: 0 5px 5px 0;	-moz-border-radius: 0 5px 5px 0;	-webkit-border-radius: 0 5px 5px 0;	background: #76c6ee;	background: -webkit-gradient( linear, left top, right bottom, color-stop(0, rgb(118,198,238)), color-stop(1, rgb(45,158,214)) );	background: -moz-linear-gradient( left top, rgb(118,198,238) 0%, rgb(45,158,214) 100% );	border-left: 1px solid #6ab1d5;	width: 45px;	position: absolute;	top: 4px;	right: 0;
}
#ppy2 .nav-wrap {	padding: 5px 0;
}
#ppy2 .ppy-nav a {	display: block;	overflow: hidden;	text-indent: -900em;	height: 22px;	padding: 5px;	border-radius: 0 5px 5px 0;	-moz-border-radius: 0 5px 5px 0;	-webkit-border-radius: 0 5px 5px 0;	width: 30px;
}
#ppy2 .ppy-prev {	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/prev3.png) no-repeat center;
}
#ppy2 .ppy-next {	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/next3.png) no-repeat center;
}
#ppy2 .ppy-switch-enlarge {	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/enlarge4.png) no-repeat center;
}
#ppy2 .ppy-switch-compact {	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/compact4.png) no-repeat center;
}
#ppy2 .ppy-nav a:hover {	background-color: #378eba;	cursor: pointer;	opacity: 0.8;
}
/* popeye example 3 */
#ppy3.ppy-active {	width: 240px;	float: left;	margin: 0 20px 10px 0;
}
#ppy3 .ppy-outer {
}
#ppy3 .ppy-stage {	width: 240px;	height: 180px;	overflow: hidden;
}
#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.jque.re/plugins/modals-lightboxes/jquery.popeye/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.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/prev3.png) no-repeat center;
}
#ppy3 .ppy-next {	width: 22px;	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/next3.png) no-repeat center;
}
#ppy3 .ppy-switch-enlarge {	width: 30px;	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/enlarge3.png) no-repeat center;
}
#ppy3 .ppy-switch-compact {	width: 30px;	background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/compact3.png) no-repeat center;
}
#ppy3 .ppy-play { width: 22px; background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/play3.png) no-repeat center;
}
#ppy3 .ppy-pause { width: 22px; background: url(http://www.jque.re/plugins/modals-lightboxes/jquery.popeye/gfx/popeye/pause3.png) no-repeat center;
}
#ppy3 .ppy-nav a:hover {	background-color: #333;	cursor: pointer;
}
JQuery Popeye Gallery - Script Codes
JQuery Popeye Gallery - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 3
Size 6,817 Kb
Views 22,264
Do you need developer help for JQuery Popeye Gallery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Boyd Massie (massiebn) Script Codes
Name
Countdown Timer
Round-A-Bout Image Showcase
Responsive Table
Background Video
Responsive Dropdown Menu
Responsive Tournament Bracket
Drag and Drop Images
Snow Falling JS
Advanced JQuery Carousel
Fancy Image Showcase With Timer Bar
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!