Gallery Examples

Image Pop-ups

To create standard image pop-ups, do the following:

  1. Drop the thumbnail on the page.
  2. Select the thumbnail.
  3. Create a link from the thumbnail image to the main image.
  4. With the link selected (click on 'a' from the tag context bar in the bottom of the editor frame to ensure that the correct HTML element is selected), select 'Gallery Item' from the Styles drop-down.

Mixed Content

To create mixed gallery (e.g. links to YouTube videos, iFrames, pop-ups, do the following:

  1. Drop the thumbnail on the page.
  2. Select the thumbnail.
  3. Create a link from the thumbnail image to the main item. See below for details.
  4. With the link selected (click on 'a' from the tag context bar in the bottom of the editor frame to ensure that the correct HTML element is selected), select 'Gallery Item' from the Styles drop-down.

YouTube Video An iFrame An Image

Linking items

Gallery items can be linked together so that a navigation bar appears in the pop-up window and the user can quickly navigate between the items without closing the pop-up window.

  1. Drop the thumbnail on the page.
  2. Select the thumbnail.
  3. Create a link from the thumbnail image to the main item. See below for details.
  4. With the link selected (click on 'a' from the tag context bar in the bottom of the editor frame to ensure that the correct HTML element is selected), select 'Gallery Item' from the Styles drop-down.
  5. With the link still selected, right-click and select Edit Link, click on the Advanced tab, then under Stylesheet Classes, append a gallery name in square backets to the class name, e.g. prettyPhoto[myLinkedItems]. You can use any name for your gallery (i.e. the bit in square brackets). Just ensure that you use the same class name for all the images you want to link.

YouTube Video An iFrame An Image

What's going on in the background?

When you assign the Gallery Item style to a link, this changes the CSS class for the selected link to prettyPhoto and automatically applies the gallery thumbnail border and other style properties.

When the page is rendered, a corresponding icon is overlayed (where appropriate), and the link opacity is changed according to the rollover state of the thumbnail.

Further Information

The alt attribute of a thumbnail image ('img' tag) is used as the title for the pop-up window and appears at the top of the window.
The title attribute of the link ('a' tag) is used as the description for the pop-up window and appears underneath the content in the pop-up window.

You can set the width and height of a pop-up window, by passing in width and height as URL attributes on the end of the link - e.g. "?width=100&height=100".

What kind of media can I link to?

Images

<a class="prettyPhoto" href="images/fullscreen/1.jpg" title="You can add caption to pictures."><img alt="Red round shape" height="60" src="images/thumbnails/t_1.jpg" width="60" /></a>

Flash content (swf files)

  1. Change the href of your link so it points to the SWF file.
  2. Then add the width and height as parameters in your HREF (?width=100&height=100).
  3. In the case your flash needs specifics variables, add &flashvars and add the required parameters.
<a class="prettyPhoto" href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf&?width=792&height=294" title="Flash 10 demo"><img alt="Flash 10 demo" src="images/thumbnails/flash-logo.jpg" width="60" /></a>

YouTube/Vimeo content

Change the href of your link so it points to the YouTube/Vimeo video page, the same link you would share with friends.

<a class="prettyPhoto" href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" title=""><img alt="YouTube" src="images/thumbnails/flash-logo.jpg" width="60" /></a>

QuickTime movie content

Change the href of your link so it points to the .mov file. Then add the width and height as parameters in your HREF (?width=100&height=100).

<a class="prettyPhoto" href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360" title="Despicable Me"><img alt="Despicable Me" src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" width="50" /></a>

iFrame content

Change the href of your link so it points to the webpage you want to open. Then add “?iframe=true” as a parameters in your HREF so prettyPhoto knows to open the content in an iframe. Then add the width and height as parameters in your HREF (&width=100&height=100). Please note that the dimensions can be percent based.

<a class="prettyPhoto" href="http://www.google.com?iframe=true&width=100%&height=100%" title="Google.com opened at 100%">Google.com</a>