如何推廣生成模態圖像的代碼來處理多個圖像

Question

我的最終目標是生成一個可點擊的小圖像網頁。點擊時，顯示小圖像的模態圖像。

我複製從W3Schools的網站下面的代碼：

// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the image and insert it inside the modal - use its "alt" text as a caption 
 
var img = document.getElementById('myImg'); 
 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 
img.onclick = function(){ 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    captionText.innerHTML = this.alt; 
 
} 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
}

/* Style the Image Used to Trigger the Modal */ 
 
#myImg { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
#myImg:hover {opacity: 0.7;} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    padding-top: 100px; /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; /* Full width */ 
 
    height: 100%; /* Full height */ 
 
    overflow: auto; /* 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: 80%; 
 
    max-width: 700px; 
 
} 
 

 
/* Caption of Modal Image (Image Text) - Same Width as the Image */ 
 
#caption { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
    text-align: center; 
 
    color: #ccc; 
 
    padding: 10px 0; 
 
    height: 150px; 
 
} 
 

 
/* Add Animation - Zoom in the Modal */ 
 
.modal-content, #caption { 
 
    -webkit-animation-name: zoom; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: zoom; 
 
    animation-duration: 0.6s; 
 
} 
 

 
@-webkit-keyframes zoom { 
 
    from {-webkit-transform:scale(0)} 
 
    to {-webkit-transform:scale(1)} 
 
} 
 

 
@keyframes zoom { 
 
    from {transform:scale(0)} 
 
    to {transform:scale(1)} 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 35px; 
 
    color: #f1f1f1; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    transition: 0.3s; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #bbb; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
/* 100% Image Width on Smaller Screens */ 
 
@media only screen and (max-width: 700px){ 
 
    .modal-content { 
 
     width: 100%; 
 
    } 
 
}

<!-- Trigger the Modal --> 
 
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- The Close Button --> 
 
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 
 

 
    <!-- Modal Content (The Image) --> 
 
    <img class="modal-content" id="img01"> 
 

 
    <!-- Modal Caption (Image Text) --> 
 
    <div id="caption"></div> 
 
</div>

我可以看到，代碼是硬編碼到一個形象，我想實現我的目標，最簡單的方法將圖像的id傳遞給js腳本。所以我已經開始修改HTML這樣的：

<!-- Trigger the Modal --> 
 
<img class="images" id="img_1" src="images/Cairns1-041-3-Water-Safari.gif" alt="Water Travellers" width="300" height="200"> 
 
<img class="images" id="img_2" src="images/Cairns1-047-2-Handle-With-Care.gif" alt="Manhandle" width="300" height="200"> 
 
<!-- img_3 etc -->

我在正確的軌道上，如果是這樣，我怎麼傳圖片ID的腳本？我的部分目標是儘可能多地理解代碼，而不是僅僅複製插件。

Answer 1

這是我做的JSfiddle，它顯示了我的答案可以如何與問題合併。希望它可以幫助任何使用w3schools的人。 https://jsfiddle.net/bdneyq4s/1/

是的，你是在正確的軌道上，儘管如果你設置了一個事件觀察者，ID是沒有必要的。

您需要添加顯示模式中圖像的大版本所需的數據。 （如果您使用的模態+縮略圖相同的圖像，則不用擔心使用額外的屬性）

例如，你可以有這樣的：

<img class="modal-image" src="path/to/thumbnail.jpg" alt="Caption to show" data-bigImage="path/to/big-image.jpg" /> 

然後你就可以創建一個事件觀察器，它將監聽使用modal-image類的所有元素上的點擊事件。從那裏你可以從點擊元素中獲取data-bigImage和alt屬性，並使用它填充模態的內容。

你說你不想複製和粘貼代碼，所以我沒有寫出來JavaScript時會做到這一點，但如果你需要我，我將修改我的回答顯示瞭如何一些例子可以辦到。

編輯：我已經添加了下面的代碼片段來展示它是如何完成的一個非常基本的例子。我使用modal-image類爲每個圖像創建了一個事件觀察者，並將模式中的圖像替換爲新的圖像屬性。 （您可以點擊小縮略圖以瞭解其工作）

// Select all images that have the class modal-image 
 
var image = document.getElementsByClassName("modal-image"); 
 

 
// to set an event observer on each element 
 
for(var i=0; i<image.length; i++){ 
 
    image[i].onclick = function() { 
 
    \t // get the two values we need from the image 
 
    // i'm using the alt as the caption 
 
\t \t var 
 
     bigImage = this.getAttribute('data-bigImage'), 
 
     caption = this.getAttribute('alt'); 
 
    
 
\t \t replaceModalImage(bigImage, caption); 
 
    } 
 
} 
 

 

 
/* 
 
* Replace the modal image's source in order to display the new image 
 
* 
 
* @param src Source of the new image 
 
* @param caption Caption to show with the modal 
 
*/ 
 
function replaceModalImage(src, caption){ 
 
\t var 
 
    \t img = document.getElementById('big-image'), 
 
    captionContainer = document.getElementById('caption'); 
 
    
 
    img.setAttribute('src', src); 
 
    img.setAttribute('alt', caption); 
 
    captionContainer.innerHTML = caption; 
 
    
 
}

.modal-image{ 
 
    /* this is just to make it small like a thumbnail, use a small image in production */ 
 
    width: 100px; 
 
} 
 

 
img{ 
 
    max-width: 100%; 
 
} 
 

 
#modal{ 
 
    background: #999; 
 
    width: 600px; 
 
    padding: 20px; 
 
}

<!-- thumbnail container --> 
 
<div class="thumbnails"> 
 
    <!-- src = small image, data-bigImage = big image src --> 
 
    <img class="modal-image" src="http://vignette4.wikia.nocookie.net/geometry-dash/images/4/4b/GearSawblade01.png" alt="Caption to show" data-bigImage="http://simpleicon.com/wp-content/uploads/gear-8.png" /> 
 
    <img class="modal-image" src="https://ak1.ostkcdn.com/images/products/6626651/6626651/Cottage-Oak-Dining-Table-P14192779.jpg" alt="Caption to show" data-bigImage="http://www.ikea.com/PIAimages/0106117_PE253936_S5.JPG" /> 
 
</div> 
 

 
<!-- modal html --> 
 
<div id="modal"> 
 
    <div id="image"><img id="big-image" src="" alt="" /></div> 
 
    <div id="caption"></div> 
 
</div>