Append JSON values to figcaption - javascript

I have a JSON file with the structure below, which I want to display the make, model, name and price, under each image, but I obviously want the different values.
[
{"instrumentGroup":"Woodwind", "category1":"Instrument", "name":" Bb Clarinet", "price":"£400","quantityAvailable":"10", "description":"ABS resin Buffet B12 student clarinet, clear sound.", "rating":"4", "make":"Buffet", "model":"B12"},
{"instrumentGroup":"Woodwind", "category1":"Instrument", "name":"Bb Clarinet", "price":"£1700","quantityAvailable":"10", "description":" CX with full round sound and clear tone.", "rating":"5", "make":"Yamaha", "model":"YCL-CX"},
{"instrumentGroup":"Woodwind", "category1":"Instrument", "name":"Bass Clarinet", "price":"£3500","quantityAvailable":"5", "description":"Student Grenadilla wood bass clarinet with silver plated keywork. Range down to Eb.", "rating":"4", "make":"Buffet", "model":"BC1180"}
]
The file is much larger than this but just working with a little for now.
In my html, I have multiple containers as there's more on the page than just this but the structure of the product information is below.
<article id="prodList">
<article id="products">
<section id="row">
<figure class="prodInfo">
<!--this makes the whole product area clickable!--><a href="#link">
<span class="link"></span>
</a>
<img src="Images/saxophone.png" alt="instrument" width="100" height="100">
<figcaption>
</figcaption>
</figure>
<figure class="prodInfo">
<!--this makes the whole product area clickable!--><a href="#link">
<span class="link"></span>
</a>
<img src="Images/saxophone.png" alt="instrument" width="100" height="100">
<figcaption>
</figcaption>
</figure>
</section>
</article>
</article>
I want to display the information within the figcaption, with make/model on one line, name on the next then price on the next. My .js file below is printing out the last value in the JSON file under every image, but I can't work out how to print each value as it is going through and then stop when it reaches the 18th value.
$.getJSON("products.json", function(result){
$.each(result, function(key, val){
$('figcaption').html(val.make + " " + val.model + "<br/>" + val.name + "<br/>" + val.price);
});
});
Any help would be appreciated. Eventually I will use a paginator to display the next 18 values on the next page, but once the first is working I believe this should be easier.
The main issue is how to separate them so it prints one in each div.
Thanks.

Try
$.getJSON("products.json", function(result) {
$.each(result, function(key, val){
if (key < 18) {
$("figcaption").eq(key).html(val.make + " "
+ val.model + "<br/>" + val.name + "<br/>" + val.price);
}
});
});
jsfiddle http://jsfiddle.net/guest271314/6ftjLLjv/

Related

Display images inside append

I have the following code :
$('.posts').append('<article class="post">\n' +
' <div class="postImages">'+displayPostImagesHere()+'</div>\n' +
' </article>');
and want to get images from firebase storage and display for each image in place of displayPostImagesHere() function the following code :
<div class="postImage"><img src="'+url+'" alt="Post image"></div>

Appending a div with a class id and image to a container

I have been struggling with this for a few days now. I would like to append a div with class id and an image to my container I have been able to render the cards, but upon inspecting the HTML in dev tools I came across this
<div class="hidden-container card-image" id="card-id-1" "="">
<img src="../images/avatar.png" <="" div="">
</div>
what surprises me is the empty = <= and empty div. These should obviously not be here.
I render the divs like so
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id=card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});
Would anyone be able to properly format this ? it has been giving me a headache for the last couple of days.
1.You missed " around id
2.You missed to close <img> tag as well
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"></div>');
});
forget to close img-tag
<div class="hidden-container card-image" id="card-id-1" "="">
<img src="../images/avatar.png" <="" div="">
</img>
</div>
and the marks by id="card-id-'
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});

Featherlight with google street view images

I am trying to fetch Google Street View images and display them in a light box using featherlight. The images are defined dynamically based on which map icon a user selects.
My image displays without issue but the lightbox freezes for a second and then returns a page of random characters as if the image has been attempted to read as text.
An example of my code is as follows:
let streetView_imgURL = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" +
props.Latitude + "," + props.Longitude + "&key=MYKEY";
document.getElementById("selectedSchool").innerHTML = (props ?
"<div class='imgbox'>" +
"<img style='width:100%;' data-featherlight='" + streetView_imgURL + "'src='"
+ streetView_imgURL + "'>"
If I understood your issue well, try this:
http://jsfiddle.net/markovica/1njee7ah/2/
<style>.gsv-screenshot {display: none}</style>
<a href=".gsv-screenshot" class="" data-featherlight>Click Me</a>
<div class="lightbox gsv-screenshot">
<i class="featherlight-close fa fa-close"></i>
<img style='width:100%;' src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.8165107,20.4603276">
</div>
find a way to generate items this way. It doesn't seem to have issues.

How do I display image count of specific type of image with jQuery?

So I've got a page with 6 images. 4 are of some type of ball (basketball, baseball, etc.). One is of a truck, and another is random.
I have a from with two radio buttons which give the user the option to display the number of each type of image (Images of balls, images of trucks, etc). I need to write javascript/jquery to take the radio button they selected and then display the image count below in a span tag ("There are X amount of picture of a ball", "There are X amount of pictures of a truck"). I can figure out how to get values of what is checked but I have no idea how to get the image count of how many of each type of image. (Without just making seperate spans with the number preset and just displaing whichever count the user chooses)
Here is what I've got so far:
<div id="images">
<h3>Some Images</h3>
<p><img src="firetruck.jpg" alt="pic of truck" > |
<img src="baseball.jpg" alt="pic of baseball" > |
<img src="soccer_ball.jpg" alt="pic of soccer ball" >
</p>
<p><img src="hockey_puck.jpg" alt="pic of hockey puck" > |
<img src="tennis_ball.jpg" alt="pic of tennis ball" > |
<img src="basketball.jpg" alt="pic of basketball" > </p>
</div><!-- end of 'images' div -->
<input type="radio" name="imageCount" id="ballImages" value="ballImages">Images of Balls<br>
<input type="radio" name="imageCount" id="truckImages" value="truckImages">Images of Trucks<br><br>
<input type="button" name="btnImageCount" value="Image Count" onclick="getImageCount()">
<span class="spanImageCount"></span>
<script>
function getImageCount()
{
if ($("#ballImages").prop("checked"))
{
var count = $("#images img[src*="ball"]").length;
document.write('<span class="spanImageCount">There are ' + count + ' images of a ball!</span>');
}
else if ($("#truckImages").prop("checked"))
{
var count = $("#images img[src*="truck"]").length;
document.write('<span class="spanImageCount">There are ' + count + ' images of a truck!</span>');
}
}
One approach:
// bind the click-handling anonymous function to the button-input:
$('input[name="btnImageCount"]').click(function(){
// find the input element whose type is 'radio' and whose name is 'imageCount' which
// is also checked:
var chosen = document.querySelector('input[type="radio"][name="imageCount"]:checked'),
// if there is a chosen radio input, we get the 'type' of image we're looking for,
// by removing the 'Images' string from the 'id', if there is no chosen radio input
// we use a string of white-space:
type = chosen ? chosen.id.replace('Images','') : ' ',
// finding the images whose 'src' attribute contains the substring identified
// above ('truck','ball' or ' ', the ' ' will deliberately not match):
relevantImages = document.querySelectorAll('img[src*="' + type + '"]'),
// if we have any relevant images, and the number (length) of those images
// is greater than 0 we get the number of found images, otherwise we offer
// a simple message to the user telling them to select a type of image:
count = relevantImages && relevantImages.length > 0 ? 'There are ' + relevantImages.length + ' images of that type.' : 'Please select an image type.';
// assigning the text of the 'span' to the count (or message) we set, above:
$('span.spanImageCount').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images">
<h3>Some Images</h3>
<p>
<img src="firetruck.jpg" alt="pic of truck">|
<img src="baseball.jpg" alt="pic of baseball">|
<img src="soccer_ball.jpg" alt="pic of soccer ball">
</p>
<p>
<img src="hockey_puck.jpg" alt="pic of hockey puck">|
<img src="tennis_ball.jpg" alt="pic of tennis ball">|
<img src="basketball.jpg" alt="pic of basketball">
</p>
</div>
<!-- end of 'images' div -->
<label>
<input type="radio" name="imageCount" id="ballImages" value="ballImages">Images of Balls
</label>
<br>
<label>
<input type="radio" name="imageCount" id="truckImages" value="truckImages">Images of Trucks
</label>
<br>
<br>
<label>
<input type="button" name="btnImageCount" value="Image Count" />
</label>
<span class="spanImageCount"></span>
References:
CSS:
:checked pseudo-class.
Substring-matching attribute selectors.
JavaScript:
document.querySelector().
String.replace().
jQuery:
click().
text().
Assuming that your images have classes of either "ballImage" or "truckImage" you could do this:
function getImageCount(){
if($("#ballImages").prop("checked")){
var count = $(".ballImage").length;
document.write('<span class="spanImageCount">There are ' + count + ' images of a ball!</span>');
}
else if($("#truckImages").prop("checked")){
var count = $(".truckImage").length;
document.write('<span class="spanImageCount">There are ' + count + ' images of a truck!</span>');
}
}
I'm not sure why you were using document.write, but I would consider doing this:
Put a div in your html like this:
<div id="message"></div>
Then make your getImageCount function look like this:
function getImageCount(){
if($("#ballImages").prop("checked")){
var count = $(".ballImage").length;
$("#message).html('<span class="spanImageCount">There are ' + count + ' images of a ball!</span>');
}
else if($("#truckImages").prop("checked")){
var count = $(".truckImage").length;
$("#message).html('<span class="spanImageCount">There are ' + count + ' images of a truck!</span>');
}
}
Something like this should work if the image src attribute contains "ball" or "truck" for every image.
var ballCount = 0;
$('img[src*=ball]').each(function(){
if($(this).prop("checked")){
ballCount+=1;
}
});
var truckCount = 0;
$('img[src*=truck]').each(function(){
if($(this).prop("checked")){
truckCount+=1;
}
});
instead, if image src doesn't contains that info, you need to give an id or a class to every image, to identify if that is a truck or a ball image. The above code change only at the line $('img[src*=something]') and became
with ids: $('img[id^=truck]') //where ids need to be like truck1, truckTwo, truckSomething
with classes: $('.truck')

Issue with jQuery lightbox plugin/gallery

I have the following gallery set up in jQuery: -
<script type="text/javascript">
$(function () {
$(".image").click(function () {
var image = $(this).attr("rel");
$('#galleryImage').hide();
$('#galleryImage').fadeIn('slow');
$('#galleryImage').html('<img src="' + image + '"/>');
return false;
});
$("#galleryImage").click(function () {
var imageLarge = $(this).attr("rel");
$('#galleryImage').html('<a href="' + imageLarge + '"/>');
$('#galleryImage a').lightBox();
});
});
<div id="galleryImage">
<img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" />
</div>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a>
That takes the rel attribute value when a thumbnail is clicked and inserts it into the galleryImage div allowing the user to select different images via the thumbnails that all display in one place.
Now, what I want to do is apply lightbox to the current image in the #galleryImage div, so that if a user clicks it, an even larger version comes up via the lightbox plugin, but I can't quite get my head around how to do it, this is what I have so far, am I heading in the right direction?
Fixed it, used:
$(".image").click(function() {
var image = $(this).attr("rel");
var imageLarge = $(this).attr("title");
$("#galleryImage img").attr("src",image);
$("#galleryImage a").attr("href", imageLarge);
return false;
}
Using the title value which stores a url to the large image, taken from the currently selected thumbnail and just setting the attribute value in jQuery rather than inserting a bunch of HTML right into the div

Categories

Resources