Created
May 14, 2015 04:11
-
-
Save reubenmoes/564e803f085878564296 to your computer and use it in GitHub Desktop.
Load Fresco.js async and bind gallery of thumbnails
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Gallery Module that is triggered from a gallery bean block | |
* Implemented using frescojs | |
* Features | |
* - FrescoJS is loaded async in the background like a champ | |
* - Click thumbnail to load image link | |
* | |
* Markup: | |
* Assumes a div element has some child elements containing | |
* a thumnail link to the large image | |
*/ | |
app.gallery = (function($){ | |
'use strict'; | |
var gallerySelector = '.bean-gallery', | |
galleryItemSelector = '.field-collection-item-field-gallery-item', | |
galleryItemCaptionSelector = '.field-name-field-gallery-item-caption'; | |
/* | |
* | |
* Check if any .bean-gallery DOM elements are on the page. | |
* Check if Fresco.js is on the page, and load it if it isn't. | |
* | |
*/ | |
function bindActions(){ | |
//Check if any galleries are on the page | |
if($(gallerySelector).length){ | |
//Load fresco if it's not already here | |
Modernizr.load({ | |
test: window.Fresco, | |
nope: '/sites/all/themes/dnv/js/src/vendor/fresco.js', | |
complete: initAllGalleries | |
}); | |
} | |
} | |
/* | |
* Wrapper function to load all galleries | |
* Should only be called once fresco is ready | |
*/ | |
function initAllGalleries(){ | |
$('.bean-gallery').each(function(){ | |
initGallery(this); | |
}); | |
} | |
/* | |
* | |
* Add necessary JS to create a fresco gallery from | |
* a block containing some thumbnails | |
* | |
* @param {Object} a .bean-gallery DOM element | |
* | |
*/ | |
function initGallery(element){ | |
//Array of fresco objects | |
var items = []; | |
$(element).find('a:has(img)') | |
//Build out Fresco config | |
.each(function(){ | |
items.push({ | |
url: $(this).attr('href'), | |
caption: $(this).find(galleryItemCaptionSelector).html() | |
}); | |
}) | |
//Bind thumbnail click | |
.on('click', function(e){ | |
e.preventDefault(); | |
//Open gallery with the correct image open | |
Fresco.show(items, {}, $(this).closest(galleryItemSelector).index()+1); | |
}); | |
} | |
$(document).on('ready', bindActions); | |
return {}; | |
})(jQuery); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment