The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
(mb)Gallery, another way to present your photo gallery!
A full featured image gallery, with nav toolbar, thumbnails, autosize frame.
DEPENDENCIES:
none
HOW DOES IT WORK:
here is the js call:
$(function(){
$('#g1').mbGallery({
maskBgnd:'#ccc',
overlayOpacity:.9,
startFrom: 5
})
});here is the code for each image:
<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>
</div>Params
* 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
* 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
Callbacks:
* 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
Methods:
* $.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 retrive photos from a flickr account using my jquery.mb.flickr.js component (in bundle in the .zip); take a look at the demos!
