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

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.

Related

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;
});

How can I select the innerHTML when right-clicking on an e-mail link?

I am creating a Chrome Extension similar to the "Search on Google" when you right click on a selected text. However, I need mine to also work when right clicking on a mailto: e-mail link. How can I select the innerHTML, to select the e-mail address, and pass this information onto the extension to be searched?
I managed to make it work with the selected text (when highlighting text on the website) and right-clicking, but not when right-clicking on a hyperlinked e-mail address.
for(var i=0; i<numentries; i++)
{
//alert(_all[i][3]);
if(_all[i][3])
{
_all[i][0] = chrome.contextMenus.create({"title": _all[i][1], "contexts":["selection", "link"], "onclick": searchOnClick});
//alert("Menuitem created");
}
else _all[i][0] = -1;
}
var ask_options = getItem("_askoptions")=="true"? true : false;
if(ask_options){
//show separator
chrome.contextMenus.create({"type": "separator", "contexts":["selection", "link"]});
//show the item for linking to extension options
chrome.contextMenus.create({"title": "Options", "contexts":["selection", "link"], "onclick": function(){chrome.tabs.create({"url":"options.html"});}});
}
}
function searchOnClick(info, tab)
{
var itemindex = 0;
for(var i=0; i<numentries; i++)
{
if(info.menuItemId == _all[i][0])
{
//alert(i);
itemindex = i;
}
}
var ask_fg = getItem("_askbg")=="true"? false : true;
var ask_next = getItem("_asknext")=="true"? true : false;
var index = 1000;
var targetURL = _all[itemindex][2].replace("TESTSEARCH", info.selectionText);
targetURL = targetURL.replace("%s", info.selectionText);
Right now, it's only searching for the selection. When I attempt to search for a e-mail address hyperlink, the searched word is "undefined".
I need to change "undefined" to the e-mail address in the hyperlink.
Here is what I need to happen: https://i.imgur.com/2qJrwmk.png
You need to add an event listener for the contextmenu.
Using the example cat gave, I created a quick jsfiddle:
https://jsfiddle.net/kds2Lze8/
The code below adds the event listener to the document and is triggered on right click. Using that event you can then get the source element and ultimately the innerHTML.
Hope it helps!
document.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert(ev.srcElement.innerHTML);
return false;
}, false);
I'm not sure about some of the Chrome-extension-specific stuff (and your snippet is giving an error that I had trouble debugging without your HTML markup), but I think this script will demonstrate how to do what you want.
Edit:
You did indeed say you wanted to know how to run the script in response to a right-click, but I omitted that part. Sorry about that. The revised version should clarify that. It logs the innerHTML of the clicked element (although not on left-clicks) if the element is an anchor whose href attribute starts with mailto:.
// Run the 'checkAnchorForEmail' function on non-primary click events
document.addEventListener("auxclick", checkAnchorForEmail);
function checkAnchorForEmail(event){ //'event' will be our local name for any event that triggers this function
// Refer to the event's target element as 'clickedElement'
let clickedElement = event.target;
// If the element was an anchor with an 'href' attribute...
if(clickedElement.tagName.toLowerCase() === "a" && clickedElement.href){
// Define a string to identify anchors with emails
let comparedString = "mailto:";
// Only respond if the href begins with that particular string
if(clickedElement.href.indexOf(comparedString) === 0){
// Now we know the user right-clicked* an `a` element with an email address and can act accordingly
console.log(clickedElement.innerHTML);
}
}
}
// *Note that the 'auxclick' event is triggered by any non-primary button click. To isolate right-clicks, the 'contextmenu' event may be useful.
test#google.com<br />
google docs<br />
test2#google.com
One other thing:
If you need to prevent the context menu from appearing until your script has completed its tasks, you can use event.preventDefault();, but then you would need to show the menu manually later. One way to do this is by firing the 'contextmenu' event on the target element.
It's possible that doing so would cause this script to run again, creating an infinite loop. If this happens, you might try calling the preventDefault method conditionally like this (untested):
function checkAnchorForEmail(event){
// The above code goes here...
// Now we know the user right-clicked* an `a` element with an email address and can act accordingly
if(event.target.dataset.ready != "true"){ // Check the data-ready attribute
// event.preventDefault();
// event.target.dataset.ready = "true" // Set the data-ready attribute
// Make your changes to the context menu here
}
else{
// The changes have already been made, so show the context menu here
// (maybe using a technique like the one in the link below)
}
}
Here is a suggestion for using the MouseEvent interface to open the context menu, as mentioned in the in-code comments.

Custom button for fancy box

I want to add a new button beside slide show, fullscreen, close, etc.
and i need to attach a click event to that button so it gives me the src of the image that is currently showed.
well i googled a few times but didn't find a good solution, i ended up doing this and it works!
what i needed it for was to add a delete button to my fancybox.
to add a new button:
$.fancybox.defaults.btnTpl.delete = '<button data-fancybox-delete class="fancybox-button fancybox-button--delete" title="title of the icon">put your svg icon or whatever here..</button>';
to use the newly created button:
$.fancybox.defaults.buttons = [
'slideShow',
'fullScreen',
'thumbs',
'delete', // this one is the new button
'close'];
and to attach click event and get the tag which triggered fancybox (i have data-id on that tag so i can send an xhr request to server to delete that photo)
$('body').on('click', '[data-fancybox-delete]', function(e) {
var src = $('.fancybox-slide--current .fancybox-image').attr('src'); // src of the currently showing slide
var idx = $('a[href="'+src+'"]')[0]; // My Tag
});
Another way to get src and element of the current photo (thanks to #Janis in the comments)
$('body').on('click', '[data-fancybox-delete]', function(e) {
var src = $.fancybox.getInstance().current.src;
var idx = $.fancybox.getInstance().current.opts.$orig;
});
hope it helps somebody else as well.

jQuery get each background image URL of each element and wrap it in a href

So i am trying to get the background-image url of each div that has the class "client" in it. From there I want put that URL into an a href and wrap around another element so i can make it pop in a light box.
I've gotten this far but it only seems to grab the first url and then applies it to all of the elements.
// Make client rotator pop-up and get image url
jQuery(document).ready(function(){
jQuery('.client').each(function(index, el) {
var bgurl = $('.bg-cover').css('background-image');
if(bgurl != 'none') {
bgurl = bgurl.replace('url("','').replace('")','');
jQuery('.client .flex_cell_inner').wrapInner('');
};
});
});
here is the URL to the site. go to our clients section in the homepage near the bottom: http://staging.idgadvertising.com/locationconnection/
Try this. If you're trying to get the background image of each item, you should use $(this) which references the current item in the loop (in this case, each .client div as you loop over them). The way you have it now is referencing a collection of every .client div on the page.
$(document).ready(function(){
$('.bg-cover').each(function(index, el) {
var bgurl = $(this).css('background-image');
if (bgurl != 'none') {
bgurl = bgurl.replace('url("','').replace('")','');
$($('.client .flex_cell_inner')[index]).wrapInner('');
};
});
});
the bgurl will be the same in each iteration, because it is always the same selector .bg-cover if there are many it will always take the first occurance, you say you want the background-image of the .client you can use $(this) to referrence the current element in iteration
var bgurl = $(this).css('background-image');

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.

Categories