FILTERIZR jquery plugin

Question

i am really stuck on this project 4 on front-end developer tech degree. so basically the assignment is simple : integrate 2 jquery plugins ( 1 lightbox and 1 for search/ filter some pictures ). i found that the lightbox was very simple to implement but the search filter one seems impossible i just need some help what am i doing wrong ?

here is the html code :

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Interactive Photo Gallery</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/lightbox.css">
    <link rel="stylesheet" type="text/css" href="scripts/lightbox2-master/css/lightbox.css">
</head>
<body>
  <div id="content">
    <input type="text" name="search" placeholder="Search..." data-search>
    <div class="filtr-container">
      <div class="filtr-item" data-category="1" data-sort="unu">
        <a href="pics/01.jpg" title="Hay Bales" data-filter="all" data-lightbox="portfolio" data-type="vegan pizza" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."><img src="pics/thumbnails/01.jpg" class="name" alt="I love hay bales. Took this snap on a drive through the countryside past some straw fields."></a>
      </div>
      <div class="filtr-item" data-category="1, 2" data-sort="doi">
        <a href="pics/02.jpg" title="Lake" data-lightbox="portfolio" data-title="The lake was so calm today. We had a great view of the snow on the mountains from here."><img src="pics/thumbnails/02.jpg" alt="The lake was so calm today. We had a great view of the snow on the mountains from here."></a>
      </div>
      <div class="filtr-item" data-category="1, 3" data-sort="trei">
        <a href="pics/03.jpg" title="Canyon" data-lightbox="portfolio" data-title="I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="pics/thumbnails/03.jpg" alt="I hiked to the top of the mountain and got this picture of the canyon and trees below."></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="patru">
        <a href="pics/04.jpg" title="Iceberg" data-lightbox="portfolio" data-title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."><img src="pics/thumbnails/04.jpg" alt="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="cinci">
        <a href="pics/05.jpg" title="Desert" data-lightbox="portfolio" data-title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="pics/thumbnails/05.jpg" alt="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="sase">
        <a href="pics/06.jpg" title="Fall" data-lightbox="portfolio" data-title="Fall is coming, I love when the leaves on the trees start to change color."><img src="pics/thumbnails/06.jpg" alt="Fall is coming, I love when the leaves on the trees start to change color."></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="sapte">
        <a href="pics/07.jpg" title="Plantation" data-lightbox="portfolio" data-title="I drove past this plantation yesterday, everything is so green!"><img src="pics/thumbnails/07.jpg" alt="I drove past this plantation yesterday, everything is so green!"></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="opt">
        <a href="pics/08.jpg" title="Dunes" data-lightbox="portfolio" data-title="My summer vacation to the Oregon Coast. I love the sandy dunes!"><img src="pics/thumbnails/08.jpg" alt="My summer vacation to the Oregon Coast. I love the sandy dunes!"></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="noua">
        <a href="pics/09.jpg" title="Countryside Lane" data-lightbox="portfolio" data-title="We enjoyed a quiet stroll down this countryside lane."><img src="pics/thumbnails/09.jpg" alt="We enjoyed a quiet stroll down this countryside lane."></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="zece">
        <a href="pics/10.jpg" title="Sunset" data-lightbox="portfolio" data-title="Sunset at the coast! The sky turned a lovely shade of orange."><img src="pics/thumbnails/10.jpg" alt="Sunset at the coast! The sky turned a lovely shade of orange."></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="unspe">
        <a href="pics/11.jpg" title="Cave" data-lightbox="portfolio" data-title="I did a tour of a cave today adn the view of the landscape below was breathtaking."><img src="pics/thumbnails/11.jpg" alt="I did a tour of a cave today adn the view of the landscape below was breathtaking."></a>
      </div>
      <div class="filtr-item" data-category="1" data-sort="doispe">
        <a href="pics/12.jpg" title="Bluebells" data-lightbox="portfolio" data-title="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."><img src="pics/thumbnails/12.jpg" alt="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."></a>
      </div>
    </div>
  </div>
    <script>
    var filterizd = $('.filtr-container').filterizr({
   //options object
});
    </script>
    <script type="text/javscript" src="scripts/main.js"></script>
    <script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="scripts/lightbox.js"></script>
    <script type="text/javascript" src="scripts/jquery.filterizr.min.js"></script>
</body>
</html>

the jquery plugin that i am trying to implement can be found here http://yiotis.net/filterizr/

Answer 1 · 2017-02-25T07:44:56Z

February 25, 2017 7:44am

In addition to Konrad's answer.

The problem is with the jQuery version.it seems that this plugin is not compatible with 3.0 an higher. Just change the jquery version to something later than 3.0 and it should run fine. I hope this helps.

Answer 2 · 2017-02-25T07:19:02Z

February 25, 2017 7:19am

When you using multiple scripts on your website, you have to make sure that they're linked in corect order. In your code you're trying initialize filterizr, before even jQuery is loaded. Every time you using javascript plugins on your sites make sure that your own js code is loaded at the very end of your page, you could also use script tag defer attribute so js would not block rendering of your page while scripts are being downloaded, but this is optional.

Change the order of your scripts to something like that:

<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.filterizr.min.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
<script type="text/javscript" src="scripts/main.js"></script>
<script>
var filterizd = $('.filtr-container').filterizr({
   //options object
});
</script>

BTW. nice filter plugin

Answer 3 · 2017-02-27T18:41:47Z

February 27, 2017 6:41pm

Hi Taran, I have looked on your code. At first you have some bug in your code.

Double quotes typo near href="photos/09.jpg"
Delete ul and li's, this is very unsemantic to put div right inside your ul element.

<ul>
<div><li>MEGA BAD</li></div>
</ul>
<ul>
<li><div>GOOD</div></li>
</ul>

You're pointing to empty set with your .content-photos selector in jQuery expression
At last you have to put text into your anchor elements(not as attributes) to make your search work

Hope this helps GL & HF

Answer 4 · 2017-02-28T04:25:05Z

February 28, 2017 4:25am

Still recommending you to delete those ul and li tags, if you wont, you will have to set class of your li items to filtr-item else plugin wont work.
var filterizd = $('.content-photos') <-- bad selector, should be .filtr-container or #thumbnails
Put text into .filtr-item element to make your search work, you can hide this text in css.

<div class="filtr-item" data-category="1" data-sort="unu">
    <a href="img/01.jpg" title="Hay Bales" data-filter="all" data-lightbox="portfolio" data-type="vegan pizza" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
        <img src="img/01.jpg" class="name" alt="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
        <p>I love hay bales. Took this snap on a drive through the countryside past some straw fields.</p>
    </a>
</div>

If you still having troubles, check my whole solution to searching in filterizd here

Welcome to the Treehouse Community

Looking to learn something new?

Iftode Daniel

Iftode Daniel

FILTERIZR jquery plugin

Taran Albury

Taran Albury

4 Answers

Chyno Deluxe

Chyno Deluxe

Konrad Traczyk

Konrad Traczyk

Taran Albury

Taran Albury

Konrad Traczyk

Konrad Traczyk

Taran Albury

Taran Albury

Konrad Traczyk

Konrad Traczyk

Taran Albury

Taran Albury