Question

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

Image of before clicking on image Image of modal gallery

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

希望你能帮助我:)。

此致弗朗索瓦

< 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>

Answer 1

你可以这样做：

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

定位等取决于你。

Answer 2

请查看此工作演示`

<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/`

Answer 3

您只是传递了模式的src，而不是alt。

将函数中的alt传递给模态，如下所示：

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

Answer 4

你可以改用jQuery。

将onclick="onClick(this)"替换为onClick="onClick($(this).prop('alt'))"
在OnClick功能中，只使用以下行： $('.lightbox_bottom').after(element);

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

获取要显示的图像的alt

4 个答案: