Search jQuery

jQuery Forum

Screen name:
Autif Kamal

Autif Kamal's Profile

2 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Applying a lightbox to JSON Data
[1Reply]
- 29-Dec-2016 01:16 PM
- Forum: Using jQuery
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"> 
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. });

Displaying Results from Spotify API
[2Replies]
- 22-Dec-2016 08:51 PM
- Forum: Using jQuery
I'm trying to learn how to make JSON requests. Kind of struggling with it. Specifically, I'm trying to access the Spotify API and display search results (i.e. thumbnails of albums) based on user input. This is what I have so far. Please tell me what I'm doing wrong or missing. Thanks.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>
<div class="top">
<h1>Spotify Song Search</h1>
<form>
<input type="search" placeholder="Search for a album or band" id="song">
<button type="submit" id="search">Search</button>
</form>
</div>
<div id="music">
</div>

</body>

</html>

JavaScript/JQuery

$(document).ready(function() {
$('form').submit(function(evt) {
evt.preventDefault();
var $searchField = $('#search');
var spotifyAPI = "https://api.spotify.com/v1/search" // needs end point
var albums = $searchField.val();// Specifies type of user info to be retrieved and sent to Spotify API
var spotifyOptions = {
"type": "album",
"q": "artist",
"limit": "limit"

}; // Requests data from spotify API. Must be a JavaScript Object
function displayAlbums(data){
var albumHTML = '<ul>'; // Opening ul tag to hold a single album result
$.each(data.items, function(i, album){
albumHTML += '<div class="album" album-id="' + index + '">';
albumHTML += '<li>'; // You may need to use bootstrap to style array items correctly
albumHTML += '<a href="#">';
albumHTML += '<img src="' + album.images[0].url + '" alt="' + album.artists[1].name + '">';
albumHTML += '</a>';
albumHTML += '</div>';
return albumHTML;
}

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

});

}
$.getJSON(spotifyAPI, spotifyOptions, displayAlbums); // Currently, these are only placeholders. The variables inserted as arguments have not been defined as variables

});

});

Thanks for your time.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend