7

ユーザーがアップロードした画像のサムネイルを並べて表示するアプリケーションに取り組んでいます。フルサイズの画像とその情報を表示できるようにしたいと思います。

私の解決策は#wrapper、画像をクリックしたときにスライドを上にして、フルサイズの画像を表示するページを表示することです（おそらくiframeの助けを借りて、まだわかりません）。

私は最初のステップを機能させようとしています。つまり、上にスライドし#wrapperます。以下のコードは機能するはずですが、スライドアニメーションは表示されません-#wrapperただ消えます。画像からクラスを削除し.image、線を追加して<p class="images">Test</p>クリックすると、スライドは機能しますが、画像のスタイルが解除されます。

では、ここで何が問題になる可能性がありますか？同じトピックに関する質問がいくつかあるのを見てきましたが、それらはすべてテーブルの使用に関するものです。

HTML：

<section id="wrapper">
    <div id="blogs">
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image1.png" />
            </div>
        </div>
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image2.png" />
            </div>
        </div>
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image2.png" />
            </div>
        </div>
    </div>
</section>

jQuery：

$('.images').click(function (){
    $('#wrapper').slideUp('slow', function() {
    });
});

CSS：

#wrapper {
    background: yellow;
    margin: 0px auto;
    width: 100%;
    height: 1000px;
    position: relative;
    top: -20px;
    left: 20px;
    text-align: left;
    margin: 0px auto;
    padding: 10px;
}

.post {
    background: white;
    width: 200px;
    height: 220px;
    margin: 0px auto;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    position: relative;
    padding: 5px;
    -moz-box-shadow: 0 0 4px 1px #777;
    -webkit-box-shadow: 0 0 4px 1px#777;
    box-shadow: 0 0 4px 1px #777;
}

.images {
    margin-left: 5px;
    margin-top: 5px;
    width: 188px;
    height: 170px;
    border: 1px solid #aaa;
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px;
}

.blogs {
    height: 400px;
}
4

1 に答える 1

1

それは私にとって良い仕事です（Chrome）。しかし、これを試してください：

<section id="wrapper">
    <div id="blogs">
        <div class="blog">
           <div class="post">
               <span class="images">
                  <img src="images/image2.png" alt="" >
               </span>
            </div>
        </div>
    </div>
</section>
于 2012-05-13T15:05:27.763 に答える