We Keep Coding

Image click - Open a Dialog or Popup

I have web page which display product images. These images are coming from server (images are not specific or dynamic images ) over HTTP request in JSON format. This JSON has information about each image.
I want to add dialog or popup box with respective image information when you click on image with Javascript ES6 Engine. How I can pass image Information from JSON to dialog or popup when I click a specific image.

Let's assume you wrote
<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />
Then you may retrieve the id value writing
document.getElementById("xyz").dataset.id
In your case, since you want to use the value when the image is clicked, you may use an onClick event handler, like this:
<img data-id="alpha" src="http://some.url/image.jpg" onClick="someFunction();" />
and then have
someFunction = (ev) => {
let id = ev.target.dataset.id;
// Put here the code to open you dialog or popup
// based on the data retrieved by using the id
}

This also works assuming you used the same image element mentioned by #Ed
<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />
Then drop in the following JS to select the image by the ID:
const image = document.querySelector("#xyz");
Then use the following code to "listen" for a click on the image:
image.addEventListener("click", popup);
Then use the following code to create a popup:
function popup() {
alert("Hello! I am a popup!!");
}

javascript function reloads page upon completion

I have a simple javascript program that runs onclick of an image.
However, whenever I clicked the image, the page reloaded.
After a lot of debugging I found that the page doesn't reload until right as the script completes.
There are several setTimeouts in the code, but I noticed the page was reloading instantly. I even changed these timeouts to 15000 milliseconds, but it still reloads immediately.
I am using jquery, if it makes any difference.
I also want a different result from the program every time you click it, so that each time you click it a different script runs and a some text changes in a specific order. I did this by changing the onclick attribute of the images in each script to the name of the next script, so that script one would switch onclick to script two, and so on. I set a timeout on these switches so that one click doesn't race through every single script. script two isn't running, so that much works.
my code:
function getSounds() {
console.log("script. initiated");
$("#soundwebGetSoundDirections").html("Now, Wait until the file is done downloading and click below again.");
console.log("new message");
$("#soundwebGetSoundA").attr('href',"");
console.log("href eliminated");
setTimeout($("#soundwebGetSoundImg").attr('onclick','findFile()'),2000);
console.log("onclick to findFile()");
}
function findFile(){
console.log("FINDFILE")
$("#soundwebGetSoundDirections").html("Find the file(it's probably in your downloads), copy the path of the file (usually at the top of the file explorer) and paste in it the box below. Then, make sure there is a '/' at the end of the path and type 'Linkiness.txt' (case sensitive, without quotes) at the end. Once you have all that stuff typed, click the icon again.");
console.log("FIND IT, DARN IT!!");
$("#soundwebGetSoundPathInput").css("opacity",1);
console.log("diving into reader");
setTimeout($("#soundwebGetSoundImg").attr('onclick','readFile()'),1000);
}
function readFile(){
console.log("loading...");
$("#soundwebGetSoundDirections").html("loading...");
if(document.getElementById("soundwebGetSoundPathInput").value.length == 0){
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
}
}
and the HTML that's linked to,
<a id = "soundwebGetSoundA" href = "https://docs.google.com/feeds/download/documents/export/Export?id=1ynhHZihlL241FNZEar6ibzEdhHcWJ1qXKaxMUKM-DpE&exportFormat=txt">
<img onclick = "getSounds();" class = "soundwebImgResize" src = "https://cdn3.iconfinder.com/data/icons/glypho-music-and-sound/64/music-note-sound-circle-512.png" id = "soundwebGetSoundImg"/>
</a>
Thanks for any help,
Lucas N.

If you don't want clicking the image to cause the anchor tag to load the href, then move the image tag outside of the anchor tag.

You aren't using setTimeout correctly. You should be passing in a function not a statement. So, for example, instead of
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
you should use
setTimeout(function () { $("#soundwebGetSoundDirections").html("Please fill in Path!") },1000);
setTimeout(findFile,2000);
I think the same goes for setting the onclick attribute but I've never tried dynamically changing an onclick attribute like that.
Since you're already using jQuery you could try using .on('click'... and .off('click'... if your current setup isn't working.

Save FabricJS canvas as JPG/PNG upon link click

I am using FiberJS to create a template and I used the following way to trigger save popup upon a link click. But it does not save anything or does not return any data when canvas.toDataURL() is called.
<a id="canvasdownload" download="canvas-image.png" href="">Download</a>
$('a#canvasdownload').click(function(){
$(this).attr('href', canvas.toDataURL());
alert(canvas.toDataURL());
});
But this saves a blank image with an error. With native canvas behavior this saved properly but not after using FabricJS. How can I fix this?
Check demo.

Download Html5 canvas on click action

I am working on Html5 canvas.
Currently I am downloading image on right click and selecting an option of save image
Now i want to include DOWNLOAD button that can save and downloads the Canvas as an Image.
My code is :
var download = document.getElementById('img-download');
download.addEventListener('click', prepareDownload, false);
function prepareDownload() {
var canvas = document.getElementById("memecanvas");
document.getElementById("memecanvas").src = canvas.toDataURL();
Canvas2Image.saveAsPNG(canvas);
}
This simply enables to download it via right click.
Please help me how to deal with this on Button click action.
Thanks in advance!

Just create a button, give it an ID of, say, "download-button".
Then instead of adding the click event handler to the img-download element, assign it to the button using it's ID.

javascript gallery not displaying main image when thumbnails clicked

I'm wanting to create a gallery which displays a main image when the thumbnails are clicked. When clicked the thumbnails rather than altering the image in the webpage take the user to the file where the image is kept and display it in the top right corner.
No idea why this is happening ? Any suggestions where I'm going wrong and how to fix this ?
<img id="veiwer" src="images/motorbike-girl.jpg" />
<div id='thumbs'>
<a href='images/chicks.jpg' onclick="gallery(this);"><img src='images/chicks-
thumb.jpg'/></a>
<a href='images/motorbike-girl.jpg' onclick="gallery(this);"><img
src='images/motorbike-girl-thumb.jpg'/></a>
<a href='images/yamaha-thumb.jpg' onclick="gallery(this);"><img
src='images/yamaha.jpg'/></a>
</div>
function gallery(change) {
document.getElementById('viewer').src = change.href;
}

The problem occurs because of the default behavior of the anchor tag : by default, when you click a link, you get to the page/document it's pointing to.
So, in your javascript you would need to tell "Don't run the default behavior, only what I want to do". It's done through the preventDefault() method of the event.
cfr this fiddle for a working example, where I removed also the inline javascript (= onclick attribute).