0

クリックするとフルサイズに拡大し、もう一度クリックすると元のサイズに戻る写真のギャラリーを作成しています...私の問題は、複数の写真をクリックすると、それらがすべて拡大され、最初のものは元のサイズに戻ります。拡大するためにクリックしたときに他のすべての写真を強制的に小さいサイズに戻す簡単な方法があるかどうか、または拡大された写真から離れた場所をクリックする必要があるようにする方法があるかどうか疑問に思っています小さいサイズに戻します。

これが私のコードです。下部にあるフィドルリンクです（2番目の写真をクリックしてから最初の写真をクリックして、私が話していることを確認してください）

        <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')、新しい画像の拡大を扱うクリックハンドラー セクションの先頭に何かを追加することです。そうすれば、別の画像をクリックして拡大すると、拡大された他のすべての画像が縮小されます。

必要に応じて、現在開いている変数を格納する変数を作成し、同じ方法で縮小することもできますが、すべてを関数スコープ内に保持するため、上記の提案の方が優れていると思います。

一般的な「クリックアウェイ」機能の場合、 .blur の使用も検討できますが、.focusを使用してクリックしたときに画像にフォーカスを与える必要があります。

于 2013-10-27T02:12:10.583 に答える