Class: moogallery

ajs.ui. moogallery

The class creates an interactive gallery of images, videos and audios.

Given the thumbs' paths and some information the thumbs are loaded sequentially and inserted in a table structure automatically sized according to the size of the container, then events are added in order to manage tips, lightbox widget (and navigation through media) and show media's meta information.

Videos can be hosted on youtube or vimeo, audio files are inserted following html5 specifications. If used with cpoyer's mootools-mobile (https://github.com/cpojer/mootools-mobile) supports swipe gestures on mobile (android, ios) to change media in the lightbox view (activate the support_mobile option).

new moogallery(container, items_opt, options)

Images gallery user interface.

Parameters:
Name Type Description
container String | Element the gallery container element or its id attribute
items_opt Array the array of objects containing the images properties. Each object has the following properties:
  • thumb: path to the thumb image
  • img: path to the image
  • youtube: code of the youtube video
  • vimeo: code of the vimeo video
  • video_width: video width
  • video_height: video height
  • mpeg: path to mpeg file
  • ogg: path to ogg file
  • title: media title
  • description: media description
  • credits: media credits
options Object The class options object
Properties
Name Type Argument Default Description
onComplete Function <optional>
 function(){} A callback to be called when the rendering of the thumb ended
show_bullets Boolean <optional>
 true Whether or not to show bullets in lightbox widget
Source:
Example
	var mt = new ajs.ui.moogallery('mycontainer', [
         {
             thumb: 'http://my/thumb/path', 
             img: 'http://my/img/path', 
             title: 'image title', 
             description: 'image description'
             credits: 'image credits'
         },
         {
             thumb: 'http://my/thumb/path2', 
             img: 'http://my/img/path2', 
             title: 'image title2', 
             description: 'image description2'
             credits: 'image credits2'
         }
    ]);

Methods

changeItem(index)

Changes the image displayed in the lightbox widget

Parameters:
Name Type Description
index Number the index of the image to show
Source:
Returns:
void

<protected> renderItem(item_opt)

Inserts an image in the table creating a new cell and changing row if necessary

Parameters:
Name Type Description
item_opt Object the image options object to show
Source:
Returns:
void

renderLightbox(item_opt)

Renders the lightbox widget

This methos is public since has to be called in a chain process, but it's not necessary to call it directly
Parameters:
Name Type Description
item_opt Object the image options object to show
Source:
Returns:
void

renderLightboxContainer(item_opt)

Renders the lightbox widget container (image, title, description, credits, navigation)

This methos is public since has to be called in a chain process, but it's not necessary to call it directly
Parameters:
Name Type Description
item_opt Object the image options object to show
Source:
Returns:
void

<protected> renderNavigation(item_opt)

Renders the navigation controllers to surf through images in the lightbox widget

Parameters:
Name Type Description
item_opt Object the image options object to show
Source:
Returns:
the lightbox navigation controllers

<protected> renderOverlay(chain_callback)

Renders the overlay and calls the function to execute after

Parameters:
Name Type Description
chain_callback Function the function to call when overlay opacity animation ends
Source:
Returns:
void

<protected> setLightbox(thumb, item_opt)

Sets the thumb click event to render the lightbox navigation

Parameters:
Name Type Description
thumb Element the thumb image element
item_opt Object the image options object to show
Source:
Returns:
void

<protected> setTip(thumb, item_opt)

Sets a tooltip tied to the thumb and displayed on mouseover

Parameters:
Name Type Description
thumb Element the thumb image element
item_opt Object the image options object to show
Source:
Returns:
void