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

2023年12月12日 214次阅读

我几乎是
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规则？我真的被困在这里……

提前致谢！

最佳答案 有几种方法可以做到这一点.

使用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事件处理程序中,并在调用.attr(‘src’,…)之后调用.show().

点赞