Auto Select Filters

Auto Select Filters - Pada kesempatan kali ini saya akan berbagi tutorial yang saya dapatkan dari blog
Twisted Shape.

Demo
click to view

Letakkan kode CSS dibawah diatas kode </style>

#container {
    border: 1px solid;
    padding: 3px;
}

.item {
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}

.red {
    background: #ff5656;
}

.blue {
    background: #7474f2;
}

.green {
    background: #4caf4c;
}

.yellow {
    background: #efef70;
}

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}

Jika Sudah Masukan jQuery Dibawah ini Diatas Kode </body>

$(function() {

    var $container = $('#container'),
        $select = $('#filters select');

    $container.isotope({
        itemSelector: '.item'
    });

    $select.change(function() {
        var filters = $(this).val();
;
        $container.isotope({
            filter: filters
        });
    });

});

Kemudian Masukan HTML Dibawah ini Pada Postingan Dengan Mode HTML bukan Compose

<div id="filters">
    
    <select>
        <option value="*">All</option>
        <option value=".red">Red</option>
        <option value=".green">Green</option>
        <option value=".blue">Blue</option>
        <option value=".yellow">Yellow</option>        
    </select>    
</div>

<div id="container">
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
</div>

Mudah bukan, semoga bermanfaat.

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post