Mosaiqy

Field Detail
<private> _animateSelection
This method runs the animation.

<private> _animationCycle

The method runs the animation and check some private variables to allow cycle and animation execution. Every time the animation has completed successfully, the JSON index and node collection are updated.

Animation interval is not executed on mouse enter (_animationPaused) or when animation is still running.


<private> {jQuery} _createTemplate
The method merges the user-defined template with JSON data associated for a given index and it's called both at initialization and at every animation loop.

<private> _getPoints
_getPoints object stores 4 information
  1. The direction of movement (css property)
  2. The selection of nodes to move (i.e in a 3x4 grid, point 4 and 5 have to move images 2,6,10)
  3. The position in which we want to inject-before the new element (except for the last element which needs to be injected after)
  4. The position (top and left properties) of entry tile
   [0,8,1,9,2,10,3,11, 0,4,4,8,8,12*]    * = append after
   
       0   2   4   6
   8 |_0_|_1_|_2_|_3_| 9
  10 |_4_|_5_|_6_|_7_| 11
  12 |_8_|_9_|_10|_11| 13    
       1   3   5   7

In earlier versions of this algorithm, the order of nodes was counterclockwise (tlbr) and then alternating (tblr). Now this enumeration pattern (alternating tb and lr) performs a couple of improvements on code logic and on readability:

  1. Given an even-indexed node, the next adjacent index has the same selector:
    e.g. points[8] = li:nth-child(n+1):nth-child(-n+4) [0123]
    points[9] = li:nth-child(n+1):nth-child(-n+4) [0123]
    (it's easier to retrieve this information)
  2. If a random point is even (i & 1 === 0) then the 'direction' property of node selection is going to be increased during slide animation. Otherwise is going to be decreased and then we remove first or last element (if random number is 9, then the collection has to be [3210] and not [0123], since we always remove the disappeared node when the animation has completed.)
   Another Example (4x2)
   [0,6,1,7, 0,2,2,4,4,6,6,8*]   * = append after

       0   2
   4 |_0_|_1_| 5
   6 |_2_|_3_| 7
   8 |_4_|_5_| 9
  10 |_6_|_7_| 11
       1   3

<private> _incrementIndexData

The main purpose is to correctly increment the indexData for the JSON data retrieval. If user choosed "avoidDuplicate" option, then the method checks if a requested image is already on stage. If so, a loop starts looking for the first image not in stage, increasing the dataIndex.


<private> _loadThumbsFromJSON
If user have not defined enough images (rows * cols) as straight markup, this method fill the stage with images taken from the JSON.

<private> _pauseAnimation
Set private _animationPaused to true so the animation cycle can run (unless a zoom is currently opened).

<private> _playAnimation
Set private _animationPaused to false so the animation cycle can stop.

<private> _setInitialImageCoords
Sets initial offset (x and y position) of each list items and the width and min-height of the container. It doesn't set the height property so the wrapper can strecth when a zoom image has been requested or closed.

<private> _setNodeZoomEvent

This method manages the zoom main events by some scoped internal functions.

closeZoom is called when user clicks on "Close" button over a zoom image or when another thumbanail is choosed and another zoom is currently opened. The function stops all running transitions (if any) and it closes the zoom container while changing opacity of some elements (close button, image caption). At the end of animation it removes some internal classes and the «li» node that contained the zoom.

The function closeZoom returns a deferred promise object, so it can be called in a synchronous code queue inside other functions, ensuring all operation have been successfully completed.

viewZoom is called when the previous function createZoom successfully created the zoom container into the DOM. The function creates the zoom image and the closing button binding the click event. If image is not in cache the zoom is opened with a slideDown effect with a waiting loader.

createZoom calls the closeZoom function (if any zoom images are currently opened) then creates the zoom container into the DOM and then scroll the page until the upper bound of the thumbnail choosed has reached (unless scrollzoom option is set to false). When scrolling effect has completed then viewZoom function is called.

Methods

{Object} Mosaiqy.init(cnt, options)

Parameters:

{String} cnt Mosaiqy node container
{String} options User options for settings merge.
Returns:
{Object} Mosaiqy object instance