ginou/scripts/fancybox.js

function fancyboxInit(data, explorer)
{
    $('[data-fancybox="exposition"]').fancybox(
    {
        selector: '.gallery a',
        infobar: false,
        toolbar: true,
        smallBtn: false,
        buttons: ["arrowLeft", "arrowRight", "close"],
        arrows: false,
        transitionEffect: "fade",
        baseClass: 'fancybox-custom-layout',
        mobile: {
            preventCaptionOverlap: true,
        },

        caption: function(instance, item) { return caption(item, data); },
        beforeShow : function(instance, current) { return beforeShow(instance, current); },
        afterClose : function(instance) { return afterClose(instance); }
    });

    $('[data-fancybox="exposition-list"]').fancybox(
    {
        selector: 'a.list-preview',
        infobar: false,
        toolbar: true,
        smallBtn: false,
        buttons: ["arrowLeft", "arrowRight", "close"],
        arrows: false,
        transitionEffect: "fade",
        baseClass: 'fancybox-custom-layout',
        mobile: {
            preventCaptionOverlap: true,
        },

        caption: function(instance, item) { return caption(item, data); },
        beforeShow : function(instance, current) { return beforeShow(instance, current); },
        afterClose : function(instance) { return afterClose(instance); }
    });

    function caption(item, data)
    {
        var idx = 0; // search the index of the painting of filtered data
        for (i = 0; i < data.length; i++)
        {
            if (data[i].number == item.opts.fancyboxIndex)
                idx = i;
        }
                
        function generateCartel()
        {
            cartel = '<div id="info"><span class="info">';
            cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
            cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
            if (data[idx].month != '—')
                cartel += data[idx].month + '&nbsp;';
            if (data[idx].year != '—')
                cartel += data[idx].year;
            cartel += '&nbsp;</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
            if (data[idx].dimension != '—')
                cartel += ' (' + data[idx].dimension + ')';
            cartel += '</span>';
            if (data[idx].comment != '—')
                cartel += '<span class="comment">' + data[idx].comment + '</span>';
            cartel += '</div>';

            return cartel;
        }
    
        return generateCartel();
    }

    function beforeShow(instance, current)
    {
        if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
            $('#pagination').pagination('next');

        if (current.opts.fancyboxIndex < previousArray[0])
            $('#pagination').pagination('previous');
    }

    function afterClose(instance)
    {
        // after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
        // (apparently fancybox changes back to the original url it had when starting)
        if (explorer)
        {
            urlParams = new URLSearchParams(window.location.search)
            trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
            window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
        }
        else
            window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
    }

}