Lightbox customer interface

Highlighted
Shopify Staff
Shopify Staff
2002 0 40

Make sure that you didn’t have hardcoded links. We moved the assets server locations last week. All links to your assets have to go though the {{ asset_url }} filter.

Tobias Lütke - Shopify CEO // http://twitter.com/tobi
0 Likes
Shopify Partner
12 0 2

i’m having some problems with slimbox as well. I followed the instructions in the wiki closely, but I can’t figure out where the problem lies. Could someone check it out?

Thanks!

http://www.horizens.net

0 Likes
New Member
1 0 0

Hi everyone,

Found this forum on google, nice to see lots of lightbox enthusiasts.

Here is a link to a site that I have incorporated lightbox into…

http://thehubapartmentscouk.site.securepod.com/apartments/photo.php

You will see I’ve done quite a bit of chopping and changing to make it that little more exciting. But what I would really like to do is place the buttons above the image. Has anyone managed this yet? I have some minor experience of Javascript which lead me to create what you see on the site, but I’m completely baffled as to how I would put my buttons above.

Any thoughts/suggestions would be greatly appreciated,

Many Thanks,

Bjorn

0 Likes
New Member
21 0 0

I had problems with the Slimbox loading two images, close.gif and loading.gif

The reason for this is that there is no way to specify a link to your assets images from JS code by using templates (something like {{ ‘close.gif’ | assets_url }}) because JS is not liquid template (duh). All other images load fine because they are loaded relative from the css referencing file.

Anyway… The solution is to add this code to your layout.liquid template in the head section (or anywhere alse, but its enough dirt putting JS in the page, so that we are also going to put JS code in our body right?)... like this:


<script type="text/javascript">
var fileLoadingImage = '{{ 'loading.gif' | asset_url }}';
var fileBottomNavCloseImage = '{{ 'close.gif' | asset_url }}';
</script>

—edit—
I forgot to mention, this uses the prototype.js framework, so it works fine with vision.

Turn on TV, turn off your Brain http://www.specialswarehouse.com http://www.levitax.com
0 Likes
New Member
2 0 0

I had problems installing Slimbox, following the Shopify Wiki instructions. Here are a few tips for those installation instruction that tripped me up.

1. When you are downloading MooTools, make sure to go to this URL (http://mootools.net/more) and click all of the checkboxes on the MooTools 1.2 More Builder before clicking the Download Option. I used “No Compression” for the download.

2. The Mootools file downloaded will be called: mootools-1.2-more.js. Rename this file mootools.js and upload it to your Theme Assets in Shopify.

3. Make sure to upload all the images assets in the Slimbox “images” folder download as Theme Assets in Shopify.

4. When cutting and pasting your Slimbox CSS into your main layout.css (or similar) master style sheet in Shopify, make sure to change your file location references for the slimbox images to the current directory. i.e. remove any extraneous directory hash marks or ”..”s. For example, in my version of the Slimbox CSS, the original CSS code was

.lbLoading { background: #fff url(../images/sb_loading.gif) no-repeat center;
}

I changed this (and all other image file paths) to


.lbLoading {
    background: #fff url(sb_loading.gif) no-repeat center;
}

5. Last one! In the theme.liquid file, make sure to make your script references thusly. Nothing worked until I changed the code to read “global_asset_url”.


{{ 'mootools.js' | global_asset_url | script_tag }}
{{ 'slimbox.js' | global_asset_url | script_tag }}

I think the original wiki instructions only said, “asset_url” which did not work for me. I spent an hour figuring this out, so hopefully this will save others some headache!

Cheers!

0 Likes