A Better Lightbox

From Shopify Wiki

Jump to: navigation, search
The basic lightbox used in most pre-installed themes is nice, but I really wanted something that stood out and appeared a bit more custom. Fortunately there's a few nice open-source alternatives that will do the trick. Here's a quick overview of a few replacements to the global lightbox that sits on Shopify's servers and is used by most stores.


Contents

Background

Slimbox

While all these scripts will add a nice touch over the generic global lightbox, I prefer Slimbox for several reasons. Here's a few to consider, which are also mentioned on the Slimbox website:

  • Uses the TINY mootools library, which is less than 7kb. Awesome!
  • Produces 100% valid CSS, unlike other Lightbox versions.
  • Easy to style through CSS instead of inside the javascript code.
  • Does not require a transparent gif like other versions of Lightbox.
  • Clicking the transparent background will close Slimbox.
  • Hides flash and videos on page eliminating bugs when Slimbox is active.
  • Key strokes control the Slimbox in addition to mouse actions.
  • Slimbox is available as soon as page loads.
  • Sweet mootools transitions that can be used to animate your Slimbox.

So, it's pretty obvious that there's a lot of advantages with Slimbox and it's super easy to implement in a Shopify theme. This page will take you through the process to add Slimbox to your Shopify theme with a few simple steps. Let's get right into it and add some spunk to your store! I'm pretty OCD, so hopefully the details will make your implementation quite simple.

Mootools Framework

Before you can apply anything to your Shopify theme, you'll need the 'mootools' javascript library. Mootools has made it quite simple to get the library components you need through the Download Builder. At the minimum you'll need to select the following components, but selecting all wouldn't hurt either:

  • Native: Array, String, Function, Element
  • Window: Window.Base, Window.Size
  • Effects: Fx.Style, Fx.Styles, Fx.Transitions, Fx.CSS,

Keep "Packer Compression" selected as the compression type, then download mootools to your computer. Rename the downloaded file to mootool.js.

Slimbox Script

You'll obviously need to get your hands on the latest version of Slimbox as well. Simply download it to your computer and unzip the compressed file.

Upload the Assets

Now that you have the necessary javascripts, we need to upload them to your Shopify store. Putting everything on the server is as easy as the following steps:

  1. Log into your shop
  2. Click the "Assets" navigation tab
  3. Click on "Theme Editor"
  4. Press "Upload a new asset" below your Assets
  5. Upload mootools.js
  6. Press "Upload a new asset" again
  7. Upload slimbox.js

An essential piece of the puzzle is the stylesheet. I prefer to add the slimbox styles to my master stylesheet, but you could also upload slimbox.css independently and address it in your theme.liquid head. Let's add it to our master stylesheet here since that's my preference.

  1. Click your stylesheet from the list of Assets (shop.css)
  2. Scroll to the bottom and add a couple blank lines
  3. Go back to the uncompressed Slimbox folder on your computer and open the file, "slimbox.css" located in the CSS folder
  4. Copy all the contents of slimbox.css then open your browser window again
  5. Paste the slimbox.css contents in the bottom of your master stylesheet (shop.css) and save

You'll also need to upload all the images that were included with the Slimbox download. They are located in the CSS folder contained within the Slimbox compressed file. Simply "Upload a new asset" for each image.

Include Scripts

All the required files are now on the server and ready for use. We need to add the javascript files in the head of our theme.liquid file, which can be done by choosing the "Assets" tab, going to the "Theme Editor" and clicking theme.liquid. Immediately above {{ content_for_header }}, add the following two lines of code: 


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


At this point, you should also remove the following tags from your head as they may interfere with mootools, but I haven't tested it. 

{{ 'prototype.js' | global_asset_url | script_tag }}
{{ 'lightbox.js'  | global_asset_url | script_tag }}
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}

Activate Images

Mootools and Slimbox are now available for usage anywhere throughout your theme. We are particularly interested in activating the product images on product.liquid, so let's do that now. Choose the "Assets" tab from the navigation menu, go to "Theme Editor" and click product.liquid. You already have a block of code somewhere on this page similar to this: 

  {% for image in product.images %}
    <a href="{{ image | product_img_url: 'large' }}" class="lbOn">
    <img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title }}" /></a>
  {% endfor %}

We simply need to change it look like the following: 

  {% for image in product.images %}
    <a href="{{ image | product_img_url: 'large' }}" rel="lightbox[images]" title="{{ product.title }}">
    <img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title }}" /></a>
  {% endfor %}

Save product.liquid. Notice rel="lightbox[images]" in the link tag...this is what activates Slimbox and creates an image set to navigate through multiple images once Slimbox is active. The title="{{ product.title }}" tag is the description when Slimbox is active.

Install Complete

And that's it! Choose a product in your public store and click an image to give it a test. If you followed all the instructions herein, you should see a beautiful new Slimbox with transitions and all!

Extending Slimbox

Once you have everything working properly, take a look at the first few lines of slimbox.js for some editable options. You'll see something like this: 

resizeDuration: 400,
resizeTransition: Fx.Transitions.sineInOut,
initialWidth: 250,
initialHeight: 250,
animateCaption: true

Note: If you have questions, I'd suggest going to the Shopify Forums. There tons of very capable individuals there who are always eager to help. If you are looking for custom design work, check out my website, http://sofamade.com.

Retrieved from "http://wiki.shopify.com/A_Better_Lightbox"
Personal tools