jbgallery is a UI widget webpage written in javascript on top of the jQuery library.
Its function is to show a single big image, multiple images, multiple galleries, slideshows, as a site's background, in a "dialog" mode or as a common pop-up.
jbgallery has two basic menus: the first one has music player buttons while the other one links directly to single images.
I added a "complex" menu on the 2.0 version, which in inspired by the flickr slider-equipped slideshow that allows to scroll the thumbnail previews.
jbgallery provides a pubblic API to remote control the component, so it would be easier to bind also with a more complex menu.
Extra files :
<link href="jbgallery-2.0.css" id="jbgallery-css" rel="stylesheet" media="javascript-screen" /> <script type="text/javascript" src="jquery.1.4.2.min.js"></script> <script type="text/javascript" src="jbgallery-2.0.js"></script>
<div class="jbgallery"> <ul> <li><a href="1.jpg" >1</a></li> <li><a href="2.jpg" >2</a></li> <!-- etc --> </ul> </div>
<div class="jbgallery"> <ul> <li><a href="big1.jpg"><img src="small1.jpg" alt="" /></a></li> <li><a href="big2.jpg"><img src="small2.jpg" alt="" /></a></li> <!-- etc --> </ul> </div>
<div class="jbgallery"> <ul> <li> <a href="big.jpg" title="Caption title"><img src="small.jpg" alt="" /></a> <div class="caption">Long long long text</div> </li> <!-- etc --> </ul> </div>
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".jbgallery").jbgallery(); }); </script>
Write options HERE :
jQuery(".jbgallery").jbgallery({HERE});
{ style : "centered",//centered, zoom, original menu : 'slider', //false, numbers, simple, slider shortcuts : [37,39], slideshow : false, fade : true, popup : false, caption : true, //NEW 2.0 autohide : false, //NEW 2.0 clickable : false, //NEW 2.0 current : 1, //NEW 2.0 webkit : (navigator.userAgent.toLowerCase().search(/webkit/) != -1), ie6 : (/MSIE 6/i.test(navigator.userAgent)), ie7 : (/MSIE 7/i.test(navigator.userAgent)), labels : { play : "play", next : "next", prev : "prev", stop : "stop", close: "close", info : "info" }, timers : { fade : 400, interval : 7000, autohide : 7000 }, delays : { mousemove : 200, resize : 500, mouseover : 800 }, close : function(){}, before : function(){}, after : function(ev){}, load : function(ev){}, ready : function(){} }
{ play : "play", next : "next", prev : "prev", stop : "stop", close: "close", info : "info" }
{ fade : 400, //fadeIn-Out timer interval : 7000, //slideshow timer autohide : 7000 //autohide timer }
{ mousemove : 200, resize : 500, mouseover : 800 }
To add to the image further contents or other kind of elements you can use the following div. Otherwise you can add other divs copying the styles below.
<div id="jbg-content"> <!-- PUT HERE CONTENT --> <div id="docs"> <div class="wrapper"> </div> </div> <!-- /PUT HERE CONTENT --> </div>
#docs{width:500px;right:200px;top:15%;position:absolute;z-index:1000;} #docs .wrapper{padding:10px;margin:10px;background:#fff;}
This component is published with a minimalist graphic layout.
You are free to customize css and to ask me any change to add classes to the simple menus edited by me.
If you use API or design more complex menus, or if you write plugins populating html lists via ajax by flickr
or similar services, please share with me for the next version of this plugin.