Unlinking an image to itself

In this example below you will see how to do a Unlinking an image to itself with some HTML / CSS and Javascript

I had a request to remove links around images that are linking to the same image. Here's what I came up with.

Thumbnail
This awesome code was written by angelagiese, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright angelagiese ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Unlinking an image to itself</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Unlinking an image to itself</h1>
<p>If the parent of the image is a link to that same image, remove the link.</p>
<a href="https://media.giphy.com/media/Omm0mjX3nbCik/giphy.gif"><img alt="giphy.gif" class="image-1 jive-image" src="https://media.giphy.com/media/Omm0mjX3nbCik/giphy.gif" style="height: auto;"></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/angelagiese/unlinking-an-image-to-itself-GrZzWG */
/* for making the demo prettier */
body {
  text-align: center;
}

h1 {
  font-weight: normal;
}


/*Downloaded from https://www.codeseek.co/angelagiese/unlinking-an-image-to-itself-GrZzWG */
$("img.jive-image").each(function(index, value) {  
    var image = $(value);
    if (image.parent().is("a")) {
        var imgSrc = image.attr("src");
        var linkSrc = image.parent().attr("href");
        if (imgSrc === linkSrc) {
            image.unwrap();
        }
    }
});

Comments