pupunzi edited this page May 31, 2012 · 8 revisions
Clone this wiki locally

jquery.mb.gallery 2.0

This is a jQuery component to easily build a photo gallery on your webpages.

A mb.gallery as overlay.

A mb.gallery in place.

go to Demo page
go to blog page
go to download page
h2. Dependencies:

  • none

JS call:

         startFrom: 5

HTML constructor:

  <div  id="g1" class="galleryCont">
    <a class="imgThumb" href="gallery1/LR/01.jpg"></a>
    <a class="imgFull" href="gallery1/HR/01.jpg"></a>
    <div class="imgDesc">Description 01</div>

    <a class="imgThumb" href="gallery1/LR/02.jpg"></a>
    <a class="imgFull" href="gallery1/HR/02.jpg"></a>
    <div class="imgDesc">Description 02</div>

    <a class="imgThumb" href="gallery1/LR/03.jpg"></a>
    <a class="imgFull" href="gallery1/HR/03.jpg"></a>
    <div class="imgDesc">Description 03</div>

    <a class="imgThumb" href="gallery1/LR/04.jpg"></a>
    <a class="imgFull" href="gallery1/HR/04.jpg"></a>
    <div class="imgDesc">Description 04</div>


  • containment:“body”, (string) the containment element of the galery
  • cssURL:“css/”, (string) the path to css
  • skin:“white”, (string) the name of the css file to invoke
  • overlayBackground:“#333”, (string) the exhadecimal value of the overlay color
  • overlayOpacity:.5 (int) the opacity value of the overlay
  • exifData:false, (boolean) display the EXIF data of the photo (not working jet)
  • galleryTitle:“My Gallery”, (string) the displayed title
  • imageSelector:“.imgFull”, (string) the class of full size images reference
  • thumbnailSelector:“.imgThumb”, (string) the class of thumbnail images reference
  • titleSelector:“.imgTitle”, (string) the class of image title reference
  • descSelector:“.imgDesc”, (string) the class of image description reference
  • minWidth:300, (int) the minimal width of the displayer
  • minHeight:300, (int) the minimal height of the displayer
  • maxWidth:0, (int) the maximal width of the displayer (0 means no max)
  • maxHeight:0, (int) the maximal height of the displayer (0 means no max)
  • fullScreen:true, (boolean) the photo is shown fitting the screen even if it’s smaller
  • addRaster:true, (boolean) a raster overlay will be added to the image
  • startFrom:0, (int) the index of the image to start from; you can also set “random” as text to begin with a random index
  • fadeTime:500, (int) the fade effect time
  • slideTimer:6000, (int) the display time for each image on slideshow
  • autoSlide:true, (boolean) the gallery starts on slideshow modality
  • printOutThumbs:true, (boolean) if you want thumbnails printed out


  • onOpen:function(){}, (function) a callback function once the gallery opens
  • onBeforeClose:function(){}, (function) a callback function before the gallery closes
  • onClose:function(){}, (function) a callback function on gallery closes
  • onChangePhoto:function(){}, (function) a callback function each time the gallery change photo


  • $.fn.mb_galleryNext(): go to next image.
  • $.fn.mb_galleryPrev(): go to previous image.
  • $.fn.mb_gotoIDX(int): go to specific image.
  • $.fn.mb_startSlide(): start the slideshow.
  • $.fn.mb_stopSlide(): stop the slideshow.
  • $.fn.mb_showThumbs(): show the thumbs panel.
  • $.fn.mb_hideThumbs(): hide the thumbs panel.
  • $.fn.mb_closeGallery(): close the gallery.

Using mb.gallery with Flickr®:

On the example file you’ll find a specific use of mb.gallery that retrives photos from a flickr account using my jquery.mb.flickr.js component (in bundle in the .zip); take a look at the demos!