Galleria on Shopify

Schuyler Brown
July 5, 2012 at 8:17 pm

I’m having difficulty incorporating Galleria onto my Shopify
site. Any suggestions on how to go about doing this would be
greatly appreciated.

Thanks.

Frank
July 6, 2012 at 9:43 am

Could you explain the problems you are having, error messages
etc?

Schuyler Brown
July 6, 2012 at 3:52 pm

david, can we talk to you live please? my assistant taylor,
copied above, has been working on the problem.
his number is +1.503.329.1573

Frank
July 6, 2012 at 4:09 pm

Sorry, we don’t have telephone support. We have no
specific instructions for Shopify, but the generic instructions
available at http://galleria.io/docs/ should
apply for all backend environments.

If you run into problems that are specific for the Galleria
product, let the developer post the problem here and be as
descriptive as possible.

ben
August 7, 2012 at 1:14 am

seems crazy to me that shopify can’t do galleries. i’ve bought
galleria now as it was advertised as just “copying and pasting
code” and its nothing close to that. ive been looking at forums and
the readme for an hour and have made no progress.

So I guess my first question is, I downloaded galleria, I
bought/downloaded the theme I like, what is step 1?

Ben Forman
August 7, 2012 at 8:07 am

In the “beginners guide” it asks me to

“Extract the galleria.zip file and place the
“galleria” directory where you have your HTML
files.”

I don’t know what this is. I’m using Shopify.

Thanks in advance,
Ben

Samuel
August 7, 2012 at 9:30 am

I am sorry, but “Where to put html in Shopify” seems to be
Shopify support task. May be better try to ask their support for
that.
I never used Shopify, so I am sorry.
Samuel
Frank
August 7, 2012 at 11:13 am
We are working on some tutorials on how to publish Galleria
galleries on various platforms. It’s not always an easy task
though, as there are no simple apps or plugins that works
cross-platform. So regardless, it’s good to have some basic
knowledge on how to upload files and include them in the CMS.

On Shopify, you do something like:

1) Place the galleria files in your assets as described here:

http://support.shopify.com/customer/portal/articles/75345-i-want-to…
I thin you need to place them flat inside the assets directory.

2) Add this before closing the </head> tag in
the theme.liquid template:
```
{{ 'galleria-1.2.7.min.js' | asset_url | script_tag }}
{{ 'galleria.classic.min.js' | asset_url | script_tag }}
```
3) Now you should be able to call Galleria on any container
containing images (You don’t have to load the theme, we did
that in the head).

There are some docs in the shopify help that explains how to add
assets and place them inside your theme files.
Ben Forman
August 20, 2012 at 7:28 am
Ok, thanks. I believe we are making slight progress. I
successfully downloaded my theme, added all the galleria elements
to the assets folder, and re-uploaded the theme.

For the example code in the interestingly named “Beginner’s
Guide”, I’ve pasted in the element specific URL anywhere it was
called. Thus my code now looks like this:
```
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://cdn.shopify.com/s/files/1/0119/3292/files/galleria-1.2.7.min.js?3089"></script>
<style>
        #galleria{ width: 700px; height: 400px; background: <a href="/discussions/problems/000" title="Discussion #000">#000</a> }
</style>
</head>
<body>
    <div id="galleria">
        <img src="http://cdn.shopify.com/s/files/1/0119/3292/files/zlogo.jpg?3089">
        <img src="http://cdn.shopify.com/s/files/1/0119/3292/files/zlogo.jpg?3089">
        <img src="http://cdn.shopify.com/s/files/1/0119/3292/files/zlogo.jpg?3089">
    </div>
    <script>
        Galleria.loadTheme('http://cdn.shopify.com/s/files/1/0119/3292/files/galleria.classic.js?3089');
        Galleria.run('#galleria');
    </script>
</body>
```
When I run this, i get the error “Init failed: Galleria could
not find the element “#gallery”

I cannot find this #gallery thing-a-ma-jig anywhere in the files
I uploaded.

What is my next step?

What is the timeline on publishing the tutorials you
mention?

Thanks in advance.

Regards,
Ben
Frank
August 20, 2012 at 8:43 am

You are probably calling Galleria.run('#gallery');
instead of Galleria.run('#galleria');.

Ben Forman
August 20, 2012 at 9:37 am

Where? The code on my page is as copied, with
Galleria.run(‘galleria’);

Are you talking about somewhere else?

see it here:

http://www.zboardshop.com/pages/galleria1
Frank
August 20, 2012 at 9:55 am
When I view the source, I find on line 220:
```
Galleria.run('#galleria');
```
And then on line 228:
```
$("#gallery").galleria({
    width: 500,
    height: 500
});
```
The second one should be removed. You are also loading the theme
multiple times, please review your code and avoid adding more code
than necessary.
Ben Forman
August 20, 2012 at 10:11 am

Ok, thanks for your help. I think I’ve correctly removed that
section. I had forgotten I’d put that in there – I’d read that tip
off some other forum and had forgotten about it.

I now no longer see the error but the gallery doesn’t seem to
work. Only one of my 3 pictures is showing as a thumbnail and its
not expanding into the window when I click on it.

Am I not calling the JQuery correctly?

-Ben

Frank
August 20, 2012 at 11:18 am

You are still loading several themes multiple times, check your
source code. You are also loading Galleria multiple times.

Ben Forman
August 21, 2012 at 7:47 am

Looking at the source code, when i search “galleria” it comes up
18 times.

How can I find where I’m loading galleria multiple times? What
is the code for “loading Galleria?”

With that I should be able to go through and delete all other
instances

1 2 →

Your Cart

Galleria on Shopify

These forums are now closed to new replies / tickets.

Schuyler Brown

Frank

Schuyler Brown

Frank

ben

Ben Forman

Samuel

Frank

Ben Forman

Frank

Ben Forman

Frank

Ben Forman

Frank

Ben Forman