Download Demo
BgndGallery is a jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best.
You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.
1. INCLUDE CSS AND JS FILES
<link href='css/bgndGallery.css' rel='stylesheet' type='text/css'>
<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>
<script type="text/javascript" src="inc/mb.bgndGallery.effects.js"></script>
2. HTML
<div id="Gallery_wrapper"></div>
<div id="gallery_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>
If the “containment” of gallery is not the body than you need to define a DOMelement where the gallery will be inserted.
3. JAVASCRIPT
myGallery = new mbBgndGallery(
containment:"body", // or "#myGalleryElement"
timer:4000,
effTimer:2000,
controls:"#gallery_controls",
grayScale:false,
// If your server allow directory listing
//folderPath:"elements/",
// else:
images:[
"elements/1.jpg",
"elements/2.jpg",
"elements/3.jpg",
"elements/4.jpg",
"elements/5.jpg"
],
);
4. METHODS
containment (string) – The selector of the element where the gallery will be inserted
folderPath (string) – The path of the folder where inages are placed (only if the server allow listing)
images (array) – an array containing the path of each images displayed
controls (string) – The selector of the element where the controls are placed
effect (string or JSON object) – 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 (see below)
timer (int) – the value in millisecond for the display duration
effTimer (int) – the value in millisecond for the transaction duration
raster (string or false) – The path to the raster image, if the gallery has a raster overlay smaller images are better displayed //“inc/raster.png”
autoStart (boolean) – define if the gallery should start once initialized
grayScale (boolean) – define if the gallery should be displayed black and white (works only for same domain images)
activateKeyboard (boolean) – define if the gallery should be navigable via keyboard
shuffle (boolean) – define if the gallery images should be shuffle before the gallery start
preserveTop: (boolean) – define if the images should preserve their top position or centered
thumbs: (object) – folderPath:””, placeholder:”” – Create a thumbnails bar to navigate the gallery.
- folderPath → the path to the thumbnails folder;
- placeholder → the id of the DOM element where the thumbnails should be placed.
- !!important → give thumbnails the same name of the original images.
5. CALLBACKS
onStart (function()) – a callback shooten once the gallery start
onChange (function(idx)) – a callback shooten once the image change “idx” is the index of the displayed image
onPause (function()) – a callback shooten once the gallery pause
onPlay (function(opt)) – a callback shooten once the gallery play. “opt” is are the options of the actual gallery; useful to change parameters on the fly
onNext (function(opt)) – a callback shooten once NEXT event is invoked. “opt” are the options of the actual gallery; useful to change parameters on the fly
onPrev (function(opt)) – a callback shooten once PREV event is invoked. “opt” are the options of the actual gallery; useful to change parameters on the fly
6. METHODS
myGallery.changeGallery(array) – with this you can change the gallery’s images on the fly.
Ex.:
//if directory listing is allowed var array=jQuery.loadFromSystem(‘media/drawings/sketches/’); //or var array=[“myImageURL_1.jpg”,“myImageURL_2.jpg”,…];
myGallery.changeGallery(array);
myGallery.addImages(array, goto, shuffle) – with this you can add images to the gallery on the fly. Ex.:
//if directory listing is allowed var array=jQuery.loadFromSystem(‘media/drawings/sketches/’);
//or var array=[“myImageURL_1.jpg”,“myImageURL_2.jpg”,…] myGallery.addImages(array, true, true);
myGallery.removeImages(array) – with this you can remove images from the gallery on the fly.
Ex.:
var array=["myImageURL_1.jpg"]
myGallery.removeImages(array);
6. TRANSITIONS
The images transitions are based on three steps: ENTER, DISPLAY, EXIT.
The first and the last (ENTER and EXIT) steps define the position of the image before entering the screen and after exiting it; the “display” step is the position of the image on the screen.
While the DISPLAY step is calculated by the plug-in to fit the image on the screen, the ENTER and the EXIT steps can be configured and customized using a JSON Object annotation to define their CSS.
The gallery comes also with a preset of effects you can apply to manage how transitions should behave:
Transitions presets:
- fade: Images will cross fade in and out.
enter:left:0,opacity:0,exit:left:0,opacity:0, enterTiming:"ease-in", exitTiming:"ease-in"
- slideUp: Images will slide up.
enter:top:"100%",opacity:1,exit:top:0,opacity:0, enterTiming:"ease-in", exitTiming:"ease-in"
- slideDown: Images will slide down.
enter:top:"-100%",opacity:1,exit:top:0,opacity:0, enterTiming:"ease-in", exitTiming:"ease-in"
- slideRight: Images will slide right.
enter:left:"-100%",opacity:1,exit:left:0,opacity:0, enterTiming:"ease-in", exitTiming:"ease-in"
- slideLeft: Images will slide left.
enter:left:"100%",opacity:1,exit:left:0,opacity:0, enterTiming:"ease-in", exitTiming:"ease-in"
- zoom: Images will cross zoom in and zoom out.
enter:transform:"scale("+(1+ Math.random()*5)+")",opacity:0,exit:transform:"scale("+(1 + Math.random()*5)+")",opacity:0, enterTiming:"cubic-bezier(0.19, 1, 0.22, 1)", exitTiming:"cubic-bezier(0.19, 1, 0.22, 1)"
Feel free to contribute with other defaults posting your solution on the dedicated jQuery Q&A.
Applying transitions:
By default the gallery uses the “fade” effect. You can use the “effect” property to change the transition behavior.
Using one of the preset:
effect:"zoom"
Using a custom JSON Object to define the CSS properties for the ENTERand EXIT steps:
The JSON Object has 4 parameters:
- enter: a CSS Object containing all the attributes for the ENTER step.
- exit: a CSS Object containing all the attributes for the EXIT step.
- enterTiming: a string defining the bezier curve of the entering ease timing.
- exitTiming: a string defining the bezier curve of the exiting ease timing.
effect:enter:transform:"scale("+(1+ Math.random()*2)+")",opacity:0,exit:transform:"scale("+(Math.random()*2)+")",opacity:0Transition timing:
As the gallery is using the CSS3 transition capabilities you can define also theease to be applied to the effects. You have two additional attributes for the JSONdescriptor (enterTiming, exitTiming) used to define the enter and the exit timing. They accept a string with the cubic-bezier descriptor.
For example:
enterTiming: "cubic-bezier(0.19, 1, 0.22, 1)"
BgndGallery - A sliding photogallery as background
