Shopify + Galleria to create photo gallery

Shopify Partner
1737 48 156

Daniel Barna , make sure the page with galleria doesn't have a full css url embedded in the source, or that a hardcoded link is in the javascript. The cache issue is because it's not the css that's caches it's the page itself being cached and any updates still keep the old sources.

Sometimes you can force a cache update by appending ?01 to the css filename, but you are better off making galeria into theme based files, like snippets or alternate pages templates.

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
New Member
8 0 0

Ryan,

Great video tutorial, many thanks. I was able to get Galleria running on my "Minimal" shopify theme and with some research was able to do a few tweaks like adjusting the size, color, and adding Lightbox and Autoplay.

This is the code I have added to theme.liquid that may be useful to others reading this thread. Some of the code may be redundant or unneccesary (I don't know, I'm learning as I go). To change the background color of your gallery change the hex color code in two places below. I have mine set to white #fff, black is #000 but you can google hex colors to get any color you want. (be sure to remove the 2 spaces I added after "https: before the link to //ajax.google.apis...etc., the forum was stripping out the link in my code.)

{{'galleria-1.4.2.min.js' | asset_url | script_tag }}
    
<script src="https:  //ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>

  <style>
    .galleria{
       width: 1000px;
       height: 575px;
       background: #fff;
       margin-left: auto;
       margin-right: auto;
      }
    .galleria-container{
       background: #fff;
       margin-left: auto;
       margin-right: auto;
      }
    .galleria-thumbnails {margin: auto}
  </style>

And here is the html code I have on my gallery page (below code where I have the links to images):

<script>// <![CDATA[
    Galleria.loadTheme('https://cdn.shopify.com/s/files/1/1135/1136/t/7/assets/galleria.classic.min.js');
    Galleria.configure ({
       transition: 'flash',
       autoplay: true,
       lightbox: true});
    Galleria.run('.galleria',
       {responsive:true,height:0.5625},
       {autoplay: 5000});
</script>

 

0 Likes
Highlighted
Shopify Partner
24 0 2

Great! Thanks Ted! People have been asking about this but I haven't done the research on it. I'm sure people will find it helpful.

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes
Shopify Partner
11 0 3

What do you mean "(below code where I have the links to images)"?  Can you paste the complete example?  I actually started getting it to work with this code.

0 Likes
New Member
8 0 0

That bit of code gets added below the HTML links to the images you are including in your gallery on the page where it will be displayed (not in the Theme.liquid file). Go to the page where your gallery will be, click the <> button to show the underlying HTML code, scroll to the bottom and paste the code there below your image links (see attached screenshot). If you're not sure how to add the images to the page Ryan's video explains how to do it around 3:30 minutes in.

0 Likes
New Member
6 0 0

I follwed the steps exactly. but I am receiving "Init failed: Galleria could not find the element ".galleria" when I tried to navigate through the pictures in the gallery when I am viewing.

the images are displaying. But not clickable. 

0 Likes
New Member
8 0 0

Not sure what that means, possibly it's trying to run the script but not finding the needed asset file. I would suggest going back and making sure you uploaded all the asset files in the correct locations and verify they are there.

0 Likes
New Member
6 0 0

Hi Ted,

Thanks for the quick reply. it works fine now. I think there must be some copy/paste issue. this post is very handy and I created my simple gallery in a few minutes. I wish we can display the comments for the photos in the bottom or somewhere else instead of just using atl text value via the i icon. 

0 Likes
New Member
8 0 0

I don't know if Galleria has the possibility of comments on each photo, do you mean caption? There is an option for caption in Galleria but the Shopify visual editor only shows an "alt" text field when you go to edit the image, I think this is what referring to.

I just did a quick and dirty test to add an image caption on my gallery but I would have to play around with the sizing of the gallery container, images, and thumbnails before it will display on the site properly, but it does work. I did it adding a "figcaption" tag to the individual image and then adding "showinfo: true" with the other options I used (transition, lightbox, autoplay).

Figcaption details here: http://www.w3schools.com/tags/tag_figcaption.asp

Full list of available Galleria options here: http://galleria.io/docs/options/

Good luck, if you get it to work come back and add it to the thread. --Ted

<script>// <![CDATA[
Galleria.loadTheme('https://cdn.shopify.com/s/files/1/1135/1136/t/7/assets/galleria.classic.min.js');
Galleria.configure ({
    transition: 'flash',
    autoplay: true,
    showinfo: true,
    lightbox: true});
Galleria.run('.galleria',
    {responsive:true,height:0.5625},
    {autoplay: 5000});
// ]]></script>

 

0 Likes
New Member
6 0 0

Thanks Ted. It did not work for some reason. But I will keep trying. By the way, I saw YouTube in Galleria options. do you have any guide how to setup the video gallery page linking to youtube Videos please?

0 Likes