获取要显示的图像的alt

Hi guys I can't seem to get my code to run on this site. The only problem I have is I have a modal image gallery and I want to show the image "alt" when I enlarge the image. I am a novice when it comes to javascript but I know something needs to be added to be able to show the alt when the image grows in size. I just want people to see where is image comes from when they open the image.

嗨伙计们,我似乎无法让我的代码在这个网站上运行。我唯一的问题是我有一个模态图库,我想在放大图像时显示图像“alt”。对于javascript我是新手,但我知道需要添加一些东西才能在图像大小增加时显示alt。我只是希望人们看到图像打开图像时的来源。

Image of before clicking on image Image of modal gallery

点击图像之前的图像模态图库的图像

As shown in the images I want the alt of the image to be shown underneath the modal/lightbox

如图所示,我希望图像的alt显示在模态/灯箱下方

Hope you can help me :)

希望你能帮我 :)

Regards Francois

< script >
  function onClick(element) {
    document.getElementById("img01").src = element.src;
    document.getElementById("modal01").style.display = "block";

  } < /script>

/* Style the Image Used to Trigger the Modal */

ImgHolder {
  display: flex;
  justify-content: center;
  width: 100%;
}
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  width: 110px;
  height: 115px;
  margin-right: 5px;
  margin-top: 5px;
}
.myImg:lastchild {
  margin-right: 0;
}
.myImg:hover {
  opacity: 0.7;
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1600;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  padding-bottom: 20px;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: scroll;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}
/* Modal Content (Image) */

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
}
/* Add Animation - Zoom in the Modal */

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  -moz-animation-name: zoom;
  -moz-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
/* The Close Button */

.close {
  position: absolute;
  top: 50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #755378;
  text-decoration: none;
  cursor: pointer;
}

<div class="ImgHolder">
  <img src="../../Photoshop converted/Soweto/Cooling-Towers-Soweto.jpg" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
</div>

<div id="modal01" class="modal" onclick="this.style.display='none'">
  <span class="close">&times;</span>
  <img id="img01" class="modal-content">
</div>

4 个解决方案

#1

Please check this working demo `

请检查这个工作演示`

<a id="a">
    <img alt="hello world" class='myImg' src="http://placehold.it/150x150">
</a>

var $a = document.getElementById("a");
var $img = $a.getElementsByTagName("img")[0];
console.log($img.alt);

http://jsfiddle.net/xnkjn/`

#2

You could do it simply like this:

你可以这样做:

function onClick(element) {
    var inputelement = document.getElementById("img01");
    var alttext = element.getAttribute("alt");
    var textbox = document.getElementById('alttext');
    inputelement.src = element.src;
    textbox.innerHTML = alttext;
    document.getElementById("modal01").style.display = "block";
  }

/* Style the Image Used to Trigger the Modal */

ImgHolder {
  display: flex;
  justify-content: center;
  width: 100%;
}
#alttext {
  position: absolute;
  text-align: center;
  width: 400px;
  height: 50px;
  left: 50%;
  margin-left: -200px;
  bottom: 125px;
  color: #FFFFFF;
}
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  width: 110px;
  height: 115px;
  margin-right: 5px;
  margin-top: 5px;
}
.myImg:lastchild {
  margin-right: 0;
}
.myImg:hover {
  opacity: 0.7;
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1600;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  padding-bottom: 20px;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: scroll;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}
/* Modal Content (Image) */

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
}
/* Add Animation - Zoom in the Modal */

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  -moz-animation-name: zoom;
  -moz-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
/* The Close Button */

.close {
  position: absolute;
  top: 50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #755378;
  text-decoration: none;
  cursor: pointer;
}

<div class="ImgHolder">
  <img src="https://www.allaboutbirds.org/guide/PHOTO/LARGE/bald_eagle_adult2.jpg" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
</div>

<div id="modal01" class="modal" onclick="this.style.display='none'">
  <span class="close">&times;</span>
  <img id="img01" class="modal-content">
  <div id="alttext"></div>
</div>

The positioning etc is up to you.

定位等取决于你。

#3

you are only passing the modal the src of the image and not the alt.

你只是将模态传递给图像的src而不是alt。

pass the alt in your function to the modal like this:

将函数中的alt传递给模态,如下所示:

function onClick(element) {
    document.getElementById("img01").src = element.src;
    document.getElementById("img01").alt = element.alt;
    document.getElementById("modal01").style.display = "block";
} 

#4

You could use jQuery instead.

你可以改用jQuery。

1. Replace onclick="onClick(this)"with onClick="onClick($(this).prop('alt'))"

用onClick =“onClick($(this).prop('alt'))替换onclick =”onClick(this)“

2. In your OnClick function only use this line: $('.lightbox_bottom').after(element);

在你的OnClick函数中只使用这一行:$('。lightbox_bottom')。after(element);

.lightbox_bottom is the class name of your lightbox. The alt value will be inserted after that element. You may need to change this selector.

.lightbox_bottom是灯箱的类名。 alt值将插入该元素之后。您可能需要更改此选择器。