FancyBox is a jQuery plugin which is used to open text, photos, etc as a modal dialog. The post explains how to integrate FancyBox with an ASP.NET MVC application.

Bundling

FancyBox is available as a Nuget package. The Nuget package has a stylesheet which it puts in the Content folder, associated images and sprites which it puts in the Content/FancyBox folder, and javascript which it puts in the Scripts folder.

To use FancyBox, include the styles as well as the scripts as follows:

The script can be bundled easily with the jQuery and bootstrap. This will reduce the number of round-trips to the server. However, the fancybox CSS should be bundled separately. This is because fancybox has associated images. There are some transforms which can be used to bundle the fancybox CSS along with other CSS. But, these techniques do not have adequate guidance from Microsoft. For more information on bundling FancyBox styles, please check theĀ StackOverflow article.

Displaying text using FancyBox

FancyBox can be used to display text as modal dialog. The following HTML code snippet explains how to do this.

The div with fancy-text class be fancy-boxed. When the user clicks on the div, the div with ID moreInfo is shown as modal dialog. Clicking on the content will close the modal dialog. The javascript for fancy-boxing the div is shown below.

There are problems in iOS 8 when a div is made clickable. The iOS 8 browsers do not show the fancybox. To avoid the problem, use the onclick event handler as shown in the HTML code snippet to indicate that the div is clickable.

Slideshow of images using FancyBox

A set of images can be shown as a slideshow using FancyBox. The hyperlink should be marked with a rel attribute to denote that it is part of a gallery.

The above gallery can be fancy-boxed with the following Javascript code.

The cyclic attribute ensures that the gallery loops back to the beginning after the last photo is displayed. Some more adjustments need to be made to ensure that the navigation buttons stay visible. The default behavior of FancyBox is to allow the navigation button to become visible on hover. This does not work well on mobile devices. So, the navigation buttons should be made visible always.

There are two callback methods, onUpdate and afterClose, that needs to be handled to make the navigation buttons visible. onUpdate is fired when the window needs to be redrawn. afterClose is fired when the modal window is closed.

The .fancybox-nav class should be marked visible when the FancyBox is shown. The class should be marked hidden when the window is closed.

FancyBox integration with ASP.NET MVC application
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *