CODEWITHSUNDEEP
jqueryfiltering
Martian.titan
Martian.titan

Reputation: 466

add filter to jquery collagePlus plugin

I am trying to add mixitup to jquery collagePlus but there is an issue when i click on filters it's working wrong. there is link you can see it

Can any one help me please. how to fix it ? thanks

Upvotes: 0

Views: 260

Answers (1)

sccr410
sccr410

Reputation: 151

I was able to do this for a recent project. I took the current demo and modified it. Here is my code:

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

Then here is my 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>

What this is basically doing is on page load, save a copy of the original HTML in the #portfolio div. Assign classes to every image, used as the filter. Added some links to filter with. When a filter link is clicked, it restores the original HTML for the #portfolio div into the #portfolio div. It then removes all images that do not match the clicked filter (hiding the images did not work). Then, re-initiate the collagePlus function on the images that are left.

Upvotes: 2

Related Questions