How do you create an image that can change in JavaScript - javascript

I am working on my own version of a magic mirror and I want to have an icon that displays the weather based on the JSON data that it requested. It checks the weather every hour, and I want it to display one of the 4 icons (the icons are just png’s I photoshopped)
I have tried document.getElementById(“image”).appenedChild(img), but every time it requests data, it adds another icon next to the original. I can get the data and parse it, I just am new to creating dynamic webpages
Right now I have a function that checks the weather from OpenWeatherMap, then calls another function that sets the img.src to the correct icon file, but nothing shows up
The end goal is to either have the original icon updated or replaced when it receives new data

It's easier to access the image if you give it an id.
<img id="weatherIcon" src="firstIcon.png" alt="Weather icon">
Then you can change the image's src attribute to load a different image to the element.
document.getElementById("weatherIcon").src = "secondIcon.png";

Related

How to access a particular element from JSTL ForEach tag using javaScript?

I'm trying to make a booking website. On my jsp page, I have a jstl forEach that loops through multiple pictures from my database of various events. These images act as links, every image has a different link attached.
I also want to send location coordinates along with image to sort through database based on region, hence I am using Javascript.
How can I access an individual image in my javascript, to redirect to corresponding page?
I have tried using 'alt' of image, but that returns same value (alt of first image in loop) on every image in javaScript. However if I use href in anchor tags, the correct value is returned for every link. Is there a solution where I can use 'alt' in javaScript.
jsp:
<core:forEach items="${requestScope.Events}" var="Events">
<div>
<a onClick="getLocation()">
<img alt="${Events.name}" src="/images/${Events.name).jpg">
</a>
</div>
</core:forEach>
Expected result is to get javascript:getLocation() have details of selected image so that it can be forwarded along with location coordinates to display nearby events according to user's location.
You can pass the name in the call to the event handler:
<core:forEach items="${requestScope.Events}" var="Events">
<div>
<a onClick="getLocation('${Events.name}')">
<img alt="${Events.name}" src="/images/${Events.name).jpg">
</a>
</div>
</core:forEach>
Your handler function would then be modified to accept the event name as a parameter.
FWIW I'd use a <button> instead of <a> here.

How to change current product cover photo with javascript in PrestaShop 1.7

I am trying to set customized product preview (t-shirt with uploaded logotype) as product thumbnail. It's image, file type: jpeg - I have full url with http: NEW_PRODUCT_THUMB.
How to set this url as product image / cover / thumbnail?
For tests, I tried to set it with jQuery:
// <section id="main"> , first <img> child element
$('section#main img:eq(0)').attr("src", NEW_PRODUCT_THUMB );
Problem: Every changes - t-shirt size, color are triggering refresh product page, and then - default image was loaded (from database, not from my customization JS editor).
Here is webpage, where customized product image is set as thumbnail in correct way, but I have no idea how?
https://products.printzware.com/home/114-faded-short-sleeves-tshirt.html#/4-size-one_size
Solution #1
Why not editing your product.tpl Smarty template file and add a condition stating that if this product has been customized within the current shopping, you display a specific image, instead of the cover one?
You can retrieve the customized image by calling the following method from the Cart class:
getProductCustomization($id_product, $type = null, $not_in_cart = false)
And for the real-time modifications, you can of course keep your jQuery code.
Solution #2
Same logic, but instead, you can override the getImageLink() method in the Link class.
Once your override is ready, you can call it dynamically via an ajax call with jQuery.
This will work even if the page is reloaded.

Image on select show on img-src holder and/or from API server data - Ionic 3, Angular 4

So, I have a html tag like this <img [src]="imageUrl"/>. This simply shows an image once selected from the gallery or camera but not the one present in database. And if I use <img src="{{profile.photo}}"/> then I can see image stored in the database but not the one selected from gallery or camera.
I am not sure how to have both functionality working. currently I am using these <img src="{{profile.photo}}"/> but what I want is a combination of both.
`<img [src]="{{ imageUrl | profile.photo}}"/>`
so, what I want to achieve is when page loads show image present inside database but when user selects new photo, replace the photo from
You could use
<img src={{myImage}}/>
where myImage is set to database stored image for the start. When the user selects a new photo, change its value to the url.

fancybox 3 not available for new content loaded with JSON+DOM Manipulation (for endless scrolling)

I have an picture gallery and use fancybox v3. By entering the webseite, the first 20 pictures are loaded (generated with PHP) and fancybox is connected to those pictures.
The HTML part looks like this:
##loop##
<div class="item">
<a data-fancybox="group" href="<?= $i?>">
<img src="/thumbnail/<?= $i?>" />
</a>
</div>
##/loop##
Fancybox is initialized like that:
$().fancybox({
selector: '[data-fancybox="group"]',
loop: true,
});
..this works fine.
Now, if the user reaches the end of page, new content in JSON format is loaded an inserted into the website using DOM manipulation.
For this, I use an placeholder, which is an empty HTML template, hidden in the webseite. I clone that DOM element into the gallery and fill new elements with the data coming from the JSON request.
var px = $('#picturePlaceholder').clone().appendTo('.mygallery');
px.removeAttr('id');
px.children('a').attr('href', jsonValues.pictureURL);
px.children('a').children('img').attr('src', jsonValues.thumbnailURL);
px.children('a').attr('data-fancybox', "group" );
Unfortunately, this does not work. If I click on an new added picture, the fancybox opens and (in every case) the first picture from the original set is shown. Insight the fancybox I can "walk" trough all pictures from the initial set, but I'm unable to reach/see the new loaded pictures.
If I change the JS-Line
px.children('a').attr('data-fancybox', "group" ); to px.children('a').attr('data-fancybox', "group2" );, a new fancybox-instance has been applied to the new (JSON data) record.
But, the picture viewer is unable to slide from the first picture of the initial set to the last picture of the 2nd (JSON loaded) set.
If the users reaches the end of the webpage again, an new set of pictures is loaded again and inserted into the gallery, which seams to destroys the whole fancybox functionality. Fancybox no longer runs correctly. Even the existing pictures cannot be opened properly.
So how could I process JSON data, which is added to my gallery and inject the new data into the existing fancybox set?
To answer my own question in the case, that someone have the same problem:
My problem was based on a bug in fancybox, which is fixed in version 3.2.21 and later.

Random image link render the same across a list of element

I'm using react-toolbox and I would like to render a list (List) of items (ListItem) with random images as an avatar. I found this link http://lorempixel.com/ which allow you to easily get a random image.
My item looks like
<ListItem
avatar={'http://lorempixel.com/50/50'}
caption={name}
/>
and each time I create a new item I have a random image like this
But if I refresh the page, all the images become the same
All my items are different, so why are the image the same ? If I refresh again an again, the image change, but it is still the same for all the items.
Most probably having the same URL, the browser will not download the image again for each occurrence, so you should add a unique identifier:
<ListItem
avatar={`http://lorempixel.com/50/50?${Math.random()`}
caption={name}
/>
Lorempixels returns a new image every time you request one but the browser only resolves the request once since its the same url.
Try appending a random string as a get argument for each item.
Check the answer on this SO question for more info Disable cache for some images

Categories

Resources