By ryivhnn on

Hey all

I have a site that renders a galleryformatter gallery inside a Colorbox Node...sometimes. Some galleries don't have a problem and everything pops up as expected (occasionally taking a while as per another post I found I used a timeout of 5000 which made the gallery able to load properly inside the colorbox), other ones will start loading the gallery, but for some reason the first image in the main slider will only be partially loaded (there will be just a strip on the top) while the thumbnail navigation loads fine. There's nothing wrong with the images themselves as if the colorbox for that gallery is closed and reopened or if the slideshow is moved forward and then back the image shows up fine (I guess because it's been cached by that point).

Oddly after I did the workaround mentioned in the linked post, both my sister/business partner (we are on different landmasses and networks etc) and I verified that everything was working on the sandbox, but when we sent the link to our client, they reported the problem that we thought we'd fixed. My sister then checked and said that the problem had recurred and was happening for her on every gallery. I am unable to replicate the problem unless I visit the site through Tor. I actually increased the timeout to the 5000 from the example, prior to that it was a lot lower. I'm not sure if that's the actual problem so am a bit reluctant to keep increasing the timeout and hoping.

I have a script.js that looks like:

/***
 * https://www.drupal.org/node/2154099
 * to make a responsive colorbox
 ***/

(function ($, Drupal, window, document, undefined) {
//Configure colorbox call back to resize with custom dimensions
  $.colorbox.settings.onLoad = function() {
    colorboxResize();
  }
  //Customize colorbox dimensions
  var colorboxResize = function(resize) {
    var width = "80%";
    var height = "75%";
    //if($(window).width() > 960) { width = "860" }
    //if($(window).height() > 700) { height = "630" }

    $.colorbox.settings.height = height;
    $.colorbox.settings.width = width;
    //if window is resized while lightbox open
    if(resize) {
      $.colorbox.resize({
        'height': height,
        'width': width
      });
    }
  }
  //In case of window being resized
  $(window).resize(function() {
    colorboxResize(true);
  });
})(jQuery, Drupal, this, this.document);

/***
 * we are copying and pasting
 * /sites/all/modules/galleryformatter/theme/galleryformatter.js
 * and modifying them so that they work inside the modal
 ***/

(function($) {
  $(document).ready(function() {
    Drupal.behaviors.galleryformatter = {
      attach: function (context) {
        // We must wait for everything to load in order to get images' dimensions.
        $('#colorbox').one('mouseover', function() {
          // code from https://drupal.org/node/222e else I shu8167/#comment-8639095
          setTimeout(function() {
            $('.galleryformatter:not(.gallery-processed)', context).each(function(){
            Drupal.galleryformatter.prepare(this);
          }).addClass('gallery-processed');
          }, 5000);
        })
      }
    };

// rest is a copy/paste of galleryformatter.js and has been truncated for purposes of this post

Any idea if I just have to keep increasing the timeout til everything magically works or where else I should be looking?

Thanks! :)

ETA forgot to say that console gives:

RangeError: invalid array length
	

return new Array( num + 1 ).join( str );

on the ones that freak out. It's in the first function of the infinitecarousel.js and that's about as far as I got :)

⋅ Categories: Drupal 7.x