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
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsjQuery image gallery search function implementation or plugins?
I'm make a demo image gallery that contains about 12-20 images. Just a small assignment. I'm implemented a lightbox (the original) on the thumbnails to load the larger images as well as to provide arrows to scroll through all the images.
I need to implement a search box at the top that can sort the images based on words in the captions. Is there an easy jQuery plugin available that can do this or should I write it myself? What would be the best approach to write it ones self. Show/Hide images based on filtering the words?
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsMy apologies! Not sort but show/hide. The search box should filter the images in real-time and filter based on the captions. Nothing too advanced but I'm assuming simple parsing based on some keywords?
1: Title: Hay Bales Caption: I love hay bales. Took this snap on a drive through the countryside past some straw fields.
2: Title: Lake Caption: The lake was so calm today. We had a great view of the snow on the mountains from here.
Etc.
Jason Anello
Courses Plus Student 94,610 PointsOk, so given those captions, what might the user type in and which images should appear? In other words, you have to figure out how the search is going to be performed.
For example, if I typed "mountains" would only the 2nd image show up? What if I typed "lake countryside"? Would both images show up because there's a match for both or no images show up because there isn't a caption that contains both "lake" and "countryside"
I'm not sure about a plugin for the searching itself but you can look at isotope for the filtering portion of this. It's a sorting and filtering library which animates the items that are shown/hidden. You can check a demo on that page to see how it works.
1 Answer
Viktor Yakov
Front End Web Development Techdegree Graduate 15,770 PointsJason Anello, could you please give more guidance about that search box. I have the same problem, but unlike Chris this is advanced for my skills and jQuery understandings :). Thanks !
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Chris,
Can you give some examples of what the captions might be and then what the user might type into the search box and what the result should be?
You mention sorting the images but then say Show/HIde images. Do you need to sort the 12-20 images based on search criteria or hide some of the images based on search criteria?