CODEWITHSUNDEEP
jqueryjquery-plugins
Eugene Tang
Eugene Tang

Reputation: 83

jquery Gallery multiple filter

hi guys i have downloaded this code from the weblink below which it lets me filter the gallery page that i have. But they do not have much documentation on the website regarding this on multiple filtering function? eg lets say i have 2 options Country and Type i can select US and Cars so it will show filtered by us and cars.

Demo Link

This is the link of the coe that i have used.

can anyone help me on this ?

<div class="filters demo1">
    <div class="filter">
        <a href="#" rel="city">City</a>
        <a href="#" rel="cars">Cars</a>
        <a href="#" rel="other">Other</a>
        <a href="#" rel="all">All</a>
    </div>

    This is the part for filter option 2

    <div class="filter2">
        <a href="#" rel="Malaysia">Malaysia</a>
        <a href="#" rel="India">India</a>
        <a href="#" rel="US">US</a>
        <a href="#" rel="ALL">All</a>
    </div>

    <div class="filter3">
        <a href="#" rel="East">East</a>
        <a href="#" rel="West">West</a>
        <a href="#" rel="North">North</a>
        <a href="#" rel="ALL">All</a>
    </div>

    <div class="container">
        <ul>
            <li class="cars">
                <a href="#"><img src="assets/img1.jpg" alt="" /></a>
            </li>
            <li class="city">
                <a href="#"><img src="assets/img6.jpg" alt="" /></a>
            </li>
            <li class="cars">
                <a href="#"><img src="assets/img5.jpg" alt="" /></a>
            </li>
            <li class="city">
                <a href="#"><img src="assets/img7.jpg" alt="" /></a>
            </li>
            <li class="cars">
                <a href="#"><img src="assets/img3.jpg" alt="" /></a>
            </li>
            <li class="cars">
                <a href="#"><img src="assets/img4.jpg" alt="" /></a>
            </li>
            <li class="city">
                <a href="#"><img src="assets/img8.jpg" alt="" /></a>
            </li>
            <li class="cars">
                <a href="#"><img src="assets/img2.jpg" alt="" /></a>
            </li>
            <li class="other">
                <a href="#"><img src="assets/img10.jpg" alt="" /></a>
            </li>
            <li class="city">
                <a href="#"><img src="assets/img12.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 615

Answers (1)

rajesh kakawat
rajesh kakawat

Reputation: 10906

try this one

HTML CODE 

 <div class="filters demo1">
        <div class="filter">
            <a href="#" rel="city">City</a>
            <a href="#" rel="cars">Cars</a>
            <a href="#" rel="other">Other</a>
            <a href="#" rel="all">All</a>
        </div>
        <div class="container">
            <ul>
                <li class="cars">
                    <a href="#"><img src="assets/img1.jpg" alt="" /></a>
                </li>
                <li class="city">
                    <a href="#"><img src="assets/img6.jpg" alt="" /></a>
                </li>
                <li class="cars">
                    <a href="#"><img src="assets/img5.jpg" alt="" /></a>
                </li>
                <li class="city">
                    <a href="#"><img src="assets/img7.jpg" alt="" /></a>
                </li>
                <li class="cars">
                    <a href="#"><img src="assets/img3.jpg" alt="" /></a>
                </li>
                <li class="cars">
                    <a href="#"><img src="assets/img4.jpg" alt="" /></a>
                </li>
                <li class="city">
                    <a href="#"><img src="assets/img8.jpg" alt="" /></a>
                </li>
                <li class="cars">
                    <a href="#"><img src="assets/img2.jpg" alt="" /></a>
                </li>
                <li class="other">
                    <a href="#"><img src="assets/img10.jpg" alt="" /></a>
                </li>
                <li class="city">
                    <a href="#"><img src="assets/img12.jpg" alt="" /></a>
                </li>
            </ul>
        </div>
    </div>

JAVASCRIPT CODE 

 $(function(){
     $('.filters.demo1').filters();
 });

Note: Don't forget to include jQuery and Filter plugin js file. Put jquery.js on top of filter plugin file

Upvotes: 1

Related Questions