Question

我已经建立了一个灯箱来展示我的大图像。我有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;
}

Answer 1

对不起男人，在看了你的网站后，我不知道你想要做什么。我会使用jQuery的内置对话框或获取灯箱插件。无论是那个或只是下载一个免费的图库（搜索谷歌的“免费jquery图库”）。这会容易得多。：）

没有显示真实情况

1 个答案: