Big Cartel Theme Support

How do I use the popup image viewer with custom content?

How do I use the popup image viewer with custom content?

Shortcodes

Remember that, as well as supporting the methods detailed in this article, your Aarcade theme provides shortcodes to help you easily display your image galleries (with popup zoom) and custom popup links. Refer to:

  1. An introduction to shortcodes
  2. Shortcodes - Image galleries
  3. Shortcodes - Popup links and windows

The modal (popup) window function will be applied to any link you create with the class zoom-modal. The simplest example is a text link that will launch an image. For example:

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

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

<a href="IMAGEURL" class="zoom-modal">LINKTEXT</a>

You can tie a number of image links together as a gallery. This will allow previous/next navigation through all gallery images once the modal window 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="zoom-modal" rel="testslides">Slide 1</a>
<a href="http://i43.tinypic.com/33215yo.jpg" class="zoom-modal" rel="testslides">Slide 2</a>
<a href="http://i43.tinypic.com/21kf2fb.jpg" class="zoom-modal" rel="testslides">Slide 3</a>
<a href="http://i40.tinypic.com/23vj0hg.jpg" class="zoom-modal" rel="testslides">Slide 4</a>

Here we have used the rel="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="zoom-modal"><img src="http://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike" style="width:200px"></a>

Here we have used the same image file that we are launching for the thumbnail as well, applying an inline style to shrink it down to 200px wide.

If you have a number of images on your page, it is recommended that you create separate smaller thumbnail images, rather than use 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="zoom-modal"><img src="THUMBNAILIMAGE" alt=""></a>

Using a Web Page

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

<a href="http://www.aarcade.net/" class="zoom-modal" 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 modal window. 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 modal window:

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

Using a video

Launching a video in your modal window 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

From an example Vimeo 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>

..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="zoom-modal" data-type="webpage" data-width="980px" data-height="551px">Dirty Projectors - Gun Has No Trigger</a>

YouTube

From an example YouTube Embed code..

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

..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="zoom-modal" 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.

Displaying the modal window automatically on page load

You may wish to display your modal window automatically when your visitor loads the page. This can be handy when the modal content (i.e. the image, video, etc.) is something you want all of your visitors to see. For example, you might load an image that advertises a current sale at your shop.

To automatically launch the modal window all we need to do is add the class click-once to our modal link. If we take our first example from this article, we would have:

<a href="http://i39.tinypic.com/aemt5j.jpg" class="zoom-modal click-once">Boy on a Bike</a>

Note that the class attribute can contain multiple classes, but they must be separated by a space.

The click-once class, as the name suggests, will automatically click the link once for the visitor. On subsequent visits, the link will not be clicked, i.e. the modal window will only launch on the first visit.

Note that if you change your link in the future, the visitor may still register the link as already clicked. Additionally, if you use the link across multiple pages, the link may click once for every different page. To ensure more consistent and desirable behaviour it is recommended that you add an id attribute to the link as follows:

<a href="http://i39.tinypic.com/aemt5j.jpg" id="boy-bike-link" class="zoom-modal click-once">Boy on a Bike</a>

Note that the id can be stored permanently in the visitor’s cookies, so if you change the content of your link you should also change the id.

click-always

You can also use the class click-always instead of click-once, which has the expected effect of loading the modal window on every page visit. Be careful applying this option, as many people consider consistent popups to be annoying and you may drive visitors away as a result.

hide

If you are using your link purely to display an automatic popup, you may not want to display the link in your normal page content. In this case, you can add the class hide to your link as follows:

<a href="http://i39.tinypic.com/aemt5j.jpg" id="boy-bike-link" class="zoom-modal click-once hide">Boy on a Bike</a>

AarcadeHow do I use the popup image viewer with custom content?