Problem with JS - CSS - HTML - Please help me optimize my code-CodePudding

Welcome. I have a problem with my code that I use for item descriptions in my Prestashop store. The point is that when I add a description in html to the store, I do not provide the "ALT" attribute of the photo. I have scripts that do this automatically.

Here is the html code that I add to the full description of the item:

<img  src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">

After saving the changes, the code displayed in the browser looks like this:

<img  src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" alt="hearts icons vectors illustrations" width="200" height="300"><p >hearts-icons-vectors-illustrations.jpg</p>

The second part of the code that was added by the script is used to display the name of the photo when hovering over it.

And here is the problem: The point is that the script adds the same data that another script adds to the "ALT" of the photo. Without "-" and ".jpg" characters.

JS and CSS files are in the theme folder: "custom css" and "custom JS"

Here is the full code that I am using in my Prestashop store:

$(".img").wrap('<div />');
$(".img").each(function () {
  $(this).after('<p >'   $(this).attr("alt")   "</p>");
});

$(document).ready(function () {
  $("img").each(function () {
    var $img = $(this);
    var filename = $img.attr("src");
    if (typeof attr == typeof undefined || attr == false) {
      var altText = filename.substring(
        filename.lastIndexOf("/")   1,
        filename.lastIndexOf(".")
      );
      altText = altText.replace("-", " ").replace(".jpg", "");
      $img.attr("alt", altText);
    }
  });
});

.img2 { 
    max-width: 100%; 
    height: 100%;
    margin: 0; 
    padding: 0px;
    column-count: max-width;
    background-color: white;
  }

  .img-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
  }

  .img { 
    display: block; 
}

    .alt-wrap { 
      display: block;
      position: relative;
      margin: 20px;
      color: whitesmoke;
      border: 5px solid transparent;
     border-image:   linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5;
    }

    .alt-wrap p.alt {
      position: absolute;
      opacity: 0;
      left: 0; right: 0; bottom: 0;
      margin: 0;
      padding: 15px;
      font-size: 14px;
      line-height: 22px;
      background-color: transparent;
      transition: all 10ms linear;
      transition-delay: 300ms;
      text-align: center;
    }

    .alt-wrap:hover > p.alt { 
      opacity: 1; 
      transition-delay: 0s;
      text-align: center;
      font-weight: 900;
      color: white;
      font-size: 150%;
      border: 20px solid transparent;
      margin-left: 1%;
      margin-right: 1%;
      text-shadow: 0 0 10px black;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ><div ><img  src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">

Please help in changing/optimizing the above codes so that the name of the photo is displayed without the "-" and ".jpg" signs after hovering the mouse cursor

Here on hover it shows "undefined" on my website it shows "hearts-icons-vectors-illustrations.jpg" I want it to show without "-" and ".jpg"

Prestashop version 1.7.7.3

CodePudding user response：

it's showing undefined that's why i am doing it by adding innerHTML $(".alt").html(altText.replace(/-/g, " ")); I just added this line in your code it will replace all - with space so output will be what you want "hearts icons vectors illustrations"

$(".img").wrap('<div />');
$(".img").each(function () {
  $(this).after('<p >'   $(this).attr("alt")   "</p>");
});

$(document).ready(function () {
  $("img").each(function () {
    var $img = $(this);
    var filename = $img.attr("src");
    let text = filename
    if (typeof attr == typeof undefined || attr == false) {
      var altText = filename.substring(
        filename.lastIndexOf("/")   1,
        filename.lastIndexOf(".")
      );
      altText = altText.replace("-", " ").replace(".jpg", "");
      $img.attr("alt", altText);
      // it's showing undefined that's why i am doing it by adding innerHTML 
      $(this).next().html(altText.replace(/-/g, " "));
    }
  });
});

.img2 { 
    max-width: 100%; 
    height: 100%;
    margin: 0; 
    padding: 0px;
    column-count: max-width;
    background-color: white;
  }

  .img-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
  }

  .img { 
    display: block; 
}

    .alt-wrap { 
      display: block;
      position: relative;
      margin: 20px;
      color: whitesmoke;
      border: 5px solid transparent;
     border-image:   linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5;
    }

    .alt-wrap p.alt {
      position: absolute;
      opacity: 0;
      left: 0; right: 0; bottom: 0;
      margin: 0;
      padding: 15px;
      font-size: 14px;
      line-height: 22px;
      background-color: transparent;
      transition: all 10ms linear;
      transition-delay: 300ms;
      text-align: center;
    }

    .alt-wrap:hover > p.alt { 
      opacity: 1; 
      transition-delay: 0s;
      text-align: center;
      font-weight: 900;
      color: white;
      font-size: 150%;
      border: 20px solid transparent;
      margin-left: 1%;
      margin-right: 1%;
      text-shadow: 0 0 10px black;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ><div ><img  src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">

CodePudding user response：

And how to limit the operation of this script to a specific DIV?