Combining Swinxyzoom plugin with Fancybox in WordPress

1 Views

What I’m trying to achieve is to activate the Swinxyzoom WordPress plugin (which uses jQuery to allow the user to zoom into a part of an image) within a Fancybox lightbox on a responsive website.

After getting in contact with the Swinxyzoom plugin author, he sugested the following:

Read More

To integrate SwinxyZoom with a lightbox you will need to create some
custom code which is triggered when the lightbox has finished
displaying its content, eg. in fancybox this event is ‘onComplete’.

At this point you need to wrap the content image of the lightbox with
an anchor tag targeting the large full image and then initialise
swinxyzoom as $(element).swinxyzoom();

Any help would be much appreciated!

The test page of the site on which I’ve used both of the above plugins individually is http://www.mcemcourses.org/radiology-test

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Based on the information you have provided, this code should do the trick :

    <script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function ($) {
    jQuery('a.myfancybox').fancybox({
        'zoomSpeedIn': 500,
        'zoomSpeedOut': 500,
        'overlayShow': true,
        'overlayOpacity': 0.3,
        'onComplete': function () {
            $("#fancybox-img").wrap("<a class='myZoom' href='http://www.mcemcourses.org/wp-content/uploads/9-Orbital-floor-.jpg' />");
            $("a.myZoom").swinxyzoom({
                mode: 'lens' // or your preferred mode
            });
        }
    });
});
</script>

    Notice that you will need 3 images :

    • Your thumbnail, the one you click to open fancybox.
    • A middle size image, the one you target in the href of the link that opens fancybox, and actually, the image opened in fancybox.
    • A big size image, the one you set in the href of the wrapping anchor inside the onComplete callback.

    Also notice that the selector #fancybox-img refers to the opened image in fancybox for v1.3.x only.

    NOTE : Most popular fancybox WordPress plugins use v1.3.4.

    See JSFIDDLE