-1

大きな画像を紹介するためにライトボックスを作成しました。4 つの画像がありますが、1 番をクリックすると 2 番が表示され、2 番をクリックすると 2 番も表示されます。つまり、2 番の画像のみが表示され、他の画像は表示されません。

ここにjquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            $('.lightbox').click(function(){
                $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
                $('.box').animate({'opacity':'1.00'}, 300, 'linear');
                $('.backdrop, .box').css('display', 'block');
            });

            $('.close').click(function(){
                close_box();
            });

            $('.backdrop').click(function(){
                close_box();
            });

        });

        function close_box()
        {
            $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                $('.backdrop, .box').css('display', 'none');
            });
        }

    </script>

自分の写真を見たいときは、写真だけを表示するようにします。

function gallery()
    {
        if ($stmt = $this->mysqli->prepare('SELECT `rank`, `img`, `navn` FROM `gallery`')) { 
            $stmt->execute();

            /* Bind resultatet */
            $stmt->bind_result($rank, $img, $navn);

            /* Hent rækker og udskriv data */
            while ($stmt->fetch()) {
            if($rank != 1)
            {
            ?>
            <a href="#" class="lightbox"><img src="/indhold/gallery/<?php echo $img;?>" alt="<?php echo $navn;?>"></a>

            <div class="backdrop"></div>
            <div class="box"><div class="close">x</div><img src="/indhold/gallery/index/<?php echo $img;?>" alt="<?php echo $navn;?>"></div>
            <?php
            }
            }

            /* Luk statement */
            $stmt->close();

        } else {
            /* Der er opstået en fejl */
            echo 'Der opstod en fejl i erklæringen: ' . $this->mysqli->error;
        }   
        }
.backdrop {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .0;
    filter: alpha(opacity= 0);
    z-index: 50;
    display: none;
}
.box {
    position: absolute;
    top: 20%;
    left: 30%;
    height: 175px;
    width: 370px;
    background: #fff;
    z-index: 51;
    padding: 10px;
    display: none;
}
.close
{
    float: right;
    margin-right: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}
4

1 に答える 1

0

申し訳ありませんが、あなたのウェブサイトを見た後、あなたが何をしようとしているのかわかりません。jQuery の組み込みダイアログ ボックスを使用するか、ライトボックス プラグインを取得します。それか、無料の画像ギャラリーをダウンロードしてください(Googleで「無料のjquery画像ギャラリー」を検索してください)。それはずっと簡単でしょう。:)

于 2013-03-27T20:33:47.187 に答える