ginou/scripts/exposition.js

jQuery(document).ready(function($)
{
    $.getJSON("data.json", function(data)
    {
        var pageSize = 14;
        var paintingList = [];

        canDisplay = true;
        for (i of data)
        {
            if (i.expo == "yes")
            {
                paintingList.push(i.number);
                if (paintingList.length % (pageSize + 1) == 0)
                    canDisplay = false;
                
                paintingHtml = '<div class="gallery-item ';
                if (canDisplay)
                {
                    paintingHtml += 'active"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
                    paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
                }
                else
                {
                    paintingHtml += 'inactive"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
                    paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
                }
                paintingHtml += '<span class="item-title">' + i.title;
                if (i.year != '—')
                    paintingHtml += ' (' + i.year + ')';
                paintingHtml += '</span></div>';
                $(".gallery").append(paintingHtml);
            }
        }

        var targetPage = 0;
        urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('page') != "")
            targetPage = urlParams.get('page');

        function getPageRange()
        {
            if (window.innerWidth >= 600)
                return null;
            else if (window.innerWidth < 600 && window.innerWidth > 450)
                return 4;
            else
                return 1;
        }
        
        var currentPage = 0;
        var previousArray = []
        var options = 
        {
            dataSource: paintingList,
            pageSize: pageSize,
            pageRange: getPageRange(),
            className: 'paginationjs-theme-ginou',
            hideWhenLessThanOnePage: true,
            callback: function (response, pagination)
            {
                currentPage = pagination.pageNumber;
                window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);

                if (previousArray.length > 0)
                {
                    for (i of previousArray)
                        $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
                }

                previousArray = response;

                $.each(response, function(index, item)
                {
                    $('[data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
                    $('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
                });
            }
        };

        $('#pagination').pagination(options);

        if (targetPage > 0)
            $("#pagination").pagination('go', targetPage);


        $('[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)
                {
                    var idx = item.opts.fancyboxIndex - 1; // painting number
                    if (item.opts.fancyboxIndex >= 1000)
                        idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
    
                    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();
                },

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

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

                afterClose : function(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)
                    window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
                }

            });
    });
});