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
Caleb Schmidt
Front End Web Development Techdegree Graduate 18,686 PointsUsing an API and Jquery/AJAX to make a gallery with a Lightbox. I need some code reviewed; my lightbox will not close.
I am on the 10th project of the Web Design Techdegree and I am making a gallery with a Lightbox using a public API (Spotify) and Jquery/AJAX. I coded the lightbox but I cannot, for the life of me, code it correctly to make it close. Any help would be greatly appreciated.
JQuery:
$(document).ready( function() {
var spotifyApi = "https://api.spotify.com/v1/albums/?ids=17EFF25Ee9kK5QgPgd4bv5,1xXSEeYg8T9UFaphdP9FtP,6R6Xy2gwyTO6GS1Cs4K1cI,4N0nmK7gWxKZvRwTv02FKs,7cJyN85qjzHZBjeo9LRry8,0mu1FtVZK5mUrYT9FmxtIo";
var getAlbumInfo = function (albumData) {
console.log(albumData);
var albumHTML = '<ul>';
$.each(albumData.albums, function (i, eachAlbum) {
albumHTML += '<li class="albums"><a href="#">';
albumHTML += '<img src="'+ eachAlbum.images[0].url + '" alt="' + eachAlbum.name + ' <br>by<br> ' + eachAlbum.artists[0].name + '"></a></li>';
}); //end loop
albumHTML += '</ul>';
$('#main-gallery').html(albumHTML);
var boxHTML = '<div class="lightbox"></div>';
$('img').click( function () {
boxHTML += '<img src="' + $(this).attr("src") + '" class="lightBoxImg">';
boxHTML += '<p class = lightBoxText>' + $(this).attr("alt") + '</p>';
boxHTML += '<p id="close">X</p>'
$('#main-gallery').append(boxHTML);
}); //end lightbox
$('#close').click( function () {
boxHTML.hide();
});
}
$.getJSON(spotifyApi, getAlbumInfo);
}); //end ready
CSS:
html,
body {
color: #666;
width: 100%
height: 100%;
}
h1 {
text-align: center;
font-family: 'Coiny', arial;
}
ul {
margin: auto;
text-align: center;
}
.albums {
list-style: none;
display: inline-block;
width: 30%;
margin-top: 5em;
}
img {
width: 250px;
height: 250px;
border: 1px solid #666;
}
/*****************************************************************
Lightbox
*****************************************************************/
.lightbox {
background-color: rgba(0,0,0, 0.92);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.lightBoxImg {
height: 350px;
width: 350px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 15em;
}
.lightBoxText {
color: white;
font-size: 2em;
font-family: 'Coiny', arial;
position: absolute;
text-align: center;
left: 0;
right: 0;
top: 23em;
}
#close {
color: white;
font-size: 2em;
font-family: arial;
position: absolute;
text-align: right;
right: 20em;
top: 7em;
}
Thank you!
Caleb Schmidt
Front End Web Development Techdegree Graduate 18,686 PointsHi Jacqueline!
So I just tried what you suggested (thank you!), and it still is not working/closing. That portion looks like this now:
var boxHTML = '<div class="lightbox">';
$('img').click( function () {
boxHTML += '<img src="' + $(this).attr("src") + '" class="lightBoxImg">';
boxHTML += '<p class = lightBoxText>' + $(this).attr("alt") + '</p>';
boxHTML += '<p id="close">X</p></div>';
$('#main-gallery').append(boxHTML);
}); //end lightbox
$('#close').click( function () {
$('.lightbox').hide();
});
1 Answer
Chyno Deluxe
16,936 PointsHey Caleb,
there are a few things that you would need to change in order to get this working correctly. Here is the code that i was able to get working. jsFiddle Demo
/*----------------------
1. move the the declaration of "boxHTML" inside of the img click function.
This will create a new light box for every image clicked.
2. move "#close" click function into the "img" click function. This initializes
the "close" click function once the lightbox is created.
3. inside the "close" click function replace "boxHTML.hide();" with "$('.lightbox').remove();".
This will remove the entire lightbox element on close.
----------------------*/
$('img').click(function() {
var boxHTML = '<div class="lightbox">';
boxHTML += '<img src="' + $(this).attr("src") + '" class="lightBoxImg">';
boxHTML += '<p class = lightBoxText>' + $(this).attr("alt") + '</p>';
boxHTML += '<p id="close">X</p>';
boxHTML += '</div>';
$('#main-gallery').append(boxHTML);
$('#close').click(function() {
$('.lightbox').remove();
});
}); //end lightbox
I hope this help. Feel free to ask me any questions you might have.
Caleb Schmidt
Front End Web Development Techdegree Graduate 18,686 PointsOh man! Thank you so much! So simple. :) I never thought of moving the "close" function inside the main lightbox function.
Chyno Deluxe
16,936 PointsNot a problem. Glad i could help. Keep Coding!
J S
7,387 PointsJ S
7,387 PointsHi Caleb,
Just from looking at your code, you are trying to apply hide() to boxHTML, which is really just a string of HTML. Have you tried actually hiding the .lightbox class itself? i.e.
$(".lightbox").hide();Edit: Another thing I noticed is that when you append your image code to boxHTML, it's going to end up outside the lightbox div itself. Try fixing this by moving the closing <div> tag to your final append. Calling $(".lightbox").hide(); won't work properly until you fix this. :)