Hello,

I have a View block that renders an entity (node). This node contains a multiple image field that is configured to use the Galleria formatter.

The issue I'm facing is that this view block gets loaded dynamically by an Ajax call that will load different nodes according to the selection of the visitor (one node at a time). On the first load there is no issue, the Galleria shows correctly. On the second call the galleria starts intializing but doesn't show the image, instead I get the following elements on the page:
a. The Info box at the top left of the stage
b. The Loading gif at the top right of the stage
c. The thumbnails at the bottom of the stage

I also noted the following scenarios that can make it work:

1. Refresh the current page and try again: if I simply refresh the page that contains this Ajax view, the galleria starts showing on every loads (first as usual, second, third, fourth etc...). if you open another page and come back to the "galleria" page then it's broken again
2. Click on thumbnail of the second, third etc.. image: if you click on the thumbnail of an image different from the current image, then the stage shows the image and you can come back to the first image with no problem (with no loading delay). this only works if you have more than one image, if only one image is available, clicking on the current image's thumbnail won't do anything.
3. Open/close the overlay: I noticed that opening/closing the overlay (for users with the overlay access) kind of restart (do not misunderstand me, it is very quick) the galleria and thus the first image will show with the "introductory animation".

I think this third point is the most interesting one to help identify and solve this bug.

Comments

Status:Active» Needs review

If anyone is interested to know how I solved this issue here it is:
First I dig into the point 3. to check how is the overlay solving the pb. By debugging I noticed that the Galleria starts properly when a call to the bbq.removeState is being made. So I simply reproduced this call right after the galleria() call to get it work.

1. I had to add a library with the following dependencies in order to get all the right javascript files loaded for anonymous users (I implement the hook_library and added the library in another module to limit the impact on the galleria module):

'dependencies' => array(
      array('system', 'ui'),
      array('system', 'jquery.bbq'),
      array('contextual', 'contextual-links'),
    ),

The contextual-links is not needed to make galleria work only, but in my case I had to add it to let the webmaster see them if the page is a view page and the entity is loaded via AJAX (in which case the js file isn't loaded).

2. Then in the galleria.load.js file I added the following line:
$.bbq.removeState("Eweev");
on line 22 right after this code:

var optionset = settings.galleria.instances[id];
        if (optionset) {
          $this.galleria(settings.galleria.optionsets[optionset]);
        }
        else {
          $this.galleria();
        }

Here the Eweev string is arbitrary (it is a convention we use in our company to use the name of company when an arbitrary string is needed :-)

Once you do that, the galleria should load and start even when it is being loaded from an AJAX call.

Of course a cleaner way should be implemented inside the module (since now I create and load the library in an external module).