{"id":127,"date":"2022-10-12T07:25:35","date_gmt":"2022-10-12T07:25:35","guid":{"rendered":"https:\/\/freestyleacademy.rocks\/~LeoF\/?page_id=127"},"modified":"2025-11-14T22:39:55","modified_gmt":"2025-11-14T22:39:55","slug":"fancybox-examples","status":"publish","type":"page","link":"https:\/\/freestyleacademy.rocks\/~LeoF\/fancybox-examples\/","title":{"rendered":"FancyBox Examples"},"content":{"rendered":"\n

1. Here’s an example of using FancyBox to display a single or a gallery of images.<\/a><\/h3>\n\n\n\n

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:<\/p>\n\n\n\n

\n
\n

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.<\/p>\n<\/div>\n\n\n\n

\n
\"\"
Old Digital Media Room on old campus<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Here’s a GALLERY of multiple images – the center large one has FancyBox DISABLED on purpose.<\/p>\n\n\n\n

\n
\"Set<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
<\/div>\n\n\n\n

2. Here’s an example of featuring a webpage with FancyBox<\/a>:<\/h3>\n\n\n
\n
\"Poetry\"<\/a>
Click to hear poem<\/figcaption><\/figure>\n<\/div>\n\n\n

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.<\/p>\n\n\n\n

Here are instructions on how to implement FancyBox for a <\/a>w<\/a>e<\/a>b<\/a>p<\/a>a<\/a>g<\/a>e<\/a>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

3. Here’s an example of an image linked to display a YouTube Video with FancyBox<\/a>.<\/h3>\n\n\n
\n
\"Video<\/a>
Video of Letters F and A made of laser cut wood<\/figcaption><\/figure>\n<\/div>\n\n\n

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.<\/p>\n\n\n\n

Here are instructions on how to implement FancyBox for a YouTube Video<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n

4. Here’s an example of featuring a PDF with FancyBox<\/a><\/h3>\n\n\n
\n
\"\"<\/a>
Click to view PDF<\/figcaption><\/figure>\n<\/div>\n\n\n

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).<\/p>\n\n\n\n

Note the PDF caption to instruct the viewer to click on the image to view the entire PDF.<\/p>\n\n\n\n

Here are instructions on how to implement FancyBox for a PDF image<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-127","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/freestyleacademy.rocks\/~LeoF\/wp-json\/wp\/v2\/pages\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freestyleacademy.rocks\/~LeoF\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freestyleacademy.rocks\/~LeoF\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freestyleacademy.rocks\/~LeoF\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freestyleacademy.rocks\/~LeoF\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":67,"href":"https:\/\/freestyleacademy.rocks\/~LeoF\/wp-json\/wp\/v2\/pages\/127\/revisions"}],"predecessor-version":[{"id":783,"href":"https:\/\/freestyleacademy.rocks\/~LeoF\/wp-json\/wp\/v2\/pages\/127\/revisions\/783"}],"wp:attachment":[{"href":"https:\/\/freestyleacademy.rocks\/~LeoF\/wp-json\/wp\/v2\/media?parent=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}