Jquery ui JQuery对话框从图像列表中删除图像
因此，我使用bxslider为一个公文包站点显示一些图像。我一直在尝试更新我的站点，以便用户在单击图像幻灯片时可以看到更大的图像。它可以工作，但当我关闭对话框时，它会从幻灯片中删除图像。我知道这一点，因为我在关闭对话框后立即看到幻灯片中的下一幅图像 这是我的全部代码：Jquery ui JQuery对话框从图像列表中删除图像,jquery-ui,bxslider,Jquery Ui,Bxslider,因此，我使用bxslider为一个公文包站点显示一些图像。我一直在尝试更新我的站点，以便用户在单击图像幻灯片时可以看到更大的图像。它可以工作，但当我关闭对话框时，它会从幻灯片中删除图像。我知道这一点，因为我在关闭对话框后立即看到幻灯片中的下一幅图像 这是我的全部代码： <?php $assets = 'drupal/sites/default/files/assets/'; $page = $_SERVER['PHP_SELF']; ?> <!DOCTYPE
<?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>© 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加载了对话框。我的问题是，如何将图像加载到对话框中，使其在关闭对话框后不会被删除？谢谢，我希望这是足够的代码。尝试停止事件传播
$(document).ready(function(){
$('.slider').bxSlider();
$(".imgPos").click(function(e){
e.stopPropagation();
$(this).dialog({
height: 500,
width: 500
}).css("margin-left", "-200px");
});
});
我找到了解决办法。我使用了放大弹出jquerylightbox插件。我使用单图像灯箱获得了我想要的效果。您介意将完整代码放在某个地方吗？我知道这是事件传播。单击“关闭”时，单击事件弹出到幻灯片的单击处理程序，并显示下一幅图像。好的。我编辑了原来的帖子，把所有的东西都放在里面了。很好，我不能把它放在一把小提琴里。有什么地方可以让我看吗？不幸的是，我没有像Github这样的东西。谢谢你的帮助。