獲取圖片的替代顯示

Question

嗨，大家好，我似乎無法讓我的代碼在此站點上運行。 我唯一的問題是我有一個模態圖像庫，並且在放大圖像時想顯示圖像“ alt”。 我是JavaScript的新手，但我知道需要添加一些內容，以便在圖像尺寸增大時顯示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

您可以像這樣簡單地做到：

 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> 

定位等由您決定。

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。

1. 用onClick="onClick($(this).prop('alt'))"替換onclick="onClick(this)" onClick="onClick($(this).prop('alt'))"
2. 在您的OnClick函數中，僅使用以下行： $('.lightbox_bottom').after(element);

.lightbox_bottom是您的燈箱的類名稱。 alt值將插入到該元素之后。 您可能需要更改此選擇器。