Fancy Box Style

The Fancybox Style is a solution for adding pop-up window to text, images, and videos in the page content in Cascade.

General idea of code

<a href="#popupitem" class="fancybox">item1 that is the link</a>
<div id="popupitem"><p>item2 that will pop up</p></div>

Create a Fancy Box

  1. Use the WYSIWIG (or HTML) to add your body content.
  2. Insert item1 (image or text) into the page
  3. Select the image or text.
  4. From the editor choose Formats > Custom > fancybox

  5. Insert item2 (image or text) into the page
  6. Highlight item1 one more time.
  7. Click the Insert Link icon to link to the item that will be in the pop-up.
Example of Fancybox applied to a single image:

Click on image to open pop-up.

Miami Formal Garden 150 pixels

A code example would be:
<a href="#popupitem" class="fancybox">something will pop up if you click this</a>
<div id="popupitem"><p>see, something did pop up.</p></div>

Finish Up

  1. Click Submit to save your work.
  2. Publish (or send the request to publish).

Learn more

Fancybox can do many more things than what is listed above. To learn more visit the Fancybox website »

Note: You may need to edit the HTML directly to do some advanced tricks with Fancybox. If you aren't familiar with HTML and would like to learn visit w3chools.com.