Shopify + Galleria to create photo gallery

New Member
8 0 0

hi htere.  So I am using your script to include multiple galleries on one page and it works great.

<div class="gallery1">IMAGES HERE</div>
<div class="gallery2">IMAGES HERE</div>
<script>// <![CDATA[
Galleria.loadTheme('https://cdn.shopify.com/s/files/1/0620/3589/t/6/assets/galleria.classic.min.js');
 $(".gallery1").galleria({
        width: 300,
        height: 300
    });
    $(".gallery2").galleria({
        width: 300,
        height: 300
    });
// ]]></script>

but now I need it to be responsive and I do not know where to add the code for that.  I'm reading that the code is

Galleria.run('#galleria', {
    responsive: true
});

how do I add that code to my script?  Do I put it in every instance?  Or just once at just after Galleria.loadTheme?

Thank you!

 

0 Likes
New Member
1 0 0

I followed all your steps and everything seems to be working fine. Except i want to use my photos through the Picasa Add On. How do i do that? To be more specific, I am trying to upload a large quantity of photos to my gallery on a certain page and intead of going and adding 1 by 1 would there be an easier way to do it? Finally, how do i set it up so that the photos are thumbnails and when you click on them the full sized image comes up?

0 Likes
Shopify Partner
24 0 2

I'm not really a Galleria expert. I just figured out the basics of integrating it to Shopify. I have not used the Picasa plugin you mention, but Galleria has a lot of good documentation that leads you through the steps. http://galleria.io/docs/plugins/picasa/

Galleria is easy enough for non-developers to use, but it gets more complex when you want to do more with it and you will have to manipulate code a bit. You should search the Galleria documentation for the other things you're trying to do. It may be a specfic theme that you need to get. Not all of them are free.

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes
Shopify Expert
64 0 4

Thanks for the Tutorial.

Shopify Design, Development, SEO, Social Media, Marketing and Support - realmwebdesign.com
0 Likes
New Member
1 0 0

Ryan,

thanks for the tutorial. Got it work in my shop, but I want to change the dimensions. The following css code is from the Galleria documentation:

 

<style>
    .galleria{ width: 700px; height: 400px; background: #000 }
</style>

I tried pasting this into the HTML/CSS box in the page where I want the gallery to show, but this produces an error.

any help would be appreciated. thanks again.

 

0 Likes
Highlighted
Shopify Partner
24 0 2

I typically just edit the css right in the galleria-classic.css file

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes
Tourist
12 0 1

This worked brilliantly. Thanks! I have been trying to mess around with the CSS. Changing the color of the background/arrows...but can't seem to get it to work. Even with !important

Any ideas?

1 Like
Shopify Partner
5 0 1

Wondering if anyone has has success in changing the background color of the Galleria slider. It is set to black as default and I would like to change it to white, with all the buttons and navigation changed to black. I have tinkered around with the colors in galleria.classic.css and changed every instance of background color to #ffffff!important, but it doesn't seem to be working. I have also tried to insert .galleria-container { background: #fffff!important; } in various places, including between <style> brackets on the gallery page itself. Still no luck changing the background color. Any hints? Thanks!

0 Likes
Shopify Partner
24 0 2

It's probably best to look at Galleria's documentation for editing the CSS style. This post was really just for getting a gallery into Shopify. I did a quick search and found someone suggest the code below to achieve what you're trying to do: 

 .galleria-container { background: #fffff!important; }

 

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes
New Member
2 0 0

Thanks Ryan, Very helpful. Cristal clear! 

0 Likes