Responsive Fullscreen Slideshow Background Plugin For jQuery - bgndGallery

jQuery Mb BgndGallery is jQuery plugin that allows you to  make suggestive slideshow of images as background of your page. Resizing the browser window the image will resize and center to always fit the screen. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

Basic Usage:

1. Include jQuery library and jQuery Mb BgndGallery on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="inc/mb.bgndGallery.js"></script>

2. Define a DOM element where the gallery will be inserted

<div id="Gallery_wrapper"></div>

3. Create the html for the controls

<div id="controls">
<div class="pause">pause</div>
<div class="play">play</div>
<div class="prev">prev</div>
<div class="next">next</div>
<div class="counter"></div>
<div class="bw">gray scale</div>
</div>

4. The javascript

$.mbBgndGallery.buildGallery({

  // The selector of the element where the gallery will be inserted
  containment:"body", 

  // the value in millisecond for the display duration
  timer:2000, 

  // the value in millisecond for the transaction duration
  effTimer:6000, 

  // The selector of the element where the controls are placed
  controls:"#controls", 

  // define if the gallery should be displayed black and white (works only for same domain images)
  grayScale:false, 

  // define if the gallery images should be shuffle before the gallery start
  shuffle:true, 

  preserveTop: false,
  preserveWidth:false,

  // You can use one of the preset effects to define how images will enter and exit from the gallery, or you can define the behavior your own using an Object containing the CSS property for the “enter” step and for the “exit” step.
  // 'fade', 'slideUp', 'slideDown', 'slideRight', 'slideLeft', 'zoom'
  effect:"zoom",

  filter: null,

  // he path to the raster image, if the gallery has a raster overlay smaller images are better displayed //“inc/raster.png”
  raster: false,

  // the path to the thumbnails folder
  folderPath: false,

  // define if the gallery should start once initialized
  autoStart: true,

  // define if the gallery should be displayed black and white (works only for same domain images)
  grayScale: false,

  // define if the gallery should be navigable via keyboard
  activateKeyboard: true,

  // the id of the DOM element where the thumbnails should be placed
  placeHolder: "",

  // an array of images
  images:[
    "elements/1.jpg",
    "elements/2.jpg",
    "elements/3.jpg",
    "elements/4.jpg",
    "elements/5.jpg",
    "elements/6.jpg",
    "elements/7.jpg",
    "elements/8.jpg",
    "elements/9.jpg",
    "elements/10.jpg",
    "elements/11.jpg",
    "elements/12.jpg"
  ],

  //Path to the folder containing the thumbnails and ID of the DOM element that should contains them.
  // Thumbnail should have the same name of the corresponding image
  thumbs: {
    folderPath: "",
    placeholder: ""
  },

  // Callbacks:
  onStart:function(){},
  onPause:function(){},
  onPlay:function(opt){},
  onChange:function(opt,idx){},
  onNext:function(opt){},
  onPrev:function(opt){}

});

Change logs:

v1.9.5 (2016-06-08)

• various fix

v1.9.4 (2016-03-11)

• various fix

v1.9.2 (2016-02-29)

• various fix

v1.9.1 (2014-06-29)

• various fix
• replaced all $ with jQuery

v1.9.0 (2014-05-08)

• update

v1.9.0 (2014-05-08)

• update

v1.8.9 (2014-04-14)

• changed the addImage() method; now it accept an array of images, the shuffle boolean and the goto boolean to jump to the added images.

v1.8.8 (2014-03-27)

• update

v1.8.7 (2014-02-01)

• better and smooth transitions, clever thumbnail management

v1.8.6 (2014-01-28)

• various fix

v1.8.5 (2013-11-16)

• added $.fn.buildThumbs() method to build a thumbnailed navigation bar.

 

---

This awesome jQuery plugin is developed by pupunzi. For more Advanced Usages, please check the demo page or visit the official website.