Question

我有一个问题，我的照片库仅在页面刷新时加载。我相信修复很简单，除了我没有运气..我想我需要在加载.append（）函数后调用一个函数。

照片库非常复杂。它有4个组成部分：

使用divs附加来自三个不同xml文件的图像。
图片div给出了css，并从镶嵌jquery插件中叠加。
图像按同位素jquery插件分组排列，以显示和隐藏某些照片。
图片在点击时使用fancybox jquery插件。

首先，我将三个不同xml供稿中加载的图像附加到页面上。此代码工作正常，即使图像未显示在页面上，也会附加图像（使用检查它们的div和大小）。

追加代码

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url:'/gallery/apartment/PhotoGallery.xml',  // Add your url to your photo gallery xml feed
        dataType: 'xml',
        success: xmlParser1
    });

    // don't touch anything under me
    function xmlParser1(xml) {
        $(xml).find("img").each(function () {                       
        $(".apartment-images").append('<div class="mosaic-block third fade"><a href="/gallery/apartment/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/apartment/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
        });
    // don't touch anything above me
    }

$.ajax({
        type: "GET",
        url:'/gallery/views/PhotoGallery.xml',  // Add your url to your photo gallery xml feed
        dataType: 'xml',
        success: xmlParser2
    });

    // don't touch anything under me
    function xmlParser2(xml) {
        $(xml).find("img").each(function () {                       
        $(".the-views-images").append('<div class="mosaic-block third fade"><a href="/gallery/views/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/views/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
        });
    // don't touch anything above me
    }

    $.ajax({
        type: "GET",
        url:'/gallery/moana/PhotoGallery.xml',  // Add your url to your photo gallery xml feed
        dataType: 'xml',
        success: xmlParser3
    });

    // don't touch anything under me
    function xmlParser3(xml) {
        $(xml).find("img").each(function () {                       
        $(".moana-images").append('<div class="mosaic-block third fade"><a href="/gallery/moana/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/moana/' + $(this).attr('src') + '?Action=thumbnail&Width=500&Height=375&algorithm=fill_proportional" alt="' + $(this).attr('alt') + '" /></div></div></div>');
        });
    // don't touch anything above me
    }
});

然后main.js文件中有三段代码（我认为这些代码引用了js文件中的函数），这些代码为jQuery提供了图像功能：

MAIN JS： http://moanabeach.businesscatalyst.com/js/main.js

镶嵌功能

mosaic : function(){
                    $('.fade').mosaic();
                }, // mosaic

同位素功能

isotype: function() {

                    $(window).load(function(){
                            if($('#thumb-gallery').size() === 0){return;}

            var $container = $('#thumb-gallery');
            $container.isotope({
                masonry: {
                    columnWidth: 1 //was 26
                },
                sortBy: 'number',
                getSortData: {
                    number: function($elem) {
                        var number = $elem.hasClass('element') ? $elem.find('.number').text() : $elem.attr('data-number');
                        return parseInt(number, 10);
                    },
                    alphabetical: function($elem) {
                        var name = $elem.find('.name'),
                            itemText = name.length ? name : $elem;
                        return itemText.text();
                    }
                }
            });
            var $optionSets = $('.meta.option-set'),
                $optionLinks = $optionSets.find('a');

                    $optionLinks.click(function() {
                        var $this = $(this);
                        // don't proceed if already selected
                        if ($this.hasClass('selected')) {
                            return false;
                        }
                        var $optionSet = $this.parents('.option-set');
                        $optionSet.find('.selected').removeClass('selected');
                        $this.addClass('selected');
                        // make option object dynamically, i.e. { filter: '.my-filter-class' }
                        var options = {},
                            key = $optionSet.attr('data-option-key'),
                            value = $this.attr('data-option-value');
                        // parse 'false' as false boolean
                        value = value === 'false' ? false : value;
                        options[key] = value;
                        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
                            // changes in layout modes need extra logic
                            changeLayoutMode($this, options)
                        } else {
                            // otherwise, apply new options
                            $container.isotope(options);
                        }
                        return false;
                    });

                    }); // window.load()


        } // isotope()

Fancybox功能

fancyBox : function(){
$('.fancybox').fancybox();
                }

以下各项参考函数：

可在此处查看实时图库，该图片仅在首次加载和页面刷新时正确加载：

http://moanabeach.businesscatalyst.com/gallery

点击网站上的其他链接或使用浏览器中的后退按钮后无法加载。

似乎正在发生的事情是在图像之前加载了＃thumb-gallery高度，因此高度太小而且不显示图像。如果单击左侧菜单，则刷新高度并且图库正常工作。更改的两个值是＃thumb-image height：

**PAGE LOAD:**  
<div class="four-fifths right last thumb-gallery super-list variable-sizes isotope" id="thumb-gallery" style="position: relative; overflow: hidden; height: 98px;">


**PAGE REFRESH:**  
<div class="four-fifths right last thumb-gallery super-list variable-sizes isotope" id="thumb-gallery" style="position: relative; overflow: hidden; height: 1359px;">

注意：高度取决于浏览器窗口。

此外，.isotope-item -webkit-transform：translate3d（0px，0px，0px）;除非在页面刷新，否则在每个图像组上都无法正确加载。在正常页面加载时，所有图像组都放在彼此的顶部，在页面刷新时，它们具有-webkit-transform：translate3d（0px 123px 0px），将它们垂直间隔开。

我认为这一切都归结为在追加函数结束时调用的镶嵌，同位素或fancybox函数之一（如果不是所有函数。）。这样，图像将在其他任何事情发生之前加载并附加。但是，我不知道该怎么做。

如果您需要更多信息，我会及时回复。

实时页面：moanabeach.businesscatalyst.com/gallery

提前谢谢你。

请注意：我没有创建任何jquery文件（主要，同位素，马赛克和fancybox），所以我不知道main.js和其他文件之间的连接。他们带来了模板。我修改的唯一代码是附加代码。

尝试：

使用document.ready和window.load以及各种功能。
javascript代码和文件的位置

jQuery照片库仅在刷新时加载

追加代码

镶嵌功能

同位素功能

Fancybox功能

以下各项参考函数：

尝试：

0 个答案: