Shopify + Galleria to create photo gallery

Tourist
10 0 4

Are you still having issues with Galleria?

I have used this plugin extensively.
A few important things:

  • Galleria - could not find stage error - means you have not pointed the plugin to the div container you are using to display Galleria.

    e.g. HTML --> <div id="MyGalleria"><!-- photo images here --></div>
    e.g. Script --> Galleria.run("#Galleria", { });
  • Galleria - height error. You need to set height of galleria in script.
    //configure options.
    Galleria.configure({
    max: 50,
    show: 1, 
    thumbCrop: false,
    imageCrop: 'width',
    height: 500,
    transition: 'pulse',
    lightbox: true,
    fullscreenDoubleTap: true,
    preload: 5
    });

 

  • Galleria Themes - are a bit harder to use in Shopify as you do not have the ability to create folder structures in 'assets' area.

 

In general, Galleria scripts need to be adjusted to work effectively in Shopify. More specifically, all image/icon references in the script need to be corrected to point to Shopify assets.

Let me know if you need any assistance outside of this.
info@mwebsolutions.com.au

0 Likes
Tourist
10 0 4

Furthermore, you need to define the height of the Galleria div container using CSS:

/* This rule is read by Galleria to define the gallery height: */
#MyGalleria{height:500px}

0 Likes
Tourist
10 0 4

You can use CDN without having to rewrite scripts - that way they mange folder structures that are otherwise not supported in Shopify assets directory.

<!-- load Galleria -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.7/galleria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.7/themes/classic/galleria.classic.min.js"></script>

 

 

0 Likes
Tourist
10 0 4

CORRECTION: This should read "MyGalleria" for HTML id and script reference.

 

e.g. HTML --> <div id="MyGalleria"><!-- photo images here --></div>
e.g. Script --> Galleria.run("#MyGalleria", { });

0 Likes
Tourist
15 0 1

Is there a way to add more than 8 pictures to one gallery?  When I try an add more than eight pictures a new gallery appears below the first gallery.  Is this an issue with space, picture size?

Steve

0 Likes
New Member
23 0 0

Hi, I am having an issue with this, I have done everything as in the tutorial, but when I click to view the website, there is no slideshow there. Do you know what the problem could be?

Thanks

0 Likes
Shopify Partner
26 0 2

HI - this looks great and lots of help here. Can you add more than 8 images? and can more than one gallery be added to same page? I have a client wanting to add to a page with multiple galleries.

 

THANKS1

0 Likes
New Member
8 0 0

Not sure if there is a limit on # of images but I am running a gallery with 22 images and it has contained as many as 25. I don't have a site that currently does it but I do believe you can run more than one gallery per page.

0 Likes
Tourist
51 0 3

Can this be adapted for all product images? 

Eg. If you put the second bit of code around something in product.liquid? 

0 Likes