javascript - 单击不同的缩略图时应用不同的规则(jquery)

Question

我几乎是 HTML/CSS 领域的新手，自从我开始构建我的第一个网站以来，我就一直面临着 jquery 挑战。我想使用缩略图创建一个由 jquery 支持的图片库。我遵循的教程是 Ivan Lazarevic 的 ( http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/ )。我还通过这个线程使用了 Stackoverflow 的论坛:http://goo.gl/ILzsx .

他提供的代码将显示的大图像替换为已单击的缩略图的较大版本。这似乎工作得相当顺利，但仅适用于具有相同方向的图片。以下代码出现在两个不同的文件上，从而在水平图像和垂直图像之间建立差异:

   <div id="mainImage">
     <img id="largeImage" src="Images/Projects/UOW/UOWII_large.jpg"/>
   </div>

和:

   <div id="mainImageVERTICAL">
     <img id="largeImageVERTICAL" src="Images/Projects/UOW/UOWI_large.jpg" />
   </div>

我为 largeImage 和 largeImageVERTICAL 参数创建了不同的 CSS 规则，具体取决于图像是纵向还是横向。

   #largeImage { 
   position: fixed;
   height: 83%;
   width:auto;
   top: 15%;
   left: 5%;
   }

和:

   #largeImageVERTICAL { 
   position: fixed;
   height: 83%;
   width:auto;
   top: 15%;
   left: 36.36%;
   }

这两条规则只是将图像放在屏幕的不同位置。但是，我想知道的是如何修改我的代码，以便我可以创建一个包含纵向和横向图像的页面，应用属于每个图像的 CSS 规则。到目前为止，我所拥有的是我从 Lazarevic 的方法中得到的，即:

   $('#thumbs img').click(function(){
   $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
   });

这段代码只是用更大的图片替换了缩略图。如前所述，我希望能够将正确的规则应用于正确的图像，并且我假设这必须通过一些我几乎一无所知的 JS 编码来实现。

我希望能得到一些帮助，这样我才能继续这个元素。任何想法如何使这项工作？也许是一个 JS 函数告诉机器根据点击的图像使用一个或另一个 CSS 规则？我真的被困在这里......

提前致谢!

Answer 1

有几种方法可以做到这一点。

使用 HTML5 data-*属性指定 <img> 中的哪一个应更新元素。所以:

<div id="thumbs">
    <img src="img.jpg" data-large="largeImage"/>
    <img src="anotherimg.jpg" data-large="largeImageVERTICAL"/>
</div>

然后:

$('#thumbs img').click(function(e) {
    var imageId = $(this).attr('data-large'),
        newSrc = this.src.replace('thumb', 'large');
    $('#' + imageId).attr('src', newSrc);
});

或者，使用缩略图的尺寸来确定它是纵向还是横向:

$('#thumbs img').click(function(e) {
    var $this = $(this),
        height = $this.height(),
        width = $this.width(),
        newSrc = this.src.replace('thumb', 'large');
    var imageId = (height > width) ? 'largeImageVERTICAL' : 'largeImage';
    $('#' + imageId).attr('src', newSrc);
});

无论哪种情况，您都可能需要隐藏另一个未使用的 <img>元素，这样您就不会显示之前为其他方向选择的图像。

实现此目的的一种方法是:

var alternateImageId = (imageId === 'largeImage') ? 'largeImageVERTICAL' : 'largeImage';
$('#' + alternateImageId).hide();

将以上两行添加到click上面的事件处理程序，并调用 .show()打电话后 .attr('src', ...) .