FancyViewer is a stack with a bit of an interesting development history! It was originally built by Aaron Marquez of StackManiac using the FancyBox 1.0 plugin. When StackManiac was acquired by Stacks4Stacks in August 2015, it was found the original FancyBox code no longer worked in Stacks 3 / jQuery 2 and needed major updates. Unfortunately by this point, FancyBox had moved on several versions and become a commercial (paid) lightbox plugin. The licensing cost was found to be too prohibitive to permit us to continue using FancyBox in the FancyViewer stack. So we instead decided to cannibalise a slightly older version of TopBox, which continues to be absolutely perfect for creating basic lightbox and modal window effects.

TopBox remains our flagship lightbox plugin for Stacks. It received a major update in 2015 with support for loads of new features and different content types. Quite simply, TopBox is one of the best lightbox solutions for RapidWeaver. However the truth of the matter is that TopBox may be overkill for simple lightbox and modal window effects. Especially in instances where you do not need next / previous navigation buttons or support for content types like audio or video. Sometimes you might just want to display a basic informational modal window (like terms and conditions) or have a couple of static images open inside a simple lightbox. And this is exactly what FancyViewer really excels at doing.

Don't think that FancyViewer is just an old stack given a new name! FancyViewer 2.0 is fully responsive and works reliably across all major web browsers and devices. FancyViewer is compatible with both Stacks 2 and Stacks 3. Minimal source code means that your pages will continue to load fast. The close button is retina display compatible (unlike the PNG and GIF icons that many other lightbox effects use). FancyBox can be triggered (opened) using content placed in the trigger region or custom links / buttons on your webpage.

FancyViewer 2.0 is a replacement to the original FancyViewr stack.

Examples

The gallery below was created by using 2 AdaptiveGrid stacks and placing FancyViewer stacks into each grid 'cell'. The photographs were stored in an online location. Clicking an image reveals it full size within FancyViewer. We used the default FancyViewer settings in this example.
 
FancyViewer stack test
FancyViewer stack test
FancyViewer stack test
FancyViewer stack test
FancyViewer stack test
FancyViewer stack test
FancyViewer stack test
FancyViewer stack test
 
This next example uses a Button stack placed on the page, given a URL of #, and a class attribute with a value of fancyviewer9 (which is the ID of this particular FancyViewer stack). This provides us with an efficient method towards triggering the FancyViewer stack from anywhere on the page. This example FancyViewer stack contains a Left Floating Image stack, with a section of rich text content, an external link and a custom close link. On smaller screens or devices, the content in FancyViewer will safely scroll vertically.
 
 

Setup

To get FancyViewer working in your website, follow these instructions...
  1. Once installed, drag and drop a copy of FancyViewer into a Stacks page type, in RapidWeaver
  2. In the stack settings on the right (shown in Stacks edit mode) be sure that each and every FancyViewer has a unique number (this is to prevent multiple FancyViewer stacks on the same page conflicting with each other)
  3. Remaining in edit mode, drag and drop content into the FancyViewer Trigger Region, such as an image, a button, some HTML code or a block of text
  4. Then drag and drop content into the FancyViewer Content Region, like images or text
  5. Customise any of the other FancyViewer style or colour settings shown. For example, you can apply padding, rounded corners, change the close button style or apply a window shade
  6. Preview your webpage. Click on the trigger region to make sure the FancyViewer opens. Publish your website when done

Supported content types

The emphasis of FancyViewer is on simplicity. We support all basic / static content types like plain text, styled text, HTML code, markdown and static images. More complex and / or dynamic content types like audio, video, AJAX and iFrames are much less likely to work (we do not officially support these in FancyViewer); and you'll probably find TopBox is better-geared towards handling these.

Triggering FancyViewer with custom links and buttons

In RapidWeaver edit mode, the unique ID for your FancyViewer stack is shown at the bottom of the stack. It will be shown as something like fancyviewer1. When creating custom links or buttons in your webpage, give the said element a class attribute and a value equal to the unique ID of your FancyViewer stack. For example:

<a href="#" class="fancyviewer1">Click me!</a>

The link or button should then open the corresponding FancyViewer stack when clicked. If you were adding links in RapidWeaver via the link dialogue window, then your link to trigger a FancyViewer stack might look something like this:

FancyViewer stack custom trigger link setup

There are no limits imposed on the number of custom links you create for FancyViewer stacks. If you're not using the FancyViewer trigger region, this can be safely left empty.

Triggering FancyViewer stacks via a URL query string

You can trigger a FancyViewer stack to open when the page loads, by using a custom query string in the page URL. This is typically done by appending a question mark and the FancyViewer ID onto a page link like this:

http://example.com/?fancyviewer10

This link can be used in any pages or from locations like emails, Twitter, Facebook etc. However it should be noted that the FancyViewer will only fully display, once the entire page is loaded. This may make this method less suitable for slower-loading pages.

Closing FancyViewer with custom links and buttons

The process is almost identical to that documented above, for triggering FancyViewer with custom links or buttons. The only change is that the custom class name to use is always fancyviewerCloseTrigger.