Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Photo Gallery

Posted by Taran Albury
.a{fill-rule:evenodd;}techdegree
Taran Albury
Front End Web Development Techdegree Student 5,702 Points

Filtering photos

I am working on the interactive photo gallery project, however I am having trouble getting the search box to filter my images based on their captions. Any help would be greatly appreciated. Thanks

<!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>
<form action="index.html" method="post">
<div id="photo-filter">
<input type="text" id="filter" name="photo-search" placeholder="Search(16pt)">
</form>
</div>
<div class="content-photos">
<ul id="thumbnails">
<li><a class="selected"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 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 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 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 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 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 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 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 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 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 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 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>
gregsmith5
gregsmith5
32,615 Points

Can you post your JavaScript, or better yet, link to your workspace?

Taran Albury
.a{fill-rule:evenodd;}techdegree
Taran Albury
Front End Web Development Techdegree Student 5,702 Points

I am using a separate text editor but here is my current javascript:

$('#photo-filter').click(function() {
                var title = $('#filter').val();  //value from search input box
                $('.content-photo a').each(function() { //searches each container
                    var str = $(this).text(); //finds just the title text
                    if(str.indexOf(title) > -1) { //compares search text to title text
                        $(this).show(); // if the entry is found show the container
                    } else {
                        $(this).hide(); // if not found, hide it.
                    }
                });
            });





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

1 Answer

gregsmith5
gregsmith5
32,615 Points
gregsmith5
gregsmith5
32,615 Points 
var str = $(this).text(); //finds just the title text

This is not going to get you what you're expecting. Try putting a console.log($(this)) in your click handler and see what it outputs. To get the text, you'll want the child of $(this), and one of jQuery's traversal methods should help (probably .find() or .closest()).

Also, watch the order that you're opening/closing tags:

<form action="index.html" method="post">
<div id="photo-filter">
<input type="text" id="filter" name="photo-search" placeholder="Search(16pt)">
</form>
</div>
Taran Albury
.a{fill-rule:evenodd;}techdegree
Taran Albury
Front End Web Development Techdegree Student 5,702 Points

Thanks for the help so far. I have not gotten the search box to clear as yet but I have made some changes to my code. Here is what it looks like now:

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 li').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
});