Applying a lightbox to JSON Data

Applying a lightbox to JSON Data

I'm trying to pull images from the spotify API and give those images a lightbox. I've created a lightbox for images before but just not with using JSON data. Not sure what my code is missing. Your help would be greatly appreciated.

This is an example of the JSON data that I'm trying to pull from. Below, I've bolded the areas in my HTML, CSS, and Javascript which are directly related to the lightbox.

HTML

  2. <!DOCTYPE html>
  3.   <html>
  4.     <head>
  5.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  6.       <script src="script.js"></script>
  7.       <link rel="stylesheet" type="text/css" href="styles.css">
  8.       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9.     </head>
  10.     <body>
  11.       <div class="top">
  12.         <h1>Spotify Song Search</h1>
  13.         <form id="search-form">
  14.           <input type="search" placeholder="Search for a album or band" id="song">
  15.           <button type="submit" id="search">Search</button>
  16.         </form>  
  17.       </div>
  18.       <div id="music"> <!-- images with lightbox should go here -->
  19.         </div>
  20.       </div>
  21.     </body>

  23.   </html>

CSS

  2. body {
  3. background-color:

  5. }

  7. .top {
  8. text-align: center;

  10. }

  12. #music {
  13. margin-left: 40px;
  14. margin-right: 40px;
  15. margin-top: 40px;

  17. }

  19. .album {
  20. display: inline-block;

  22. }

  24. li {
  25. list-style: none;
  26. padding: 10px;
  27. }

  29. img {
  30. width: 200px;

  32. }

  34. input {
  35. width: 400px;
  36. height: 30px;
  37. }

  39. #overlay {
  40. background-color: rgba(0,0,0, 0.7);
  41. width: 100%;
  42. height: 100%;
  43. position: absolute;
  44. top: 0;
  45. left:0;
  46. display: none;
  47. text-align: center;
  48. }

  50. #overlay img {
  51. margin-top: 10%;
  52. height: 360px;
  53. width: 360px;
  54. }

  56. #overlay p {
  57. color: white;

  59. }
JavaScript

  2. $(document).ready(function() {
  3. $('form').submit(function(evt) {
  4. evt.preventDefault();
  5. // var $searchField = $('#song');
  6. var spotifyAPI = "https://api.spotify.com/v1/search" // needs end point
  7. // var albums = $searchField.val();// Specifies type of user info to be retrieved and sent to Spotify API
  8. var spotifyOptions = {
  9. "type": "album",
  10. "query": $("#song").val(),
  11. "limit": "12"

  13. }; // Requests data from spotify API. Must be a JavaScript Object
  14. $.getJSON(spotifyAPI, spotifyOptions, displayAlbums); // Currently, these are only placeholders. The variables inserted as arguments have not been defined as variables
  15. function displayAlbums(data){
  16. console.log(data);
  17. var albumHTML = '<ul>'; // Opening ul tag to hold a single album result
  18. $.each(data.albums.items, function(i, album){
  19. albumHTML += '<div class="album col-md-3" album-id="' + album.index + '">';
  20. albumHTML += '<li>'; // You may need to use bootstrap to style array items correctly
  21. albumHTML += '<a href="#">';
  22. albumHTML += '<img src="' + album.images[0].url + '" alt="' + album.artists.name + '">';
  23. albumHTML += '</a>';
  24. albumHTML += '</li>';
  25. albumHTML += '</div>';
  26. return albumHTML;
  27. });

  29. albumHTML += '</ul>';
  30. $('#music').html(albumHTML);

  32. };
  33. var $overlay = $('<div id="overlay"></div>');
  34. var $image = $("<img>");
  35. var $caption = $("<p></p>");

  37. $overlay.append($image);
  38. $overlay.append($caption);

  40. $("body").append($overlay);

  42. $("#song a").click(function(event){
  43. event.preventDefault();
  44. var imageLocation = $(this).attr("src"); // May need to specify a second argument
  45. $image.attr("src", imageLocation);
  46. $overlay.show();

  48. var captionText = $(this).children(img).attr("alt");
  49. $caption.text(captionText);
  50. });

  52. $overlay.click(function(){
  53. $overlay.hide();
  55. });

  57. });

  59. });