切换图库内部图像的宽度，点击其中一个图标时，其他图标被禁用

我有一个带有缩略图图像的图库。当点击一个缩略图时，其宽度将动画并显示完整图像。当重新点击它时，它会缩回原来的大小。我已经通过切换功能实现了它，并且工作正常。切换图库内部图像的宽度，点击其中一个图标时，其他图标被禁用

问题是，当我点击一个缩略图时，我想要禁用其他缩略图，但我无法实现这一点。那可能吗？

下面是HTML：

<figure class="grid_4 alpha medium"><img class="medium pl pt" src="images/gallery/1.jpg" /><span class="rollover opa2"></span></figure> 
<figure class="grid_2 small"><img class="small pr pt" src="images/gallery/4.jpg" /><span class="rollover opa2"></span></figure> 
<figure class="grid_4 omega medium"><img class="medium pr pt" src="images/gallery/5.jpg" /><span class="rollover opa2"></span></figure>

这是jQuery的：

$('.gallery figure').toggle(function(){ 
    $(this).find('img').animate({width:620, height:620}, 500, "easeOutExpo"); 
},function(){ 
    $('.gallery .medium').animate({width:300, height:300}, 500, "easeOutExpo"); 
    $('.gallery .small').animate({width:140, height:140, marginTop:0}, 500, "easeOutExpo"); 
});

我不是jQuery的，伟大的，所以如果任何人都可以是任何帮助，我将非常感激。

非常感谢，杰夫

来源

2012-10-19 Jeff

而不是抑制触发事件（这增加了开销），我会建议使用简单标志变量来确定是否图像当前扩展到全尺寸。

请参见下面的演示： http://jsfiddle.net/adamb/yWSBx/

var flag = false; 

$('.foo').click(function() { 
    if($(this).hasClass('focus')) { 
     ////////shrink image 
    } 
    else { 
     if(!flag) { 
      ////////expand image 
      flag = true; 
     } 
    } 
});

来源

2012-10-19 15:46:16 adamb

嗨adamb，感谢你的帮助。我已经使用你的代码，现在我已经设法禁用未展开的图像，但是一旦第一个图像被点击并展开，如果再次点击它，它不会缩回。 [http://jsfiddle.net/2TPfn/]是我正在使用的代码，你能发现它有什么问题吗？它在点击一次后会工作（图片展开），但不会缩回。我不知道它为什么不能在小提琴上工作，但它在本地工作。再次感谢您的努力。 – Jeff

对不起，这是正确的http://jsfiddle.net/2TPfn/ – Jeff

我已经添加了一个真正的国旗xtra else语句，它的工作原理！对你的提示有巨大的帮助，你一直很有帮助。 – Jeff

切换图库内部图像的宽度，点击其中一个图标时，其他图标被禁用

回答

相关问题