Submit your widget

jQuery lightbox slideshow gallery

Created 14 years ago   Views 11842   downloads 1935    Author pupunzi
jQuery lightbox slideshow gallery
View DemoDownload
111
Share |

Here it is. A super clean photo gallery!

A full featured photo gallery, with navigation toolbar, thumbnails, autosize frame; you can also use it to show a public Flickr set or all public Flickr user photos.

in the header:

  <script type="text/javascript" src="inc/jquery/1.4.2.min.js"></script>
  <script type="text/javascript" src="inc/mbGallery.js"></script>
  <script type="text/javascript">
  $(function(){
 
  //these are the default settings for the component
  // you can redefine this defaults or change each parameter on the component call
  $.fn.mbGallery.defaults={
    containment:"body",
    cssURL:"css/",
    skin:"white",
    overlayBackground:"#333",
    exifData:false, //todo
 
    galleryTitle:"My Gallery",
    imageSelector: ".imgFull",
    thumbnailSelector: ".imgThumb",
    titleSelector: ".imgTitle",
    descSelector: ".imgDesc",
 
    minWidth: 300,
    minHeight: 200,
    maxWidth: 0,
    maxHeight: 0,
    fullScreen:true,
    addRaster:false,
    overlayOpacity:.5,
    startFrom: 0,//"random"
    fadeTime: 500,
    slideTimer: 6000,
    autoSlide: true,
 
    onOpen:function(){},
    onBeforeClose:function(){},
    onClose:function(){},
    onChangePhoto:function(){}
  };
});
 
  //this is a direct call on document load
  $('#g1').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
 
  // this is a call attached to an event
  $('#galleryOpener')
  .bind("click", function(){
  $('#g1').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
  });
  </script>

in the body:

<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>
 
  <a class="imgThumb" href="gallery1/LR/05.jpg"></a>
  <a class="imgFull" href="gallery1/HR/05.jpg"></a>
  <div class="imgDesc">Description 05</div>
 
</div>