Use CORE plugin to enable the "Next" and "Previous" buttons for Magnific Popup in the "Product details" page

Download and then install our CORE plugin.

Go to its settings page, click on the Plugin Settings > Manage Inline Scripts

Put following script to the Scripts field


$(document).ready(function () {
    var $thumbImages = $('.gallery .picture-thumbs .thumb-item img');
    if ($thumbImages.length > 0) {
        $thumbImages.each(function (index, item) {
            var $item = $(item);
            $item.wrap('<a class="thumb-item-link" href="' + $item.data('fullsize') + '" title="' + $item.attr('title') + '"></a>');
        });
    }

    var magnificSettings = $.magnificPopup.defaults,
        tPrev = magnificSettings.gallery.tPrev,
        tNext = magnificSettings.gallery.tNext,
        tCounter = magnificSettings.gallery.tCounter,
        tClose = magnificSettings.tClose,
        tLoading = magnificSettings.tLoading;
    $('.thumb-item-link').magnificPopup({
        type: 'image',
        removalDelay: 300,
        gallery: {
            enabled: true,
            tPrev: tPrev,
            tNext: tNext,
            tCounter: tCounter
        },
        tClose: tClose,
        tLoading: tLoading
    });
});

In the Widget Zones field, select productdetails_bottom.

Click on the Save and Continue Edit button.

It will look like following image

CORE plugin - Inline scripts to enable the "Next" and "Previous" buttons for Magnific Popup in the "Product details" page

Leave your comment
Follow us