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

Jeriah Bowers
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points
Posted by Jeriah Bowers
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points

jQuery Plugin

Can someone plz help me?? I'm in the process of the 4th project on my techdegree and I can't get the filtering plugin to work.. It's the hideseek plugin. Whenever you start to type in the search box all the photos disappear. It's really close to working. Any help is appreciated.

HTML

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.6/release/featherlight.min.css" type="text/css" rel="stylesheet" />
     <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.6/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
     <link rel="stylesheet" href="css/main.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.6/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.6/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/search.js"></script>
     <script src="js/app.js"></script>
 </head>
<body>
   <form>
    <input type="text" name="search" id="search" placeholder="Search" data-list=".list">   
   </form>
<ul id="photos" class="list">
  <li><a href="photos/01.jpg"><img src="photos/thumbnails/01.jpg" alt="I love hay bales. Took this snap on a drive through the countryside past some straw fields."></a></li> 
  <li><a href="photos/02.jpg"><img src="photos/thumbnails/02.jpg" alt="The lake was so calm today. We had a great view of the snow on the mountains from here."></a></li>
  <li><a href="photos/03.jpg"><img src="photos/thumbnails/03.jpg" alt="I hiked to the top of the mountain and got this picture of the canyon and trees below."></a></li>
  <li><a href="photos/04.jpg"><img src="photos/thumbnails/04.jpg" alt="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></a></li>
  <li><a href="photos/05.jpg"><img src="photos/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></li>
  <li><a href="photos/06.jpg"><img src="photos/thumbnails/06.jpg" alt="Fall is coming, I love when the leaves on the trees start to change color."></a></li>
  <li><a href="photos/07.jpg"><img src="photos/thumbnails/07.jpg" alt="I drove past this plantation yesterday, everything is so green!"></a></li>
  <li><a href="photos/08.jpg"><img src="photos/thumbnails/08.jpg" alt="My summer vacation to the Oregon Coast. I love the sandy dunes!"></a></li>
  <li><a href="photos/09.jpg"><img src="photos/thumbnails/09.jpg" alt="We enjoyed a quiet stroll down this countryside lane."></a></li>
  <li><a href="photos/10.jpg"><img src="photos/thumbnails/10.jpg" alt="Sunset at the coast! The sky turned a lovely shade of orange."></a></li>
  <li><a href="photos/11.jpg"><img src="photos/thumbnails/11.jpg" alt="I did a tour of a cave today and the view of the landscape below was breathtaking."></a></li>
  <li><a href="photos/12.jpg"><img src="photos/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></li>
</ul>
  </body>
</html>

and the jQuery

$(document).ready(function() {
    $("#photos a").featherlightGallery();
    var $overlay = $('<div id="overlay"></div>');

        $("#search").hideseek({
        attribute: 'data-alt'
    });

});

I didn't post the plugins jQuery as that is public. And I didn't post the CSS either cause I don't see how it's relevant. Again Thank you.

1 Answer

Nicolas Hampton
Nicolas Hampton
44,638 Points
Nicolas Hampton
Nicolas Hampton
44,638 Points

Jeriah,

If you look at the hideseek documentation, there's only three options they support for the "attribute" option: title, alt, and text. data-alt isn't a supported option. I would change this option, then apply an alt tag to the links and see if that works for you.