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

AND：

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

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

   $('#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', ...)。

Answer 2

使用class not id。

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

<强> JS

$('#largeImage').on('load', function () {
    var that = $(this);
    if (that.width() < that.height()) {
        that.addClass('portrait');
    } else {
        that.addClass('landscape');
    }
});
$('#thumbs').on('click', 'img', function () {
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

单击不同缩略图时应用不同的规则（jquery）

2 个答案: