0
그래서 bxslider (http://bxslider.com)를 사용하여 포트폴리오 사이트의 일부 이미지를 표시합니다. 사용자가 이미지 슬라이드를 클릭 할 때 더 큰 이미지를 볼 수 있도록 내 사이트를 업데이트하려고했습니다. 그것은 작동하지만, 대화 상자를 닫으면 슬라이드 쇼에서 이미지가 제거됩니다. 대화 상자를 닫은 후에 슬라이드 쇼에서 다음 이미지를 즉시 볼 수 있기 때문에이 사실을 알 수 있습니다. 나는 이미지의 클래스 선택 (imgPos)를 사용하여 대화 상자를로드하기 때문에 이미지를 제거하는 생각JQuery Dialog가 이미지 목록에서 이미지를 제거합니다.
<?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>
:
여기 내 전체 코드입니다. 내 질문은, 대화 상자를 닫으면 제거되지 않도록 대화 상자에 이미지를 어떻게로드 할 수 있습니까? 감사합니다. 그리고 이것이 충분한 코드가되기를 바랍니다.
답장을 보내 주셔서 감사합니다. 그래도 작동하지 않았다. – Artorias2718
어딘가에 전체 코드를 입력 하시겠습니까? 나는 그것이 이벤트 전파라는 것을 압니다. 닫기를 클릭하면 click 이벤트가 슬라이드 쇼의 클릭 핸들러로 나가고 다음 이미지가 표시됩니다. – brian
괜찮습니다. 나는 원래 게시물을 편집하고 모든 것을 거기에 넣었다. – Artorias2718