Problem Solving

Using theme CSS

Omni Gallery provides many options for generating gallery styles. These are normally generated for each specific gallery block and injected into the page header as <style> elements.

If you would rather build such styling into a custom theme, output of Omni Gallery generated styles can be suppressed by selecting Suppress style output in the Advanced tab of the edit dialog.

A useful trick may be to initially use Omni Gallery to generate the styles, capture them from the page, then copy and edit the stles into your theme, removing block instance specific selectors.

Suppress style output is an all or nothing setting. Once selected, you will need to provide all styling through your theme css.

Lightbox is not showing

Showing a lightbox overlay requires 2 complimentary settings

  1. A Lighbox Overlay is selected. ie., Magnific, not None.
  2. Images in the gallery link to an image. In most cases this is a matter of setting Link to in Image Selection and selecting Image URL, though other image properties or attributes may also be used to create a link to an image.

Gallery takes a long time to load

The usual loading problems for any gallery block are caused by inappropriate selection of image sizes and the elements used to display images. In general, make sure images uploaded are big enough for your purposes and no bigger.

Within Omni Gallery, there are some further settings you can take advantage of to optimise the galleries and sliders generated.

In Image Display and Lighbox, select an appropriate image element. For example, a picture element with source set and optimal selection of thumbnail types will usually be better for a site that has mixed mobile and desktop view.

If you anticipate the Lightbox being used a lot, it can sometimes be better to select image elements and sizes appropriate to Lightbox within Image Display, so reducing diversification of files loaded.

In the Advanced settings, experiment with Lazy Loading settings.

In Image Selection, slow loading could be the consequence of prefetching large lists of images. Using an Infinite Dynamic variant of an Image Source will limit the images prefetched to those needed for the current Pagination in Image Display.

 

JavaScript Interference

If a gallery does not work, it could be that something is interfering with the gallery display widget's JavaScript. Galleries attach themselves to DOM elements. A typical problem scenario is that after a gallery has attached itself, something else manipulates the DOM and breaks that attachment. 

The solution is to manipulate the order in which the scripts initialise, so that the gallery display widget initialises after the interfering JavaScript has finished messing with the DOM, or to forcibly re-initialise the gallery display widget after the DOM messing has completed. This is a bit too complicated to provide a generic solution. If you need help, please contact me for support and we can discuss your problem and possible solutions.

Another scenario is an over-enthusiastic smooth scroll script hijacking controls in the gallery display widget. Here the solution is easier, just make the smooth scroll less greedy about what it selects.

The opposite is also possible. In particular, the Vegas display widget manipulates the DOM about the element it is attaching a background to. This can break the attachment of other JavaScripts to elements within that DOM element. Unfortunately the vegas.js is not as well behaved as we would have liked, so it can be neccessary to delay the initialisation of the other JavaScript until after Vegas has finished messing about!