javascript - 想要一个将图像源属性添加到更大图像的函数

Question

我想创建一个功能，因此当您按下 5 个或更多可用图像中的一个时，另一个图像将获得您单击的图像的来源。因此，当您单击图像时，将打开一个框架并显示该图像的更大尺寸。

这是小图像代码：

<img src="Media//Gallery//img_1.jpg" onclick="showLarge();" alt="Gallery Image 1" />

这是另一个图像的空白区域，需要获取小图像的来源才能显示：

<img name="largeImage" src="Media//Gallery//Image_1.jpg" alt="Large Image" />

到目前为止，这是我的 JavaScript 函数：

<script type="text/javascript">
    function showLarge() {
    var largeFrame = document.getElementById("zoomedIn");
    largeFrame.style.visibility='visible';
    }
</script>

谢谢！！

Answer 1

<img src="Media//Gallery//img_1.jpg" onclick="showLarge(this);" alt="Gallery Image 1" />
<script>
function showLarge(img)
{
    var largeFrame = document.getElementById("zoomedIn");
    largeFrame.style.visibility='visible';
    var largeImage = document.getElementById('ID_OF_LARGE_IMAGE');
    largeImage.src = img.src;
}
</script>

我想这就是你想要的。

Answer 2

<a href="URL_TO_BIG_IMAGE" class="preview">
   <img src="URL_TO_SMALL_IMAGE" alt="Gallery Image 1" />
</a>

<div class="view">
   <img hidden="hidden" id="big"/>
</div>

和 JS：

window.onload = function(){
   for (var elem in document.getElementsByClassName('preview')){
       elem.onclick = function(e){
           e.preventDefault();
           document.getElementById('big')
               .setAttribute('src', this.getAttribute('href'))
               .setAttribute('hidden', false);
       }
   }
}

Answer 3

jQuery 是你的朋友 :)

首先为您的小图像添加一个类。

$('.smallImage').click( function() {
  var imageSource = $(this).attr('src');
  // do things like enlarging, changing image source to a bigger image etc
});