FancyBox Examples – Leo Florendo

1. Here’s an example of using FancyBox to display a SET OF IMAGES.

Click on one of the images in the responsive gallery (responsive means the images will re-wrap themselves to different browser widths – try it by making your browser window smaller and bigger):

Each image above when clicked will display a larger version of the image along with a caption in a smooth “overlay” feature that displays “on top” of the main page content. After clicking on one image, you can use your keyboard arrow keys to switch to the next or previous image. And you can use the Esc key to get out of the overlay FancyBox display. Pretty cool, right?

Here’s an example of Photoshop Creative Blend Mode images using this technique. Note that because this is a 2nd set of images, this code uses imgSet2 in the code and all the photos are in a folder labeled imgSet2.

Here are instructions on how to implement FancyBox for a SET OF IMAGES.

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

Here’s some text wrapping around a small thumbnail that is linked to the same in the Media Library. 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 are instructions on how to implement FancyBox for a SINGLE IMAGE.

3. 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.

4. 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

5. 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.