Shopify + Galleria to create photo gallery

[MWeb_Solutions]

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

[MWeb_Solutions]

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}

[MWeb_Solutions]

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>

[MWeb_Solutions]

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", { });

[SteveR2]

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

[lewiswilkinson]

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

[Darleen_Witmer2]

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

[Ted11]

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.

[Josie4]

Can this be adapted for all product images? 

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

[kenneth-ng]

Hi Ryan,

Have you discovered if Superstore theme allows for this plug-in?

I'm trying to add this code for my store:

<div class="galleria">
<img src="https://cdn.shopify.com/s/files/1/0278/8399/5245/files/2017-01-30_031133_luburgh_103051c6-5139-4809-...">
<img src="https://cdn.shopify.com/s/files/1/0278/8399/5245/files/2017-01-30_031133_luburgh_103051c6-5139-4809-...">
</div>
<script>
Galleria.loadTheme('https://cdn.shopify.com/s/files/1/00/3589/t/6/assets/galleria.classic.min.js');
Galleria.run('.galleria');
</script>

Here are the assets I've added:

{{ 'galleria-1.6.1.js' | asset_url | script_tag }}
{{ 'galleria-1.6.1.min.js' | asset_url | script_tag }}

Thanks,

Kenneth