We Keep Coding

Lens Studio - How can I get the name or properties of the image I clicked?

There are multiple clickable images on the screen. I want to keep which image I clicked in a variable. How can I do this with javascript? Can you help me, please ?

You can add a listener on the images click event, then take the src for example of the image clicked and store it in a variable like this:
$('img').click(function (e) {
var clickedImge = '';
clickedImge = e.target.src;
});

Jquery delete button is selecting all image srcs and ids (Multiple Upload)

I am trying to make a delete button for the ImageUploader.
I don't have any problems with selecting the image and put it inside the div element of my page, it's all about deleting the current image.
When i do click on my delete button it's giving my all the id's and src's and not the selected current one with my delete button. look at my delete button pls where i do console log the src and the id. It's giving my all the id's and src's and i do want the id and src from the current one.
Does someone has a solution?
This is the select piece which works perfect.
frame.on( 'select', function() {
// Get media attachments details from the frame state
selections = frame.state().get('selection');
selections.map(function(attachment){
attachment = attachment.toJSON();
// Send the attachment URL to our custom image input field
imgContainer.append(
'<li>'
+ '<img data-attachment-id="id-media-1993'+attachment.id+'" src="'+attachment.url+'" class="gallery-thumbnail" alt="'+attachment.title+'" style="max-width:150px; max-height:150px;"/>'
+ '<a class="delete-custom-img" href="#">Remove Image</a>'
+ '</li>');
// Send the attachment id to our hidden input
imgIdInput.val(attachment.id);
console.log(attachment);
});
});
// Finally, open the modal on click
frame.open();
});
This my delete button
imgContainer.on( 'click', delImgLink, function(event){
event.preventDefault();
var galleryThumbnail = $('.gallery-thumbnail');
var galleryThumbnailID = $('.gallery-thumbnail').data('attachment-id');
var galleryThumbnailSrc = $('.gallery-thumbnail').attr('src');
$(galleryThumbnail).each(function(){
var imgSrc = $(this).attr('src');
console.log(imgSrc);
});
$(galleryThumbnail).each(function(){
var imgIDs = $(this).data("attachment-id");
console.log(imgIDs);
});
});
output image id in console

You can select parent element from the button and from there look for the things you want to find.
something like this
var img = $(this).closest('li').find('.gallery-thumbnail');
var galleryThumbnail = img;
var galleryThumbnailID = img.data('attachment-id');
var galleryThumbnailSrc = img.attr('src');

At first I think it would be less confusing to add the event handler like this:
$('.delete-custom-img').click(function() {...});
or
$('.delete-custom-img', imgContainer).click(function() {...});
if there are other elements with this class outside imgContainer that you don't want to add the event handler to.
But that's personal preference I guess, so to your question:
The problem is that you get all occurrences of '.gallery-thumbnail' on the page because you don't specify any scope for jQuery to look in (like with the imgContainer above).
So you're in the scope of the delete button when clicking on it. In your generated markup it shares the same parent with the thumbnail so you could do something like this:
var galleryThumbnail = $('.gallery-thumbnail', $(this).parent());
The second argument specifies the scope for jQuery to search for elements with the '.gallery-thumbnail' class in.
Haven't tested it but I'm pretty sure this should solve your problem.

use delegate to change source of img when clicked

I created a button that will take in a website url and then display stars to collect a website rating. That part works fine. When trying to click on the stars to highlight the clicked and all prev (prevAll) stars and change the source to staron.gif but nothing happens on click. I want to use the delegate function to do this, and then a function. My function is not working.
$('#websiteButton').mousedown(function() {
var inputSite = prompt("Enter one of your favorite website urls");
var appendHTML = "<div class=\"webfav\"><a href='"+inputSite+"'>"+inputSite+"</a> <img id=\"s1\" src=\"staroff.gif\"/><img id=\"s2\" src=\"staroff.gif\"/><img id=\"s3\" src=\"staroff.gif\"/><img id=\"s4\" src=\"staroff.gif\"/><img id=\"s5\" src=\"staroff.gif\"/> <br></div>";
$('#sect2').append(appendHTML);
});//end of add favorites
$('.webfav').delegate('img', 'click', function() {
$(img, this).attr('src', 'staron.gif');
$(img, this).prevAll().attr('src', 'staron.gif');
});
I've also tried just this and this.id

I ended up just needing to move "});//end of add favorites" to the bottom after the delegate function executed. It was executing before the stars were added to the page the way I had it.

JS load image on click

I need to load an image, js need to get link url and print this image on screen.
But it is not working.
What is wrong with my script? what can I do to make it work and improve it?
html
<div id=img></div>
<div id=loading></div>
<a href=http://png-5.findicons.com/files/icons/1580/devine_icons_part_2/128/my_computer.png class=postmini>Open image 1</a>
<br>
<a href=http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/smile_icon.jpg class=postmini>Open image 2</a>
js
$(function() {
$(".postmini").click(function(){
var element = $(this);
var I = element.attr("href");
$("#loading").html('<img src="loader.gif" align="absmiddle"> loading...');
$("#loading").ajaxComplete(function(){}).slideUp();
$("#img").append(I);
});
});
https://jsfiddle.net/u6j2udzb/
and this loading div, what I need to do to make it work properly?

You are missing a lot and have a lot you don't need. I have commented out where you don't need items. In particular you don't need a loading because the image will be there before they see that. However, if you do want it still, you should be loading it underneath the image you are loading. So it gets covered by the image. I can update it with that if you'd like.
What you are missing is actual code to turn the href into an image source and you are not removing the default action of the anchor tag so it doesn't try loading a new page when clicked.
$(".postmini").click(function(event){
event.preventDefault();
var element = $(this);
var I = element.attr("href");
//$("#loading").html('loading...');
//$("#loading").ajaxComplete(function(){}).slideUp();
// remove old image if it is already there.
$("#img").empty();
// create variable holding the image src from the href link
var img = $("<img/>").attr("src", I)
$("#img").append(img);
});
https://jsfiddle.net/3g8ujLvd/

You just have to insert an img tag into your "display div" on click on the link... to load the image... (btw your syntax errors are terrible... you have to use quotes for attributes^^)
like this for example :
$('.postmini').on('click',function(){
//do something
});
Check this : https://jsfiddle.net/u6j2udzb/8/
(done quickly for example)
Hope it helps

You are not running an ajax script. ajaxComplete is only fired after an ajax script completed.
Whenever an Ajax request completes, jQuery triggers the ajaxComplete
event. Any and all handlers that have been registered with the
.ajaxComplete() method are executed at this time.
You should ad an ajax script and than ajaxComplete will run if you registered the ajaxComplete method.

At the moment you're just placing the text from the "href" attribute on the link into the div. You need to either create an image or use the link provided as a background.
The quickest way to see this is to change make this change:
var element = $(this);
var I = element.attr("href");
$("#loading").html('<img src="loader.gif" align="absmiddle"> loading...');
$("#loading").ajaxComplete(function(){}).slideUp();
// $("#img").append(I);
$("#img").html("<img src='"+I+"' />");

$('.postmini').on('click',function(e){
e.preventDefault();
$('#loading').html('<img src="'+this.href+'">').children('img').one('load',function(){$(this).parent().slideUp('slow');});
});
Noticed I used on instead of click this allows you to use this.href rather than a more lengthy $(this).attr('href'). I also used .one on a child image element to find out if the image has loaded.
But I've just realised that this is useless because you want to have a loader. Ma bad.
$('.postmini').on('click',function(e){
e.preventDefault();
//best have the loader.gif showing on default before the load is complete.
var img=$('<img class="loadedImage">');
img.src=this.href;
//img.css({display:none;});//remove this if you've enter CSS .loadedImage{display:none;}
$('#loading').append(img).slideDown('slow',function(){$(this).children('.loadedImage').one('load',function(){$(this).fadeIn('slow');$(this).siblings('img[src="loader.gif"]').hide();});});
});
This method is what you're looking for. Basically you want to click the link, stop the default action of going to the link, make a new image element and set the src, make sure it's hidden before load, add the new image element to loading, slide up parent loading, check for load and fade in :)

Try and run this simple snippet
$('#myButton').click(()=>{
let imgUrl = $('#imgUrl').val();
$.get(imgUrl)
.done(() => {
$('img').attr('src', imgUrl);
$('#imgText').text('');
})
.fail(() => {
$('#imgText').text('Image does not exist');
$('img').attr('src', '');
})
})
img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Image url: <input type="text" id="imgUrl" value="https://upload.wikimedia.org/wikipedia/commons/7/75/Woman_mechanic_working_on_engine_%28cropped%29.jpeg"><br>
<button id="myButton" type="button">click here to load image</button>
<div id="imgText"></div>
<img>

Jquery .ClickOut Event

Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...

Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});

It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?