javascript Interactive photo project

Question

I am trying to get the search box to filter the images if the user input matches the images caption text. If anyone has came across this problem and is able to assist me it would be greatly appreciated. Thanks

html

<!DOCTYPE html>
<html>
<head>
<title>Jquery project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="lightbox/src/imagelightbox.js"></script>
<link href="lightbox/src/imagelightbox.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="photo-filter">
<input type="text" id="filter" name="photo-search" placeholder="Search(16pt)">

</div>
<div class="content-photos">
<ul id="thumbnails">
<li><a class="caption"href="photos/01.jpg" data-imagelightbox="demo" data-ilb2-caption="
Hay Bales
I love hay bales. Took this snap on a drive through the countryside past some straw fields"><img src="images/01.jpg" alt="
Hay Bales" title="1st Photo"></a></li>
<li><a class="caption"href="photos/02.jpg"data-imagelightbox="demo"  data-ilb2-caption="The lake was so calm today. We had a great view of the snow on the mountains from here"><img src="images/02.jpg" alt="Lake" title="1st Photo"></a></li>
<li><a class="caption"href="photos/03.jpg" data-imagelightbox="demo" data-ilb2-caption="I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="images/03.jpg" alt="
Canyon" title="1st Photo"></a></li>
<li><a class="caption"href="photos/04.jpg" data-imagelightbox="demo" data-ilb2-caption="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."><img src="images/04.jpg" alt="Iceberg
" title="1st Photo"></a></li>
<li><a class="caption"href="photos/05.jpg" data-imagelightbox="demo" data-ilb2-caption="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="images/05.jpg" alt="
Desert" title="1st Photo"></a></li>
<li><a class="caption"href="photos/06.jpg" data-imagelightbox="demo" data-ilb2-caption="
Fall is coming, I love when the leaves on the trees start to change color."><img src="images/06.jpg" alt="
Fall" title="1st Photo"></a></li>
<li><a class="caption"href="photos/07.jpg" data-imagelightbox="demo" data-ilb2-caption="
I drove past this plantation yesterday, everything is so green!

"><img src="images/07.jpg" alt="Plantation" title="1st Photo"></a></li>
<li><a class="caption"href="photos/08.jpg" data-imagelightbox="demo" data-ilb2-caption="
My summer vacation to the Oregon Coast. I love the sandy dunes!

"><img src="images/08.jpg" alt="
Dunes" title="1st Photo"></a></li>
<li><a class="caption"href="photos/09.jpg" data-imagelightbox="demo" data-ilb2-caption="Lane
We enjoyed a quiet stroll down this countryside lane."><img src="images/09.jpg" alt="
Countryside" title="1st Photo"></a></li>
<li><a class="caption"href="photos/10.jpg" data-imagelightbox="demo" data-ilb2-caption="Sunset at the coast! The sky turned a lovely shade of orange."><img src="images/10.jpg" alt="
Sunset" title="1st Photo"></a></li>
<li><a class="caption"href="photos/11.jpg" data-imagelightbox="demo" data-ilb2-caption="I did a tour of a cave today and the view of the landscape below was breathtaking."><img src="images/11.jpg" alt="Cave" title="1st Photo"></a></li>
<li><a class="caption"href="photos/12.jpg" data-imagelightbox="demo" data-ilb2-caption="
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="images/12.jpg" alt="Bluebells" title="1st Photo"></a></li>
</ul>
</div>
<script src="js/apps.js"></script>
</body>
</html>

javascript

$('#filter').change(function() {  // This will need to change to the id of your search field
     var searchStr = $(this).val();
     $('#thumbnails').each(function() { // Here you'll need to update your selector to find each image. As you are not using the class "caption" on any of your images. // '#thumbnails li' or something similar
          var str = $(this).attr("data-ilb2-caption"); //this call pulls the attribute "data-title", you'll need to update it to the attribute value you're using for the caption text. // 'data-ilb2-caption', You should also keep the code clean and add a space between attributes. 'data-imagelightbox="demo"data-ilb2-caption' to 'data-imagelightbox="demo" data-ilb2-caption'
          if(str.indexOf(searchStr) > -1) {  
               $(this).show(); 
          } else {
               $(this).hide(); 
          }

     });
});





$('a[data-imagelightbox="demo"]').imageLightbox({
arrows:true,
button:true,
overlay:true,
caption:true
});

Answer 1 · 2017-02-25T02:14:31Z

February 25, 2017 2:14am

To accomplish this, you want to take advantage of the css attribute includes selector [attribute*=value], which says to find all elements where the attribute in place of attribute includes the value in place of value. Also you want to use the Jquery .not(selector) method, which takes a jquery collection and removes all items that match the selector. Include a bit of DOM traversal and your have

$('#filter').change(function() { //Trigger on input change
     var searchStr = $(this).val(); //capture user input
     var selector = '[data-ilb2-caption*=' + searchStr + ']'; //build attribute selector
     $('#thumbnails li').show(); //show all list items in case something needs to reappear
     $('#thumbnails a').not(selector).parent().hide(); /* hide all list items that don't 
     have an anchor whos data-ilb2-caption attribute doesn't contain the user input */
});

Also you seem to be missing a necessary space behind some of the href attributes.

Welcome to the Treehouse Community

Looking to learn something new?

Taran Albury

Taran Albury

javascript Interactive photo project

1 Answer

Nathan Dalbec

Nathan Dalbec

Taran Albury

Taran Albury