With many responsive designs it is not possible to assign image dimensions as they will be determined by the view-port dimensions. However some scripts, such as Packery, require image dimensions to be known to enable them to arrange items correctly, without overlapping or leaving large gaps. One solution often suggested (e.g. at https://drupal.stackexchange.com/a/77330/14365) is to use imagesloaded.
I have looked at other Drupal modules such as Views Isotope and Field Slideshow which both use imagesLoaded. They each implement it in a different way and I am looking for the correct way to add it in to the Packery module.
My understanding is that: First, a call to add the imagesLoaded script needs to be added to the module file. (The script itself is added to the libraries directory within a folder named 'imagesLoaded'). Secondly, the imagesLoaded() must be declared with the JavaScript file which currently contains:
(function($) {
Drupal.behaviors.packery = {
attach: function(context, settings) {
for (var packery in settings.packery) {
var $container = $('#' + packery);
$container.packery(settings.packery[packery].settings);
}
}
};
}(jQuery));
Within the above I need to add in:
$('#container').imagesLoaded( function() {
// images have loaded
});
Does the way that imagesLoaded is added within the module effect if it becomes a function? Adding the script side-wide is not really appropriate as it is only required in combination with the use of Packery. Does this mean it should be added in a certain way?
