November 26, 2014

Weebly Tricks #83 - Filtering Images using jQuery Isotope

Posted by Domingo Tambasacan at 11/26/2014

jQuery Isotope Filtering Images - Weebly


So here is an Isotope from Mettafizy to filter your images according to the classes you set. The effect is smooth and the step is basically very easy.




Ok, before we start, I would like to clear that using this isotope for commercial purposes needs a licence from Mettafizy but unfortunately I can't open the site for his Isotope so I check the codes at 9bitstudios.com. In short, you can use this on your own site but not for your clients (commercial). I made this tutorial not to distribute the code but giving you a clear step on how to insert it on your template. Please visit the code source.

And, our main site should be viewed on a computer, not on your mobile.


FILES NEEDED
How to use these files? Click Here!


FOOTER CODE
Where to place these codes? Click Here!


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/jquery.isotope.js" type="text/javascript"></script>
<script type="text/javascript">

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });
});

</script>

Notes:
Red text - Please change with your site address.


HEADER CODE
Where to place these codes? Click Here!


<link href="http://mwtdatabase.weebly.com/files/theme/jqis.css" rel="stylesheet" type="text/css" />

Notes:
Red text - Again, change it with your site address.


BODY CODE
Where to place these codes? Click Here!


<div class="portfolioFilter">

    <a href="#" data-filter="*" class="current">All Classes</a>
    <a href="#" data-filter=".assassins">Assasins</a>
    <a href="#" data-filter=".mages">Mages</a>
    <a href="#" data-filter=".warriors">Warriors</a>
    <a href="#" data-filter=".priests">Priests</a>

</div>

<div class="portfolioContainer">

    <div class="mages">
        <img src="http://4.bp.blogspot.com/-kPPOjivUlsI/VHQHk7987MI/AAAAAAAABIE/mqn3yOeDcwY/s1600/015.png" alt="image">
    </div>

    <div class="warriors">
        <img src="http://3.bp.blogspot.com/-q-Ppp74vDG0/VHL4lDJF5tI/AAAAAAAABHE/qMe4MFT4dYQ/s1600/293.png" alt="image">
    </div>  

    <div class="priests">
        <img src="http://1.bp.blogspot.com/-XsrO8uN9M4M/VHL3uK7N44I/AAAAAAAABG8/O51_cXQfXBg/s1600/020.png" alt="image">
    </div>
   
    <div class="assassins priests mages">
        <img src="http://4.bp.blogspot.com/--hUo16ex6Oc/VHQDPLC6JBI/AAAAAAAABH4/TUkF5hFdxCo/s1600/309.png" alt="image">
    </div>

    <div class="warriors">
        <img src="http://1.bp.blogspot.com/-55bybgg-9C8/VHQIhRl1X6I/AAAAAAAABIM/Fc0GF4EkiIg/s1600/005.png" alt="image">
    </div>

    <div class="priests">
        <img src="http://2.bp.blogspot.com/-bKQoE561l48/VHL8a_qPJKI/AAAAAAAABHY/QxjyYUbIKBo/s1600/251.png" alt="image">
    </div>

    <div class="assassins">
        <img src="http://2.bp.blogspot.com/-86qvJxZlhdY/VHQLOG7yCGI/AAAAAAAABIk/IeYarBnVGdw/s1600/010.png" alt="image">
    </div>  
   
    <div class="mages">
        <img src="http://3.bp.blogspot.com/-NuBUavcI1Rg/VHQJgQK7uwI/AAAAAAAABIY/Q8X2kWHpmew/s1600/298.png" alt="image">
    </div>
   
</div>

The HTML is divided into two, the first part are your tabs and the classes you set. The classes should be the same as your tab's title to be appropriate. The second part will be your images. So here are the legends:

Red text - Your classes.
Yellow text - Your tabs' titles.
Blue text - The class of the image making it filterable.
Green text - The link source of your images.

Remember to use images with the same dimension for a better effect. The fourth image on the code above uses three classes which means he can be an assassin, a priest or a mage. Don't forget to edit the "image" for the image description on SEO.


CONCLUSION





Wherever you got a code, there is still a need to adjust depending on your template. Different sites has different widths and heights. The demo might work perfectly but when you tried to insert on your site, the output comes different. For this situation, you need to learn atleast the most basic of CSS.

If you don't know the 10 Capsulated Tips then better read and learn from it.


Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

2 comments:

  1. Hey! I was wondering if there was a way to select more than one filter at a time. Say look for an image that was mage and warrior (without creating a new button) just selecting two of the options

    ReplyDelete
  2. How would I change to 5 columns as opposed to the 4%

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top