-3

画像をクリックすると、画像がポップアップとして開くポップアップ機能を開発しようとしています。ここに例があります http://soumghosh.com/otherProjects/natalierosscms/175-2/

最初の画像をクリックして閉じます。次に、2 番目の画像をクリックします。イメージが繰り返されます。私が間違っていることは何ですか？何らかの理由で、ここにコードを投稿できません。

JavaScript:

$('.alignnone').click(function(){
    $('.overlay').appendTo('body');
    $('.overlay').show();

    var popImage = $('.projectContainer').show();
    var thumbHolder = $(this).parent();
    thumbHolder.css('position', 'relative');

    $(this).clone().appendTo('.projectContainer');
    var cssAtrOne = {
        padding:'10px',
        width:'110%'
    };
    popImage.appendTo(thumbHolder).css(cssAtrOne);
});

$('.closeButton').click(function(){
    $('.overlay').hide();
    $('.projectContainer').hide();
});

HTML:

<!-- clickable image -->
<img src="http://soumghosh.com/otherProjects/natalierosscms/wp-content/uploads/2013/03/T1Main.jpg" alt="T1Main" width="559" height="745" class="alignnone size-full wp-image-181">

<!-- popup -->
<div class="projectContainer" style="padding: 10px; width: 110%; display: block;">
    <img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png">
</div>
4

1 に答える 1

1

あなたはこれを持っています：

$(this).clone().appendTo('.projectContainer');

projectContainer最初の画像をクリアせずに画像を追加していますprojectContainer（したがって、画像は毎回作成され続けます）。したがって、以前の画像を消去してから、新しい画像を挿入する必要があります。

しかし、内部にprojectContainerは閉じるボタンがあり、これが少し厄介です。この問題を回避するには多くの方法がありますが、直接的な解決策は<div>、imageContainer内に別の , を導入することprojectContainerです。

HTML:

<div class="projectContainer" style="display: none; padding: 10px; width: 110%;">
    <img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png">
    <div class="imageContainer"></div>
</div>

次に、JS を変更します。

JS を変更します。

//REPLACE the contents of imageContainer, not append to it.
//$(this).clone().appendTo('.projectContainer');
$('.projectContainer > .imageContainer').html($(this).clone());

その趣旨の何かが機能するはずです。

于 2013-04-25T02:25:55.707 に答える