Using Points with Lightbox content.

The Points stack is a great way to add an image or map with

It is very easy to set up the Points Stack with most types of Lightbox stacks. In this FAQ we will show you how to do it with Joe's Expose, Lightbox, and Foundation's Reveal Lightbox stacks.

The first tutorial is for Foundation's Reveal Lightbox, if you do not use Foundation, click to see the Expose tutorial or click to see the Lightbox tutorial.

Foundation's Reveal Lightbox Instructions

If you are using Joe's Foundation for RapidWeaver theme, you can use the demo project file and see how to set up the Reveal Lightbox stack with Points. If you can not figure that out, follow the instructions here.

1. Once you have your Points stack set up, you will want to add the first Reveal Lightbox to your page and set up the Reveal Lightbox to Launch Externally

   

2. You will also want make a Reveal ID. In our example above, the ID is set to revealpoints. You will want to remember this ID as you will use it later.

3. Set up the Reveal Lightbox stack with the content. Then you need to decide what point you are going to use. Choose the point and get ready to set the link to the reveal lightbox. Click on the Set Link button in the Points settings and you will see a sheet dropdown.

   

4. First thing is you want to set the URL, and you want to set it to

   javascript:void(0)

5. Then you want to add a new custom attribute to the link. There are two parts to this attribute. The Name and the Value. The name you want to set to data-reveal-id and the the value needs to be set to your Reveal Lightbox ID, which is revealpoints.

6. Now preview your page, find the point and try it out. Repeat for each point you want to use Reveal Lightbox with.

Expose

If you are using Joe's Foundation for RapidWeaver theme, you can use the demo project file and see how to set up the Expose stack with Points. If you can not figure that out, follow the instructions here.

1. Once you have your Points stack set up, you will want to add the first Expose stack to your page and check Hide Launcher? checkbox.

   

2. You will want to make an Expose ID. In the example above we have it set to points. You will want to remember this ID as you will use it later.

3. Set up the Expose stack with the content. Then you need to decide what point you are going to use. Choose the Point and get ready to set the link in the Expose stack. Click on the Set Link button in the points setting and you will see a sheet dropdown.

   

4. First you want to set the URL, and you want to set it to

   javascript:void(0)

5. Then you want to add a new custom attribute to the link. There are two parts to this attribute. The Name and the Value. The Name you want to set to *class and the Value you want to set to expose_ExposeID, where ExposeID is the ID you set, so for this example it would be expose_points

6. Now preview your page, find the point and try it out. Repeat for each point you want to use Expose with.

Lightbox

If you are using Joe's Foundation for RapidWeaver theme, you can use the demo project file and see how to set up the Lightbox stack with Points. If you can not figure that out, follow the instructions here.

1. Once you have your Points stack set up, you will want to add the first Lightbox stack to your page and check the Hide Launcher checkbox.

   

2. You will want to make a Unique ID. In the example above we have it set to points. You will want to remember this ID as you will use it later.

3. Set up the Lightbox stack with the content. Then you need to decide what point you are going to use. Choose the point and get ready to set the link in the Lightbox Stack. Click on the Set Link button in the Points setting and you will see a sheet dropdown.

   

4. First you want to change the URL, and you want to set it to using the Unique ID you set up, for example:

   #lightbox_points

5. Then you want to add a new custom attribute to the link. There are two parts to this attribute. The Name and the Value. The Name you want to set to class and the Value you want to set to OverlayPanel.

6. Now preview your page, find the point and try it out. Repeat for each point you want to use Lightbox with.

If you want to find out how to use Points with Peek-A-Boo, Glider or Dropdown, see this FAQ (coming soon)

We hope this has been helpful! Now go forth and make your websites great!