Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

FancyImageGallery widget: Implement the client-side functionality

After you FancyImageGallery widget: Implement the markup, you must add the code prevents conflicts between the different jQuery versions and that encapsulates the stylesheet of the image gallery.

To do this, in the FancyImageGallery.js file add the following code:

jq14 = jQuery.noConflict(true);
(function ($) {
    $(document).ready(function () {
        console.log("jQuery ready");
        $("a.grouped_elements").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 600,
            'speedOut': 200,
            'overlayShow': false
        });
    });
}(jq14));

In the code above, the jQuery.noConflict() method prevents conflicts when loading two versions of the jQuery library. The jq14 variable stores the jQuery version 1.4.4, which is passed to a functional scope. Inside that scope Sitefinity’s version of jQuery is overridden and the 1.4.4 version of jQuery can be accessed via the $ sign. Any code written inside that functional scope accesses the 1.4.4 version of jQuery when using the $ sign.

To implement the stylesheet, in the FancyImageGallery.css add the following code:

.thumbImg{
    height: 150px;
}

As a result, the style is applied to the images in the gallery.

Go ahead and FancyImageGallery widget: Implement the server-side functionality of the new user widget.

Back To Top

Next: FancyImageGallery widget: Implement the server-side functionality