單擊時如何顯示圖像？

Question

我有一些圖像（目前它們是相同的，但稍后會有所不同），我希望單擊它時可以填滿屏幕。

img_back是顯示大圖像時的背景。 gallery_document是整個頁面，因此可以顯示img_back。

這兩個函數是（應該）：

1. 查找單擊的圖像。
2. 將其顯示在img_back上方。

 function clicked(img_src) { return img_src; } function imgDisplay() { $('.img_back').show(); $('.gallery_document').hide(); document.getElementByClass('image_large').src = clicked(img_src); } 

  body { border-top:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; } .container-fluid { position: relative; background-color: #fff; } .no-gutter > [class*='col-'] { padding-right:0; padding-left:0; } .img_back { background-color: #000000; display: none; opacity: 0.8; height: 100vh; position: relative; z-index: 1; } .gallery_img { width: 90%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10%; margin-top: 10%; } .img_div { display: block; margin-left: auto; margin-right: auto; position: relative; z-index: 2; } .gallery_img:hover { cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "row no-gutter img_back"> <div class = "image_large_div"> <img class = "image_large"/> </div> <div class = "gallery_document"> <div class = "row no-gutter gallery_imgs"> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_1" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_2" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_3" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_4" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/> </div> </div> <div class = "row no-gutter gallery_imgs"> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_5" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_6" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_7" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_8" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/> </div> </div> </div> </div> 

Answer 1

您可以制作一個JavaScript函數來獲取圖像的ID，然后onclick將ID的寬度和高度設置為70-80％或根據您的要求。

Answer 2

您實際上並不需要JavaScript，但是它使它更加穩定。 由於我不懂JavaScript，因此我操縱HTML和CSS來模擬javascript函數。

在CSS中，如果您使用類似：

    img {
        visability: hidden;
    }
    img.HOVER {
        img-size: 100%;
    }

希望對您有所幫助！

（編輯：忽略此PLZ。...有人提出了更好的解決方案）

Answer 3

我不太確定這是您要使用的功能，希望它符合您的期望。 我進行了一些更改：

• 用不同的貓圖片替換了單個圖像，因為貓的一切都更好（而不同的圖像更容易看到正在發生的事情）。
• 將已單擊的處理程序從HTML onclick屬性移到JS中。 無需將其添加到每個HTML元素上，我只需要一個單擊處理程序即可實現相同的功能。
• 稍微更改了HTML結構，以將較大的預覽圖像移動到其自己的容器中。 我不知道您的解決方案應該如何工作。
• 對於較大的預覽圖像，我使用background-image CSS屬性，當我希望圖像在保持元素的寬高比的同時填充元素時，我發現使用它更容易。
• 用本機JS調用替換了jQuery調用，您所做的一切都不需要使用jQuery。

我在代碼中添加了一些注釋來解釋發生了什么，我希望這種方式很清楚。

 /** * Handles the click event on the large preview image. Whenever it is clicked, * the element should be hidden again so the thumbnails become visible again. */ function onPreviewImageClicked(event) { // Hide the preview image by setting the "hidden" CSS class on it. previewImage.classList.add('hidden'); // Show the thumbnails again by removing the "hidden" CSS class. thumbnailGallery.classList.remove('hidden'); } /** * Handles all the clicks on the elements inside the thumbnail gallery. */ function onThumbnailClicked(event) { // Check if the clicked element has the "gallery_img" class, when it doesn't just // ignore the click. if (!event.target.classList.contains('gallery_img')) { return; } // Hide the thumbnails by setting the "hidden" class on the element. thumbnailGallery.classList.add('hidden'); // Set the backgroundImage CSS property on the preview element to the same // src as the clicked image. previewImage.style.backgroundImage = `url(${event.target.src})`; // Make the preview image visible by removing the "hidden" class from it. previewImage.classList.remove('hidden'); } const // Get the first, and in this case only, element with the class "image_preview". previewImage = document.querySelector('.image_preview'), thumbnailGallery = document.querySelector('.gallery_document'); // Attach an event handler to handle clicks on the element. previewImage.addEventListener('click', onPreviewImageClicked); // Attach an event handler to the thumbnail gallery. thumbnailGallery.addEventListener('click', onThumbnailClicked); 

 body { border-top:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; } .container-fluid { position: relative; background-color: #fff; } .no-gutter > [class*='col-'] { padding-right:0; padding-left:0; } .img_back { background-color: #000000; opacity: 0.8; height: 100vh; position: relative; z-index: 1; } .gallery_img { width: 90%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10%; margin-top: 10%; } .img_div { display: block; margin-left: auto; margin-right: auto; position: relative; z-index: 2; } .gallery_img:hover { cursor:pointer; } .col-xs-3 { float: left; width: 25%; } .image_preview { background-position: center center; background-repeat: no-repeat; background-size: contain; height: 100vh; position: absolute; top: 0; width: 100vw; z-index: 4; } .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "row no-gutter img_back"> <div class = "gallery_document"> <div class = "row no-gutter gallery_imgs"> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_1" src = "http://lorempixel.com/1280/720/cats/1"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_2" src = "http://lorempixel.com/1280/720/cats/2"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_3" src = "http://lorempixel.com/1280/720/cats/3"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_4" src = "http://lorempixel.com/1280/720/cats/4"/> </div> </div> <div class = "row no-gutter gallery_imgs"> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_5" src = "http://lorempixel.com/1280/720/cats/5"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_6" src = "http://lorempixel.com/1280/720/cats/6"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_7" src = "http://lorempixel.com/1280/720/cats/7"/> </div> <div class = "col-xs-3 img_div"> <img class = "gallery_img" id = "img_8" src = "http://lorempixel.com/1280/720/cats/8"/> </div> </div> </div> </div> <div class="image_preview hidden"></div>