diff --git a/picture.js b/picture.js index 171f3d0..c6a4247 100644 --- a/picture.js +++ b/picture.js @@ -3,8 +3,32 @@ if (typeof Drupal !== 'undefined' && typeof jQuery !== 'undefined') { (function ($) { Drupal.behaviors.picture = { attach: function (context) { - window.picturefill(context); + // Ensure we always pass a raw DOM element to picture fill, otherwise it + // will fallback to the document scope and maybe handle to much. + window.picturefill($(context)[0]); + // If this is an opened colorbox ensure the content dimensions are set + // properly. colorbox.js of the colorbox modules sets #cboxLoadedContent + // as context. + if (context == '#cboxLoadedContent') { + // Try to resize right away. + $.colorbox.resize(); + // Make sure the colorbox resizes always when the image is changed. + $('img', context).once('colorbox-lazy-load', function(){ + $(this).load(function(){ + // Ensure there's no max-width / max-height otherwise we won't get + // the proper values. We could use naturalWeight / naturalHeight + // but that's not supported by array('class' => array('colorbox-inline')), - 'query' => array('maxWidth' => '80%', 'maxHeight' => '80%', 'width' => '80%', 'height' => '80%', 'inline' => 'true'), + 'query' => array('maxWidth' => '80%', 'maxHeight' => '80%', 'inline' => 'true'), 'fragment' => $id, 'html' => TRUE, );