Aarcade’s Big Cartel themes use the more powerful and robust ColorBox, rather than Big Cartel’s default Fancy Zoom, light box viewer. By default, ColorBox is enabled only for your product images on the Product page.

This article explains how to use ColorBox with your own custom content. When applying these instructions for page content, be sure to first enter HTML edit mode – refer How do I locate and use my theme's CSS?

Using ColorBox

The ColorBox function will be applied to any link you create with the class colorbox. The simplest example is a text link that will launch an image. Don’t forget the class=”colorbox”. For example:

<a href="http://i39.tinypic.com/aemt5j.jpg" class="colorbox">Boy on a Bike</a>

You can create your own link using the same format, i.e.

<a href="IMAGEURL" class="colorbox">LINKTEXT</a>

Creating a Gallery

You can tie a number of image links together as a gallery. This will allow previous/next navigation through all gallery images once the light box is launched. To do this you must add a matching rel attribute to all links. For example:

<a href="http://i40.tinypic.com/2wolnqw.jpg" class="colorbox" rel="testslides">Slide 1</a>
<a href="http://i43.tinypic.com/33215yo.jpg" class="colorbox" rel="testslides">Slide 2</a>
<a href="http://i43.tinypic.com/21kf2fb.jpg" class="colorbox" rel="testslides">Slide 3</a>
<a href="http://i40.tinypic.com/23vj0hg.jpg" class="colorbox" rel="testslides">Slide 4</a>

Here we have used the rel value “testslides” to tie all links together.

Using Thumbnails

In some cases you may wish to use an image thumbnail for the original link, rather than text. For example:

<a href="http://i39.tinypic.com/aemt5j.jpg" class="colorbox"><img src="http://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike" width="200" height="150" /></a>

Here we have used the same image file that we are launching for the thumbnail as well, applying width and height attributes to shrink it down to 200px by 150px.

If you have a number of images on your page, it is recommended that you create separate smaller thumbnail images, rather than using the method above. Using the following format will improve your page loading speed as well as improve the appearance of your thumbnails:

<a href="LARGEIMAGEURL" class="colorbox"><img src="THUMBNAILIMAGE" alt="" /></a>

Using a Web Page

In some cases you may wish to launch a web page in your light box. To achieve this you must add the attribute data-type="webpage" to your colorbox class link. For example:

<a href="http://www.aarcadethemes.com/" class="colorbox" data-type="webpage">Aarcade</a>

The default width and height of the view are set to 80% of the browser window width and height.

In some cases, you may wish to control the width and height of the of the light box. To do so, you must add the additional attributes data-width="X" and data-height="Y". Width and height values must be entered in pixels, e.g. “500px”, or as a percentage e.g. “60%”.

For example, we may want to make use of American Apparel‘s Men’s T-Shirt size chart located at http://www.americanapparel.net/sizing/default.asp?chart=mu.shirts. This chart will look neat within a 580 pixel wide by 620 pixel high light box:

<a href="http://www.americanapparel.net/sizing/default.asp?chart=mu.shirts" class="colorbox" data-type="webpage" data-width="580px" data-height="620px">Men's T-Shirt Sizing Chart</a>

Using a Video

Launching a video in your light box works in the same way as launching a web page (detailed in the previous section). You simply set data-type="webpage" and use the src, width and height values provided by the video iframe embed code as shown in the following examples.

Vimeo

On Vimeo, we locate a video for Dirty Projectors – Gun Has No Trigger, hover over the video and click the Share button. This provides us with the Embed code:

<iframe src="http://player.vimeo.com/video/45266247?title=0&byline=0&portrait=0&color=ff9933" width="980" height="551" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

From this we extract the src, width and height values to use in our link’s href, data-width and data-height values respectively. So the link we use in our shop will be:

<a href="http://player.vimeo.com/video/45266247?title=0&byline=0&portrait=0&color=ff9933" class="colorbox" data-type="webpage" data-width="980px" data-height="551px">Dirty Projectors - Gun Has No Trigger</a>

YouTube

On YouTube, we locate a video for Elbow – ‘Lippy Kids’ (Live at Blueprint Studios), click the Share button and then click the Embed option. This provides us with the code:

<iframe width="560" height="315" src="http://www.youtube.com/embed/NItwaz0nLJA?rel=0" frameborder="0" allowfullscreen></iframe>

From this we extract the src, width and height values to use in our link’s href, data-width and data-height values respectively. So the link we use in our shop will be:

<a href="http://www.youtube.com/embed/NItwaz0nLJA?rel=0" class="colorbox" data-type="webpage" data-width="560px" data-height="315px">Elbow - 'Lippy Kids' (Live at Blueprint Studios)</a>

Using Your Own Video

To use your own video, simply create your own account at Vimeo or YouTube, upload your video and follow the examples provided above.