Question

我有缩略图坐在一个较大的图像旁边，当你点击缩略图时，它会改变点击缩略图的较大图像，但它是缩小缩略图的大小而不是保持它的原始大小，有没有办法在图像变化时停止调整大小？

我使用的代码是：

function changeImage(x){
    document.getElementById('image').src = x.src;
}

<img src="<?php echo $image['thumb']; ?>" onclick="changeImage(this)" />

要预览它，请在此处查看：http://nthwondr.com/index.php?route=product/product&path=59&product_id=61

我不能使用设定的高度宽度，因为不同设备上的图片尺寸会不同。

谢谢你们。

Answer 1

您可以通过检索点击的缩略图的宽度和高度来设置大图像的宽度和高度，并在更改大图像的来源后将这些值乘以2或3。

修改

//this will get the properties of the passed element function getElProps(el,attr){ //checking if the browser is Internet Explorer isIEX = navigator.userAgent.match(/Trident/); whaT_ = isIEX ? el.currentStyle : window.getComputedStyle(el); getWhaT_ = isIEX ? whaT_.getAttribute(attr) : whaT_.getPropertyValue(attr); return getWhaT_; } function changeImage(x){ document.getElementById('image').src = x.src; height_ = getElProps(x,'height'); width_ = getElProps(x,'width'); document.getElementById('image').style.height = parseInt(height_)*3 + 'px'; document.getElementById('image').style.width = parseInt(width_)*3 + 'px'; } <img src="<?php echo $image['thumb']; ?>" onclick="changeImage(this)" />

Answer 2

您可以使用HTML5 data属性，例如

<img src="<?php echo $image['thumb']; ?>" data-high-res="<?php echo $image['high-res']; ?>" />

属性data-high-res将具有拇指的高分辨率图像，而不是使用jQuery

  $('img').click(function () {
        var $element = $(this),
            $highResImg = $element.data('high-res');
        $('#imgHighRes').attr('src', $highResImg);
    });

而DEMO应该解释更多

使用changeImage保持图像的原始大小

2 个答案: