jbgallery 1.0

TRY JBGALLERY 3.0 BETA

jbgallery is a webpage UI widget written in javascript on top of the jQuery library.
Its function is to show a single big image, multiple images, multiple gallery, slideshow, as site's background or in "dialog" mode or as a common pop-up
jbgallery has two basic menus, one has music player buttons the other gives directly links to single images.
jbgallery provides a pubblic API to remote control the component, so it would be easier to bind also with a more complex menu (i.e. with thumbnails).

Examples:

Installation

Download and extract

jbgallery-1.0.zip

Or download single files :

jbgallery-1.0.js : source | min | packed
jbgallery.css
ajax-loader.gif
jquery-1.3.2.min.js

Scripts js (include in head tag)

<script type="text/javascript" src="jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="jbgallery-1.0.min.js"></script>

HTML structure

<div class="jbgallery">
  <ul>
    <li><a href="1.jpg" title="alternative text">1</a></li>
    <li><a href="2.jpg" title="alternative text">2</a></li>
    <!-- etc -->
  </ul>
</div>

JS

<script type="text/javascript">
jQuery(window).jbgcss("jbgallery.css");//customize url
jQuery(document).ready(function(){
  jQuery(".jbgallery").jbgallery();
});
</script>

OPTIONS & DEFAULTS

Write options HERE :

    jQuery(".jbgallery").jbgallery({HERE});

DEFAULTS

{
  style     :  "zoom",    //"centered", "zoom"
  slideshow :  false,
  menu      :  "simple",  //false, "numbers", "simple"
  interval  :  4000,
  fade      :  false,
  fade_time :  400,
  shortcuts :  [37,39],   //left and right arrows
  before    :  function(){}
  load      :  function(ev){},
  after     :  function(ev){},
  popup	    :  false,
  close	    :  function(ev){},
  labels    :  {
        play : "play",
        next : "next",
        prev : "prev",
        stop : "stop",
        close: "close"
  }
}

OPTIONS

style : string ('zoom'/'centered')
slideshow : boolean (true/false)
menu : string/boolean ('simple'/'numbers'/false)
interval : number (milliseconds for slideshow)
fade : boolean (false/true)
fade_time : number (milliseconds for fadeIn/fadeOut effect)
shortcuts : array (keycodes for trigger events left/right via keyboard)
before : function (callback)
load : function(ev) (callback - native image load event)
after : function (callback)
popup : boolean (show close button)
close : function(ev) (callback after click close button. i.e. window.close())

labels: object - default:

{
   play : "play",
   next : "next",
   prev : "prev",
   stop : "stop",
   close: "close"
}

API (developers/designers)

jQuery("#jbgallery").jbgallery(); // build object FIRST
jQuery("#jbgallery").jbgallery("go" , 2); // trigger event go, go to photo 2 if exist
jQuery("#jbgallery").jbgallery("left"); // trigger event left (prev)
jQuery("#jbgallery").jbgallery("right"); // trigger event right (next)
jQuery("#jbgallery").jbgallery("play"); // trigger event play - autoplay start
jQuery("#jbgallery").jbgallery("stop"); // trigger event stop - autoplay stop
jQuery("#jbgallery").jbgallery("destroy"); // destroy object, events, expando
jQuery("#jbgallery").jbgallery("current"); // return number of current photo

CONTENTS/FURTHER ELEMENTS

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;}

BROWSERS TESTED

Firefox 3 (winxp/linux)
Safari 3.2, 4 (winxp)
Chrome 1/2 (winxp)
Opera 9.6/10 (winxp/linux)
Internet Explorer 6/7/8 (winxp)
Konqueror 4.2.1 (linux)

KNOWN BUGS

Opera

I can't prevent on the keydown default event (arrows) in Opera.
At "arrows" keydown that causes a pervers effect.
If you know a solution, please contact me.

DESIGN/GRAPHIC

The 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.

CREDITS

This work is inspired by http://www.ringvemedia.com/ and Chicca
Photos by Chicca Vancini
Depends by jquery-1.3.2 by John Resig.

COMMENTS & CONTACTS

Post a comment in my blog.
http://maxb.net/blog/