1

I'm trying to open an image on click with a simple JQuery.

I'm building on the code provided here: https://stackoverflow.com/questions/54040130/is-there-a-css-option-that-links-an-html-image-to-itself#:~:text=Nice%20idea%2C%20but,Expand%20snippet

Everything works fine. However, I want to add a detail: the image should open only if the parent doesn't have an already defined href attribute. Differently the original href should open instead. Now all the parent of an image get overwritten. How can I avoid this?

On the code below, the first image should open itself. The second one should open the original href. I want to avoid to use two different classes for the two images. It should be possible to override the href only if undefined using JQuery. How can I do?

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>

<a><img src="image2.jpg" class="clickable"></a>
<a href="https://stackoverflow.com/"><img src="image1.jpg" class="clickable"></a>

script.js

$( document ).ready(function() {
    
    $("img").each(function(){
        var imgUrl = $(this).attr('src');
        $(this).parent().attr('href', imgUrl);
    }); 
    
});
prb
  • 11
  • 1

2 Answers2

1

Select the images that are children of anchors without an href attribute. The best thing is, you don't need jQuery at all for this

document.querySelectorAll("a:not([href]) img").forEach((img) => {
  img.closest("a").href = img.src;
});

// this is just for showing the result
document.querySelector("pre").textContent = document.querySelector("div").innerHTML;
/* This is just for the snippet, ignore it */
div { display: none; }
<div>
<a>
  <img src="image2.jpg" class="clickable">
</a>
<a href="https://stackoverflow.com/">
  <img src="image1.jpg" class="clickable">
</a>
</div>

<pre></pre>

The jQuery equivalent doesn't look much different and IMO isn't worth using.

$("a:not([href]) img").each((_, img) => {
  img.closest("a").href = img.src;
});
Phil
  • 157,677
  • 23
  • 242
  • 245
  • The solution without JQuery seems really elegant. But for some reason I cannot make it work. I'm not totally sure of why you set the div display to none also. Sorry, I'm quite new to JS, there is for sure something I'm getting wrong. Also the JQuery solution doesn't work – prb Sep 02 '22 at 00:02
  • Make sure your ` – Phil Sep 02 '22 at 00:03
  • Ok, thanks, it works! For some reasons if I reference the script in an external .js file it doesn't work, but if I put the code directly inside the – prb Sep 02 '22 at 00:17
  • I'm putting it before closing the

    For some reason this works: ```HTML

    ``` This doesn't: ```HTML

    – prb Sep 02 '22 at 00:36
  • Seems ok (except you have an extra `` that shouldn't be there). Any errors in your dev-tools _Console_ or _Network_ panels? Also, try clearing your cache. Cached JavaScript files can be easily out-of-date – Phil Sep 02 '22 at 00:38
  • Thanks Phil! Now it works. Probably a cache problem – prb Sep 02 '22 at 00:43
  • @prb it usually is – Phil Sep 02 '22 at 00:48
-1

PRB!

Here is one way to do it:

$('document').ready( document ).ready(function(){
    $('img').each(function(){
        let url = $(this).attr('src');
        $(this).wrap($('<a>',{
                href: url
        }));
    });
});

Explanation:

When the document is ready, it calls for each image tag and then gets the attribute of SRC, which is then added a parent <a> tag, which inturn is the URL for the image.

I hope this helps!

fox tech.
  • 65
  • 8