a girl working on a computer

Applying Fancybox Style

The Fancybox is a style that will allow you to link text or a small image to a larger image in the body content.

Within the Page Content

  1. Use the WYSIWYG or HTML to add your body content.
  2. Insert an image into the page (optional, you can also use text to create the pop-up).
  3. Highlight the image or text for the Fancybox.
  4. Click on the Styles drop down menu and select fancybox.
    screenshot of styles drop-down menu showing fancybox selection
  5. Highlight the image or text one more time.
  6. Click the Insert Link icon to link to the item that will be in the pop-up.
  7. On the Insert Link dialog box, insert the link to the larger image (or text), then select "fancybox" from the drop-down for Class:
    screencap of selecting fancybox class in the Insert/Edit Image dialog bxo

Finish Up:

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

Example of Fancybox style applied to a single image:

Click on image to open pop-up.

Miami Formal Garden 150 pixels

The code for this example would look like:
<p><a class="fancybox" href="/_files/images/ucm/web/cascade-support/images/800pxwide.png"><img alt="Miami Formal Garden 150 pixels" src="/_files/images/ucm/web/cascade-support/applying-styles/garden150.png" height="100" width="150" /></a></p>

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, see HTML basics and visit w3chools.com.