Responsive Fullscreen Slideshow Background Plugin For jQuery - bgndGallery
File Size: | 3.86 MB |
---|---|
Views Total: | 7769 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.