单击远离图像以在展开后将其缩小

Question

我正在制作一个图片库，当你点击它们时，它们会扩展到完整的尺寸，当你再次点击它们时，它们会缩小到正常的尺寸……我的问题是，如果我点击多张图片，它们都会放大和堆叠，而第一张图片没有恢复到原来的大小。我想知道是否有一种简单的方法，当点击放大时，强制所有其他图片回到较小的尺寸，或者是否有一种方法可以让它变得更小，所以你必须单击放大的图片之外的某个地方，让它返回到较小的尺寸。

下面是我的代码，底部的小提琴链接(单击第二张图片，然后单击第一张来查看我正在谈论的内容)

        <div id="Gpic1">
        <img class='galleryPics' id='pic1' src='http://i.imgur.com/urxD24P.jpg?1'>
    </div>
    <div id="Gpic2">
        <img class='galleryPics' id='pic2' src='http://i.imgur.com/JbJXjsf.jpg?1'>
    </div>


    #Gpic1 {
        float: left;
        width: 187px;
        height: 280px;
        margin-left: 5%;
        display: inline-block;
        background: black;
        padding: 0;
    }
    #pic1 {
        width: 187px;
        height: 280px;
    }
    #Gpic2 {
        float: left;
        width: 187px;
        height: 280px;
        margin-left: 5%;
        display: inline-block;
        background: black;
        padding: 0;
    }
    #pic2 {
        width: 187px;
        height: 280px;
    }
    .enlarged {
        border: 10px solid #e5dbcc;
        position: absolute;
        -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
        -moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
        box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
    }


 $('#Gpic1').hover(function () {
     if (!$(this).find('img').hasClass('enlarged')) {
         $(this).find('img').fadeTo(500, 0.5);
     }
 }, function () {
     $(this).find('img').fadeTo(500, 1);
 });

 $('#pic1').click(function () {
     $(this).fadeTo(0, 1);
     if ($(this).hasClass('enlarged')) {
         $(this).removeClass('enlarged');

         $(this).stop().animate({
             width: 187,
             height: 280
         }, 0,

         function () {
             $(this).parent().removeClass('ontop');
             $('#Gpic1').css('background', 'black');
         });
     } else {
         $(this).addClass('enlarged')
         $(this).parent().addClass('ontop');
         $(this).stop().animate({
             width: 533,
             height: 800,
             left: +100,
             bottom: +50
         }, 200);
         $('#Gpic1').css('background', 'none');

     }

 });

 $('#Gpic2').hover(function () {
     if (!$(this).find('img').hasClass('enlarged')) {
         $(this).find('img').fadeTo(500, 0.5);
     }
 }, function () {
     $(this).find('img').fadeTo(500, 1);
 });

 $('#pic2').click(function () {
     $(this).fadeTo(0, 1);
     if ($(this).hasClass('enlarged')) {
         $(this).removeClass('enlarged');

         $(this).stop().animate({
             width: 187,
             height: 280
         }, 0,

         function () {
             $(this).parent().removeClass('ontop');
             $('#Gpic2').css('background', 'black');
         });
     } else {
         $(this).addClass('enlarged')
         $(this).parent().addClass('ontop');
         $(this).stop().animate({
             width: 533,
             height: 800,
             left: +100,
             bottom: +50
         }, 200);
         $('#Gpic2').css('background', 'none');

     }

 });

编辑-小提琴：http://jsfiddle.net/Td6tT/4/

Answer 1

只需使用jQuery函数选择给定类的所有图片元素“放大”，并在放大下一个元素之前缩小它们：

$("img.enlarged").removeClass("enlarged");

因此，在您的代码中，例如：

$('#pic1').click(function () {
 $(this).fadeTo(0, 1);
 if ($(this).hasClass('enlarged')) {
     $(this).removeClass('enlarged');

     $(this).stop().animate({
         width: 187,
         height: 280
     }, 0,

     function () {
         $(this).parent().removeClass('ontop');
         $('#Gpic1').css('background', 'black');
     });
 } else {

     //Add the following line
     $("img.enlarged").removeClass("enlarged");

     $(this).addClass('enlarged')
     $(this).parent().addClass('ontop');
     $(this).stop().animate({
         width: 533,
         height: 800,
         left: +100,
         bottom: +50
     }, 200);
         $('#Gpic1').css('background', 'none');

     }

 });

瞧！

Answer 2

确实有几种方法可以做到这一点，这取决于你对不同方法的看法。也许最容易做的事情是，因为您已经将其建立在类的基础上，所以可以在处理放大新图像的clickhandler部分的开头添加类似$('.enlarged').removeClass('enlarged')的内容。这样，当您单击放大另一个图像时，所有其他放大的图像都将缩小。

如果你愿意，你可以创建一个变量来存储当前打开的任何一个变量，并以同样的方式缩小它，尽管我认为上面的建议更好，因为它将所有内容都保持在函数范围内。

对于一般的“点击”功能，你也可以考虑使用.blur，但是当使用.focus点击图片时，你需要给图片提供焦点。