4

我几乎是 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 规则。到目前为止，我所拥有的是我从拉扎雷维奇的方法中得到的，即：

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

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

我会很感激一些帮助，以便我可以继续这个项目。任何想法如何使这项工作？也许是一个 JS 函数，它告诉机器根据点击的图像使用一个或另一个 CSS 规则？我真的被困在这里了...

提前致谢！

4

2 回答 2

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

于 2013-03-14T13:02:16.567 回答
1

使用类而不是 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'));
});
于 2013-03-14T13:06:28.107 回答