0

我正在制作一个图片库，当您单击它们时会扩大到全尺寸，当您再次单击它们时会缩小到正常大小......我的问题是，如果我单击多张图片，它们都会放大并堆叠而没有第一个恢复到原来的大小。我想知道是否有一种简单的方法可以在单击放大图片时将所有其他图片强制恢复为较小的尺寸，或者是否有一种方法可以使您必须单击远离放大图片的某个地方让它恢复到较小的尺寸。

这是我的代码，底部的小提琴链接（点击第二张图片，然后点击第一张看看我在说什么）

        <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/

4

2 回答 2

0

只需使用 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');

     }

 });

瞧！

于 2013-10-27T02:12:02.790 回答
0

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

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

对于一般的“clickaway”功能，您也可以考虑使用.blur，但您需要在使用.focus点击图像时赋予图像焦点。

于 2013-10-27T02:12:10.583 回答