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
Adam Butcher
Front End Web Development Techdegree Student 12,180 PointsjQuery plugin is not working!
I am not sure if I am doing this correctly, but I'm trying to put this plugin in my code. Here is what I have. I am using the baguettebox.js plugin by the way.
https://feimosi.github.io/baguetteBox.js/
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Image gallery</title>
<link type="text/css" rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/baguetteBox.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="text" name="search" placeholder="Search(16 pt)" id="filter-search">
<br>
<br>
<div id="images" class="gallery">
<a href="photo_gallery_v3/photos/01.jpg"><img src="photo_gallery_v3/photos/01.jpg" alt="img 1"></a>
<a href="photo_gallery_v3/photos/02.jpg"><img src="photo_gallery_v3/photos/02.jpg" alt="img 2"></a>
<a href="photo_gallery_v3/photos/03.jpg"><img src="photo_gallery_v3/photos/03.jpg" alt="img 3"></a>
<a href="photo_gallery_v3/photos/04.jpg"><img src="photo_gallery_v3/photos/04.jpg" alt="img 4"></a>
<a href="photo_gallery_v3/photos/05.jpg"><img src="photo_gallery_v3/photos/05.jpg" alt="img 5"></a>
<a href="photo_gallery_v3/photos/06.jpg"><img src="photo_gallery_v3/photos/06.jpg" alt="img 6"></a>
<a href="photo_gallery_v3/photos/07.jpg"><img src="photo_gallery_v3/photos/07.jpg" alt="img 7"></a>
<a href="photo_gallery_v3/photos/08.jpg"><img src="photo_gallery_v3/photos/08.jpg" alt="img 8"></a>
<a href="photo_gallery_v3/photos/09.jpg"><img src="photo_gallery_v3/photos/09.jpg" alt="img 9"></a>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<!--<script src="js/app.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/baguetteBox.min.js" async></script>
<script type="text/javascript">
/*baguetteBox.run('.gallery');*/
(function() {
var $imgs = $('#images img');
var $search = $('#filter-search');
var cache = [];
$imgs.each(function() {
cache.push({
element: this,
text: this.alt.trim().toLowerCase()
})
})
function filter() {
var query = this.value.trim().toLowerCase();
cache.forEach(function(img) {
var index = 0;
if (query) {
index = img.text.indexOf(query);
}
img.element.style.display = index === -1 ? 'none' : '';
})
}
if ('oninput' in $search[0]) {
$search.on('input', filter);
} else {
$search.on('keyup', filter);
}
}())
</script>
</body>
</html>
style.css
input[type="text"] {
float:right;
width: 65%;
border-radius: 4px;
border: 1px solid black;
}
img {
width: 30%;
height: 30%;
padding-left: 1.2%;
margin: 1%;
float: left;
position: center;
}
/** Start Coding Here **/
#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
display: none;
}
#overlay img {
margin-top: 20%;
margin-left: 35%;
}
#overlay p {
position: absolute;
color: white;
margin-top: 35%;
margin-left: 50%;
}
app.js
/*baguetteBox.run('.gallery');*/
//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>")
//An image to overlay
$overlay.append($image);
//Add overlay
$("body").append($overlay);
//A caption to overlay
$overlay.append($caption);
//1. Capture the click even on a link to an image
$("#images a").click(function(event) {
event.preventDefault();
var imageLocation = $(this).attr("href");
//Update overlay with the image linked in the link
$image.attr("src", imageLocation);
//Show the overlay.
$overlay.show();
//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
//When overlay is clicked
$overlay.click(function() {
$(this).hide();
});
//Hide the overlay
I commented out app.js because it was initially there from the jQuery video. Since I need next and previous buttons, I was wondering how I would properly use this plugin. Or if this plugin is no good, which other plugin would be the easiest to insert with the code I have?
Note: I also commented out /baguetteBox.run('.gallery');/ in my html. The searching should work. I am not sure how to make the lightbox with previous and next buttons work.
Andrew McPheron
14,290 PointsAlright, I imported your code to workspaces, though I swapped out baguettebox.js downloaded with a CDN link (content delivery network). While I don't have sample images to use, the search still seems to work. I don't see any code in js about navigation buttons, what have you tried so far to make them work?
1 Answer
Adam Butcher
Front End Web Development Techdegree Student 12,180 PointsNevermind, I used a different plugin and it works.
Andrew McPheron
14,290 PointsAndrew McPheron
14,290 PointsCould you give more detail about which part is not working? For instance, does the console spit back an error when you run your code? Do your next and previous buttons not appear at all, or simply not do anything when you interact with them?
In the meantime I'll try to put your code into workspaces and see what happens.