Question

我有一个工作幻灯片，我可以让灯箱工作，但如果我从幻灯片中选择一个图像，我就无法显示灯箱。

我不想要一个可以从中选择的图库，并将所选图像放在灯箱开始的位置。我希望幻灯片显示是连续的（它是）并且只在灯箱中显示所选图像。所有这些都在一个asp.net项目中，虽然我怀疑它与它有什么关系。

我目前的幻灯片代码：

Javascript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(function () {
        $('.fadein img:gt(0)').hide();
        setInterval(function () {
            $('.fadein :first-child').fadeOut()
               .next('img').fadeIn()
               .end().appendTo('.fadein');
        },
          3000);
    });
</script>

HTML

   <div class="fadein">
       <img src="images/1.png" />
       <img src="images/2.png" />
       <img src="images/3.png" />
   </div>

CSS：

.fadein {
    position: relative;
    width: 500px;
    height: 332px;
}

.fadein img {
    position: absolute;
    left: 0;
    top: 0;
}

有人可以给我指点或指导我一个好的教程吗？我见过的所有有希望的只是让灯箱成为幻灯片，这不是我想要的。

Answer 1

幻灯片代码

<script>
    $(function () {
            $('.fadein input:gt(0)').hide();
            if ($('.fadein input').length > 1) {
                setInterval(function () {
                    $('.fadein :first-child').fadeOut()
                       .next('input').fadeIn()
                       .end().appendTo('.fadein');
                },
                  3000);
            }
    });
</script>

PopUp代码

<script>
    // escape key closes div
    $(document).keyup(function (e) {
      if (e.keyCode == 27) { // esc keycode
        $('#popUpDiv').hide();
        $('#blanket').remove();
      }
    });

    function lightbox_open() {
        window.scrollTo(0, 0);
        $('#popUpDiv').show();
        $('#blanket').show();
    }

    function lightbox_close() {
        $('#popUpDiv').hide();
        $('#blanket').remove();
    }
</script>

HTML代码

//Popup div and a semi-transparent "blanket" to indicate that the popup is the focus
    <div id="blanket" style="display: none;" onclick="lightbox_close();"></div>
    <div id="popUpDiv" style="display: none;">
        <a href="#" onclick="lightbox_close();" id="close">X</a><br />
        <asp:Image ID="popImage" runat="server" Width="250px" /><br />
        <asp:Label ID="popInfo" runat="server"></asp:Label><br /
        <asp:ImageButton ID="popSave" runat="server" ImageUrl="images/buttons/save.png" OnClick="popSave_Click" CssClass="popSave" /><br />
    </div>

    // Slideshow div
    <div id="slideshow" runat="server" class="fadein">
        //Images populate the div from the codebehind pulling from a server
   </div>

<强> CSS

#slideshow {
    max-height: 250px;
}

.fadein {
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 250px;
    max-height: 250px;
}

.fadein img {  
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

从幻灯片中选择图像并将其显示在灯箱中

1 个答案: