Question

我正在尝试将mixitup添加到jquery collagePlus，但是当我点击过滤器时会出现问题它的工作有误。你可以看到链接

任何人都可以帮助我。怎么解决？感谢

Answer 1

我能够为最近的项目做到这一点。我拿了当前的演示并修改了它。这是我的代码：

<script type="text/javascript">
// All images need to be loaded for this plugin to work so
// we end up waiting for the whole window to load in this example
$(window).load(function () {
    $(document).ready(function(){
        var orig_images = $('#portfolio').html();
        collage();

        $('.filters a').on('click', function(){
            $('#portfolio').html(orig_images);
            var filterClass = $(this).data('filter');
            $('#portfolio img:not(.' + filterClass + ')').remove();
            $('#portfolio img').css("opacity", 0);
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(collage, 200);
            return false;
        });
    });
});

// Here we apply the actual CollagePlus plugin
function collage() {
    $('#portfolio').collagePlus(
        {
            'fadeSpeed'     : 2000,
        }
    );
};

// This is just for the case that the browser window is resized
var resizeTimer = null;
$(window).bind('resize', function() {
    $('#portfolio img').css("opacity", 0);
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(collage, 200);
});
</script>

然后这是我的HTML：

<p align="center" class="filters">
    <a href="#" data-filter="wide">Wide</a>
    <a href="#" data-filter="tall">Tall</a>
</p>
<div id="portfolio"><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/200x300" width="200" height="300" class="tall" /><img src="http://placehold.it/300x200" width="300" height="200" class="wide" /></div>

这基本上是在页面加载时，在#portfolio div中保存原始HTML的副本。为每个图像分配类，用作过滤器。添加了一些过滤器链接。单击过滤器链接时，它会将#portfolio div的原始HTML恢复为#portfolio div。然后删除所有与点击过滤器不匹配的图像（隐藏图像不起作用）。然后，在剩下的图像上重新启动collagePlus功能。

将过滤器添加到jquery collagePlus插件

1 个答案: