Please keep in mind that any time that you use javascript libraries like the ones used by this stack, there's a chance of running into conflicts with some themes or other plugins installed on your pages...

To bring prettyPhoto to life, you'll need one or more links to act as triggers, i.e. when you click on the triggers, prettyPhoto's lightbox opens up.

In it's simplest form, prettyPhoto requires just 2 simple steps:

1) Add a link to a piece of text or to an image
2) Modify the link by adding a 'rel' attribute value of 'prettyPhoto' for single items or 'prettyPhoto[gallery]' for galleries

That's it.

In the examples below, you'll learn how to set up prettyPhoto for the following alternatives:

• Single image
• Single video
• Single website
• Single inline content
• Image gallery

For each of those alternatives, we'll show you how to set up the links manually or using RW's Add Link command and we've included an active link to show you a live example.

OK, let's get started...

The first thing to do is to add a Stacks page to your project and then drop the prettyPhoto Stack. Your page will look like the screenshot below. If not, go to Page Inspector>Page and check "Render HTML in Edit mode."

prettyPhoto includes a built-in test to make sure that everything is in order.

To test prettyPhoto, Preview and click on the "Click here to test prettyPhoto" link. If everything works correctly, go back to Edit mode, click on the test text and delete it. When you click on the test text, your screen will look like this:

Just select everything and delete it. Don't worry, nothing will break.

Now, let's move on to the examples...

If your media (images and videos) are located in your Page Assets, you would modify your links as shown here:

To create galleries or groups of images, videos, etc. is very simple. In this example, we assume that you'll want to have a single link to start the gallery or group.

1. Create all the links that you need and assign the same 'rel' attribute value to each of the items to be included in the same group, e.g. prettyPhoto[gallery] (notice that we used square brackets around the word 'gallery')
2. Hide all but the first link by placing them inside a div with a display property set to none

Here's an example with 3 images:

If your media (images and videos) are located in your Page Assets (RapidWeaver 4), you would simply modify your links as shown below. As you can see, the 'href' values were changed to follow this pattern for a manual link: href="assets/Bryce1.jpg" and, for the link using the Add Link command, we simply selected the image from the Asset menu on the top left of the window.

For RapidWeaver 5, Resources have replaced Page Assets, therefore the new pattern is the following: href="%resource(Bryce1.jpg)%"