mb.jquery.components edited this page Jun 7, 2017 · 39 revisions

jquery.mb.bgndGallery

With this 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 whant in the page.

go to demo page
go to blog page

JS call:


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"
	 ],
});

HTML constructor for the BODY:

If the “containment” of gallery is not the body than you need to define a DOM element where the gallery will be inserted.


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

HTML constructor for the controls:


<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>

Parameters:

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.

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

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);

myGallery.changeEffect(String) – with this you can change the gallery’s transition effect on the fly.
Ex.:


$.mbBgndGallery.changeEffect("slideLeft");

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)"}

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 ENTER and 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:0}}

Transition timing:

As the gallery is using the CSS3 transition capabilities you can define also the ease to be applied to the effects. You have two additional attributes for the JSON descriptor (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)"

Lea Veru made a lovely tool to visualize and retrieve the bezier curve definition you can use to set the correct value of these two attributes.
You can also take a look at this easing visualizer.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.