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

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

3 个答案: