FancyBox Examples – Leo Florendo

1. Here’s an example of using FancyBox to display a single or a gallery of images.

Note that FancyBox Lightbox will fail if you left or right align an image. To get around that problem, insert a Column block with image in one column and text in the other column like this:

Here’s some text in a 2 column block with a small single thumbnail in the other column. When the image is small, people will want to click on it to see a large version so insert an image but make is small to force people to click on it.

Here’s a GALLERY of multiple images – the center large one has FancyBox DISABLED on purpose.

Set this text by adding text in the Alternative Text field on the right sidebar when you click on an image.

2. Here’s an example of featuring a webpage with FancyBox:

The image on the left links to a webpage – this particular webpage features a photo and also audio playing in the background – audio that is the same as the text on the image.

Here are instructions on how to implement FancyBox for a w e b p a g e.

3. Here’s an example of an image linked to display a YouTube Video with FancyBox.

Video of Letters F and A made of laser cut wood

Here’s some text wrapping around a small thumbnail that links to a video on YouTube. Note that the image is NOT a small resized YouTube block in WordPress. It’s an image, not a video but it’s linked to a video.

Here are instructions on how to implement FancyBox for a YouTube Video

4. Here’s an example of featuring a PDF with FancyBox

On the left is a thumbnail image of the 1st page of a multi-page PDF. Clicking on the image will invoke FancyBox to display the entire PDF as an overlay on top of this current webpage (instead of completely replacing this content with the PDF content).

Note the PDF caption to instruct the viewer to click on the image to view the entire PDF.

Here are instructions on how to implement FancyBox for a PDF image.