FancyBox integration with ASP.NET MVC application

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

Bundling

The plugin is available as a Nuget package. The Nuget package has a stylesheet, images and sprites in the Content folder and javascript in the Scripts folder.

Include the styles and scripts.

<link rel="stylesheet"
href="/content/jquery.fancybox.css"
type="text/css"
media="screen" />

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

<script type="text/javascript"
src="/scripts/jquery.fancybox.pack.js"></script>

Bundle the script along with jQuery and bootstrap. Bundling will reduce the number of round-trips to the server. However, bundling the CSS along with other CSS is difficult. This is because there are some associated images. For more information on bundling, please check the StackOverflow article.

Displaying text

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

<div class="fancy-text" href="#moreInfo" onclick="void (0);">
Some info
</div>

<div id="moreInfo" style="display: none">
    My awesome text
</div>

The div with fancy-text class be fancy-boxed. When the user clicks on the text, the moreInfo div is shown as modal dialog. Clicking outside the modal will close the modal dialog. The javascript to initialise the plugin is trivial.

$(document).ready(function () {
    $(".fancy-text").fancybox();
});

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

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

<div>
    <a class="fancy-photo" 
    rel="group" 
    href="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal/165_0.jpg">
        <img src="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal_tb/165_TB_0.jpg" />
    </a>
    <a class="fancy-photo" 
    rel="group" 
    href="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal/165_1.jpg">
        <img src="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal_tb/165_TB_1.jpg" />
    </a>
    <a class="fancy-photo" 
    rel="group" 
    href="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal/165_2.jpg">
        <img src="https://s3-ap-southeast-1.amazonaws.com/mmophotos/hospitals/ncr/165/internal_tb/165_TB_2.jpg" />
    </a>
</div>

And the JavaScript code is:

$(document).ready(function () {
    $(".fancy-photo").fancybox({
        cyclic: true,
        onUpdate: function () {
            $(".fancybox-nav span").css({
                visibility: "visible"
            });
            return;
        },
        afterClose: function () {
            $(".fancybox-nav span").css({
                visibility: "hidden"
            });
            return;
        }
    });
});

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 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. The onUpdate is fired when the window is redrawn. Here, we mark .fancybox-nav as visible.  The afterClose method is fired when the modal window is closed. In this, we mark the visibility to hidden.

Related Posts

Leave a Reply

Your email address will not be published.