0

jquery collagePlus に mixitup を追加しようとしていますが、フィルターをクリックすると問題が発生します。あなたがそれを見ることができるリンクがあります

誰でも私を助けてください。それを修正する方法? ありがとう

4

1 に答える 1

2

最近のプロジェクトでこれを行うことができました。私は現在のデモを取り、それを修正しました。これが私のコードです：

<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>

これが基本的に行っていることは、ページの読み込み時に、元の HTML のコピーを #portfolio div に保存することです。フィルターとして使用されるすべての画像にクラスを割り当てます。フィルタリングするためのリンクをいくつか追加しました。フィルター リンクをクリックすると、#portfolio div の元の HTML が #portfolio div に復元されます。次に、クリックしたフィルターに一致しないすべての画像を削除します (画像を非表示にすることはできませんでした)。次に、残っている画像で collagePlus 機能を再度開始します。

于 2016-01-23T10:04:47.793 に答える