Class: moogallery

ajs.ui. moogallery

The class creates an interactive gallery of images.

The thumb images 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 images) and show images' meta information.

new moogallery

Images gallery user interface.

Parameters:
Name Type Description
container String | Element the gallery container element or its id attribute
images_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
  • title: image title
  • description: image description
  • credits: image 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:
  • moogallery.js, line 48
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

changeImage

Changes the image displayed in the lightbox widget

Parameters:
Name Type Description
index Number the index of the image to show
Source:
  • moogallery.js, line 350
Returns:
void

<protected> renderImage

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

Parameters:
Name Type Description
img_opt Object the image options object to show
Source:
  • moogallery.js, line 84
Returns:
void

renderLightbox

Renders the lightbox widget

This methos is public since has to be calle in a chain process, but it's not necessary to call it directly
Parameters:
Name Type Description
thumb Element the thumb image element
img_opt Object the image options object to show
Source:
  • moogallery.js, line 193
Returns:
void

renderLightboxContainer

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
img_opt Object the image options object to show
Source:
  • moogallery.js, line 229
Returns:
void

<protected> renderNavigation

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

Parameters:
Name Type Description
img_opt Object the image options object to show
Source:
  • moogallery.js, line 311
Returns:
the lightbox navigation controllers

<protected> renderOverlay

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:
  • moogallery.js, line 165
Returns:
void

<protected> setLightbox

Sets the thumb click event to render the lightbox navigation

Parameters:
Name Type Description
thumb Element the thumb image element
img_opt Object the image options object to show
Source:
  • moogallery.js, line 150
Returns:
void

<protected> setTip

Sets a tooltip tied to the thumb and displayed on mouseover

Parameters:
Name Type Description
thumb Element the thumb image element
img_opt Object the image options object to show
Source:
  • moogallery.js, line 120
Returns:
void