Question

所以我使用bxslider（http://bxslider.com）来显示投资组合网站的一些图像。我一直在尝试更新我的网站，以便用户在点击图片幻灯片时可以看到更大的图片。它有点工作，但当我关闭对话框时，它会从幻灯片中删除图像。我知道这是因为我在关闭对话框后立即看到幻灯片中的下一个图像。

这是我的完整代码：

<?php
    $assets = 'drupal/sites/default/files/assets/';
    $page = $_SERVER['PHP_SELF'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="drupal/misc/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" media="screen" href="<?php echo $assets; ?>css/template.css">
    <link rel="stylesheet" media="screen and(min-width:480px);" href="<?php echo $assets; ?>css/template-small.css">
    <meta charset="UTF-8">

    <link href="<?php echo $assets; ?>css/jquery.bxslider.css" rel="stylesheet" />
    <script src="<?php echo $assets; ?>js/jquery.js"></script>
    <script src="<?php echo $assets; ?>js/jquery-ui.min.js"></script>
    <script src="<?php echo $assets; ?>js/jquery.bxslider.js"></script>

    <title>Arturo Ordonez</title>
</head>

<?php   
    $heading = "";
    $content = "";
    $medList = "";

    if(!(strpos($page, "index.php")) && !(strpos($page, "contact.php")) && !(strpos($page, "redirect.php")))
    {
        while($row = mysqli_fetch_array($res))
        {
            $heading = $row['title'];
            $content =  $row['body_value'];
        }
    }

    else if(strpos($page, "index.php"))
    {
        while($row = mysqli_fetch_array($res))
            $heading = $row['title'];
        $medList = array("intro.mp4", "kodiak-1.png", "kodiak-2.png", "phone.png", "tablet.png");
        $captions = array("", "Kodiak Invoices", "Kodiak Invoices (cont.)", "Debt Manager", "Debt Manager (cont.)");

        $content     = "<ul class=\"slider\">";

        for($i = 0; $i < count($medList); $i++)
        {
            $content    .= "<li>";
            if(strpos($medList[$i], 'png') || strpos($medList[$i], 'jpg'))
                $content .= "<img class=\"imgPos\" src=\"".$assets."img/".$medList[$i]."\" />";
            else if(strpos($medList[$i], 'mp4'))
            {
                $content .= "<iframe class=\"vidPos\"";
                $content .=" src=\"//www.youtube.com/embed/FcX4ukWgIGs\"";
                $content .= "frameborder= \"0\" allowfullscreen>";
                $content .="</iframe>";
            }
            $content    .= "</li>";
        }

        $content    .= "</ul>";

    }

    else if(strpos($page, "contact.php"))
    {
        $sideContent = "";
        while($row = mysqli_fetch_array($res))
        {
            $heading = $row['title'];
            $sideContent ="<div id=\"side\">".$row['body_value']."</div>";
        }

        $content = "<form id=\"contactForm\" action=\"processContact.php\" method=\"post\">";
            $content .="<table>";
                $content .= "<tr>";
                    $content .= "<td>";
                                    $content .= "<input type=\"text\" size=\"73\" id=\"name\" name=\"name\" placeholder=\"Name\">";
                    $content .= "</td>";
                $content .= "</tr>";

                $content .= "<tr>";
                    $content .= "<td>";
                                    $content .= "<input type=\"text\" size=\"73\" id=\"email\" name=\"email\" placeholder=\"Email\">";
                    $content .= "</td>";
                $content .= "</tr>";

                $content .= "<tr>";
                    $content .= "<td>";
                                    $content .= "<input type=\"text\" size=\"73\" id=\"title\" name=\"title\" placeholder=\"Title\">";
                    $content .= "</td>";
                $content .= "</tr>";

                $content .= "<tr>";
                    $content .= "<td>";
                                    $content .= "<textarea id=\"message\" name=\"message\" rows=\"5\" cols=\"70\" placeholder=\"Message\">";
                                    $content .= "</textarea>";
                    $content .= "</td>";
                $content .= "</tr>";

                $content .= "<tr>";
                    $content .= "<td>";
                                    $content .= "<input type=\"submit\" id=\"submit\" name=\"submit\" value=\"Submit\">";
                    $content .= "</td>";

                $content .= "</tr>";

            $content .= "</table>";
        $content .= "</form>";

    }
    else
    {
        $content .= "Hello ";
        $content .= $_GET['name'];
        $content .= ",<br>";
        $content .= "Thank you for your comments. If requested, I will get back to you within 48 hours.<br>";
        $content .= "Thanks again for your time.<br><br>";
        $content .= "Arturo Ordonez<br>";
    }
 ?>

    <script>
        $(document).ready(function(){
        $('.slider').bxSlider();

        $(".imgPos").click(function(e){
            e.stopPropagation();

            $(this).dialog({
                height: 500,
                width: 500
            }).css("margin-left", "-200px");
        });
    }); 
    </script>

<body>

<div id="profile_container">
    <img id="profile" src="<?php echo $assets; ?>img/profile.png" alt="Profile Image" />
    <h1 id="heading"><?php echo $heading; ?></h1>
</div>

    <div id="wave_container"><img id="wave" src="<?php echo $assets; ?>img/wave.png" alt="Sinusoidal Motion" title="Sinusoidal Motion"/></div>

    <div id="n_bar_container">
        <ul>
            <li class="links"><a href="index.php"> <img class="button" src="<?php echo $assets; ?>img/home.png" alt="Home Page" id="index"> </a></li>
            <li class="links"><a href="about.php"> <img class="button" src="<?php echo $assets; ?>img/about.png" alt="About Page" id="about"> </a></li>
            <li class="links"><a href="projects.php"> <img class="button" src="<?php echo $assets; ?>img/projects.png" alt="Projects Page" id="projects"></a></li>
            <li class="links"><a href="contact.php"> <img class="button" src="<?php echo $assets; ?>img/contact.png" alt="Contact Page" id="contact"> </a></li>
        </ul>
    </div>

    <hr color="red">
    <div id="content">
    <?php
        if(strpos($page, "contact.php"))
            echo $sideContent;
    ?>

        <?php echo $content; ?> 
    </div>

    <hr color="red">
        <div id="footer">
            <sub>&copy; 2014 Arturo Ordonez-Hernandez. All Rights Reserved.</sub> <span style="margin-left:800px;"><sub>Powered by Drupal</sub></span> 
        </div>
    <hr color="red">

</body>

</html>

我认为它删除了图像，因为我使用图像的类选择器（imgPos）加载对话框。我的问题是，如何将图像加载到对话框中，以便在关闭对话框后不会删除它？谢谢，我希望这是足够的代码。

Answer 1

尝试停止事件传播。

$(document).ready(function(){
    $('.slider').bxSlider();

    $(".imgPos").click(function(e){
        e.stopPropagation();

        $(this).dialog({
            height: 500,
            width: 500
        }).css("margin-left", "-200px");
    });
});

Answer 2

我找到了解决方案。我使用了Magnific Popup（http://dimsemenov.com/plugins/magnific-popup/）JQuery Lightbox插件。我使用单个图像灯箱获得了我想要的效果。

JQuery Dialog从图像列表中删除图像

2 个答案: