點擊圖片將圖片縮小後縮小

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

真的有兩種方法可以做到這一點，這取決於你對不同方法的感受。也許最簡單的事情，因爲你已經把它放在課堂上，就是在點擊處理器部分的開始處添加一些像$('.enlarged').removeClass('enlarged')這樣的內容來處理放大新圖像。這樣，當您單擊放大另一張圖像時，所有其他放大的圖像都會縮小。

如果您願意，您可以創建一個變量來存儲當前打開的變量，並以相同的方式縮小它，儘管我認爲上述建議更好，因爲它將所有內容都保留在函數範圍內。

對於一般的「點擊」功能，您也可以考慮使用.blur，但是當您使用.focus單擊時，您需要提供圖像焦點。