0
私は過去の日に解決しようとしてきた問題があります。私はHTMLを更新しdivタグの中に新しいコンテンツを作成するJqueryを持っています。問題は、生成されたコードにjavascriptが適用されないことです。言い換えれば、PHPが私に与える正確な出力をHTMLコードで直接入力して動作させることができますが、ページが動作している間にPHPから来たら、それは表示されませんスライドショーのjflow内の画像を正しく表示します。働くために使用される。ここJavascript Jqueryコール後にPHPで
は、HTMLヘッダ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.robwalsh.randomImageOnload.js" type="text/javascript" charset="utf-8"></script>
<script src="js/application.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
});
</script>
<script type="text/javascript">
/* SLIDESHOW AT HOMEPAGE */
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 5000);
});
</script>
<script type="text/javascript">
/* Function to show/hide the side menu for all images */
function showDIV(e)
{
var notEmpty = true;
var count = 0;
while(document.getElementById('subCat'+count) != null)
{
document.getElementById('subCat'+count).style.display = 'none';
count++;
}
document.getElementById(e).style.display = 'block';
}
/* MENU INTERACTION */
function showContent(cmd, id)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contentMain").innerHTML=xmlhttp.responseText;
document.getElementById("controller").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getMain.php?cmd="+cmd+"&id="+id,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21909616-1']);
_gaq.push(['_setDomainName', '.karimtabar.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
<link rel="stylesheet" type"text/css" href="css/stylesheet.css" />
<link rel="shortcut icon" href="logo/icon.jpg">
<title>KARIM V TABAR PHOTOGRAPHY</title>
<meta name="description" content="Karim V Tabar: photographer, new media, film, design." />
</head>
<body style="width:100%;">
<div id="wholewrapper" >
<!-- HEADER // TOP PORTION OF SITE -->
<div id="logoheader">
<h5 class="logo">
<a href="#" title="Go Back">KARIM VICTOR TABAR</a>
</h5>
</div>
<div class="wrapper">
<div class="navcontainer">
<?php
$count = 0;
foreach (new DirectoryIterator('images/menuImages') as $fileInfo)
{
if($fileInfo->isDot()) continue;
echo "<h2 class='acc_trigger' onclick=\"showDIV('subCat".$count."'); showContent(1, '".$fileInfo->getFilename() ."');\"><a href='#'>".$fileInfo->getFilename() ."</a></h2><div class='acc_container' id='container".$count."'><div class='block' name='subCats' id='subCat".$count."'><ul>";
foreach (new DirectoryIterator('images/menuImages/'.$fileInfo) as $fileInfo2)
{
if($fileInfo2->isDot() || $fileInfo2 == "thumbnails") continue;
echo "<li><a href='#' onclick=\"showContent(2, '".$fileInfo->getFilename() ."/".$fileInfo2->getFilename()."');\">".$fileInfo2->getFilename() . "</a></li>";
}
echo "</ul></div></div>";$count++;
}
?>
<div id="navigationlinks">
<ul>
<li><a href="pages/bio.html">BIO</a></li>
<li><a href="pages/contact.html">CONTACT</a></li>
<li><a href="http://blog.karimtabar.com/" target="_blank">BLOG</a></li></ul>
</div>
</div>
<!-- Images Thumbnails Categories -->
<div id="contentMain">
<div id="slideshow">
<img src="images/homepage/bb1.jpg" width = "750px" alt="" class="active" />
<img src="images/homepage/et1.jpg" width = "750px" alt="" />
<img src="images/homepage/gaga1.jpg" width = "750px" alt="" />
<img src="images/homepage/gaga2.jpg" width = "750px" alt="" />
<img src="images/homepage/hkartwalk.jpg" width = "750px" alt="" />
<img src="images/homepage/homepagegirl.jpg" width = "750px" alt="" />
<img src="images/homepage/rodeo2.jpg" width = "750px" alt="" />
<img src="images/homepage/rodeo5.jpg" width = "750px" alt="" />
<img src="images/homepage/silverwig_gaga.jpg" width = "750px" alt="" />
<img src="images/homepage/wavy1.jpg" width = "750px" alt="" />
<img src="images/homepage/Wenya.jpg" width = "750px" alt="" />
</div>
</div>
</body>
</html>
そして、ここでは、新しいHTML（getMain.php）を生成するPHPコードである
<?php
$cmd=$_GET["cmd"];
$id = $_GET["id"];
/* The Thumbnail Display */
if($cmd == 1)
{
echo "<div id='thumbnailcontentplaceholder'>";
echo "<div id='thumbnailcontent'>";
echo "<ul>";
$dir = "images/menuImages/".$id."/thumbnails";
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) != false) {
if(is_dir($file)) continue;
echo "<li>";
echo "<a href='#' title='".$file."'><img src='".$dir."/".$file."' alt='' /></a>";
echo "<div id='thumnailtitle'>".substr($file, 0, strpos($file, "."))."</div>";
echo "</li>";
}
closedir($dh);
}
}
echo "</div></div>";
}
if($cmd == 2)
{
$dir = "images/menuImages/".$id;
$count = 1;
$nFiles = countFiles($dir);
echo "<div id='imageplaceholder'> \n";
/* No1 No2 No3 ... */
echo "<div id='controller' class='hidden'>\n";
for($i =1; $i < $nFiles; $i++)
{
echo "<span class='jFlowControl'>No ".$i."</span>\n";
}
echo "</div>";
echo "<div id='slides'>";
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) != false) {
if(is_dir($file)) continue;
echo "<div><img src='".$dir."/".$file."'></div>\n";
}
closedir($dh);
}
}
echo "</div>\n";
echo '<div id="prevNext">
<a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>
<span class="slide_slash">/</span>
<a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a> </div>';
echo '<div id="credits2">
BEIJING BLUE<br>
Photographed by: Karim V Tabar<br></div></div>';
}
function countFiles($dir)
{
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;
}
if ($files)
$num_of_files = count($files) - 2; // we substract 2 because . and .. are included
else
die('there is an error');
return $num_of_files;
}
?>
おかげ
リアルタイムHTMLこのようなものだった
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="../../js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container$(document).ready(function(){
//On Click
$('.acc_trigger').click(function(){
('#open').click()
});
});
</script>
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21909616-1']);
_gaq.push(['_setDomainName', '.karimtabar.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type"text/css" href="../../css/stylesheet.css">
<link rel="shortcut icon" href="../../logo/icon.jpg">
<title>KARIM V TABAR PHOTOGRAPHY</title>
<meta name="description" content="Karim V Tabar: photographer, new media, film, design." />
</head>
<body style="width:100%;">
<div id="wholewrapper">
<!-- HEADER // TOP PORTION OF SITE -->
<div id="logoheader">
<h5 class="logo">
<a href="../../index.html" title="Go Back">KARIM VICTOR TABAR</a>
</h5>
</div>
<div class="wrapper">
<div class="navcontainer">
<h2 class="acc_trigger"><a href="../editorial.html">EDITORIAL</a></h2>
<div class="acc_container">
<div class="block"> <ul> <li><a href="beijingblue.html">BEIJING BLUE</a></li>
<li><a href="gaga.html">GAGA</a></li>
<li><a href="dtrouble.html">DOUBLE TROUBLE</a></li>
<li><a href="et.html">EXTRATERRESTRIAL DREAMS</a></li>
<li><a href="liferush.html">LIFE RUSH</a></li>
<li><a href="rodeoglam.html">RODEO GLAM</a></li>
<li><a href="wanderlust.html">WANDERLUST</a></li>
<li><a href="runawayangel.html">RUN AWAY ANGEL</a></li>
<li><a href="russianstandard.html">RUSSIAN STANDARD</a></li>
<li><a href="hollywoodhills.html">HOLLYWOOD HILLS</a></li></ul>
</div>
</div> <h2 class="acc_trigger"><a href="../travel.html">TRAVEL</a></h2>
<div class="acc_container">
<div class="block">
<ul>
<li><a href="../t/hk.html">HONG KONG</a></li> </li>
<li><a href="../t/dubai.html">DUBAI, UAE</a></li>
<li><a href="../t/kyoto.html">KYOTO, JAPAN</a></li>
<li><a href="../t/miami.html">MIAMI, USA</a></li>
<li><a href="../t/la.html">L.A., USA</a></li></ul>
</div>
</div>
<h2 class="acc_trigger"><a href="../art.html">ART</a></h2>
<div class="acc_container">
<div class="block">
<ul> <li><a href="../a/mirrorangel.html">MIRROR ANGEL</a></li>
<li><a href="../a/rouge.html">ROUGE</a></li>
<li><a href="../a/violet.html">VIOLET</a></li>
<li><a href="../a/noire.html">NOIRE</a></li></ul>
</div>
</div> <h2 class="acc_trigger"><a href="../video.html">VIDEO</a></h2>
<div class="acc_container">
<div class="block">
<ul>
<li><a href="../v/zigmat.html">ZIGMAT - BETWEEN BULLETS VIDEO</a></li><li><a href="../v/zigmat-1.html">ZIGMAT - BEHIND THE SCNES</a></li></ul>
</div>
</div>
<h2 class="acc_trigger"><a href="../exhibitions.html">EXHIBITIONS</a></h2>
<div class="acc_container">
<div class="block">
<ul>
<li><a href="../e/intemporelle.html">2009 RESIDENT, MONTRÉAL, CANADA</a></li><li><a href="../e/hkartwalk.html">2011 ART WALK, HONG KONG, CHINA</a></li>
</ul>
</div>
</div><!-- <h2 class="acc_trigger"><a href="#">PRESS</a></h2>
<div class="acc_container">
<div class="block">
<ul>
<li><a href="press1.html">NME</a></li>
<li><a href="press2.html">LIVE FAST MAG</a></li>
<li><a href="press3.html">GURU</a></li></ul>
</div>
</div>
--><div id="navigationlinks">
<ul>
<li><a href="../bio.html">BIO</a></li>
<li><a href="../contact.html">CONTACT</a></li>
<li><a href="http://blog.karimtabar.com/" target="_blank">BLOG</a></li></ul>
</div> <!-- <div id="buyherelogo">
<a href="../../store.html"><img src="../../store/buyhere.png" width="150" border="0"></a>
</div>
--></div>
<!--IMAGE // RIGHT PORTION -->
<div id="imageplaceholder">
<div id="controller" class="hidden">
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
<span class="jFlowControl">No 3</span>
<span class="jFlowControl">No 4</span>
<span class="jFlowControl">No 5</span>
<span class="jFlowControl">No 6</span>
<span class="jFlowControl">No 7</span>
</div>
<div id="slides">
<div><img src="../../images/fashion/beijingblue/bb1.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb2.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb3.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb4.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb5.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb6.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb7.jpg" width="785" height="480"></div>
</div>
<div id="prevNext">
<a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>
<span class="slide_slash">/</span>
<a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a>
</div>
<div id="credits2">
BEIJING BLUE<br>
Photographed by: Karim V Tabar<br>
</div>
</div>
</div>
</div>
</body>
</html>
ウェブサイトはすべてのHTML（約40ページ）で私に与えられました。私はそれを再生成するためにダウンさせる必要がありました。 これはすべてのhtmlのウェブサイトhttp://www.karimtabar.com/ですから、私がしようとしているのは、カテゴリを選択してアルバムを表示した後のスライド・エフェクトのイメージ・ビューアです。あなたは私に何を勧めているのですか？ – guyPW123
guyPW123の場合は、すべて
<div id="contentMain">をコードに使用しますが、それをdiv#controllerと呼びますか？とにかく、正しいセレクターを指定しても、zzzzBovが答えたときに、ページが読み込まれてdivが空になっているので、それは正しく機能しません。コンテンツを更新した後、jFlow関数を呼び出してください：出典
2011-08-05 16:07:42
divコントローラはphpにあります。それを制御するために以前にどのように使用されたか。私はちょうど私に送られたものを試してみたNemanjaは動作しません – guyPW123
私は質問の内容を変更し、私はそこにすべてのコードを置く。私が思うより多くを助けることができました。私は本当に立ち往生しています、そして、これは私がそれを終わらせるためにしなければならない最後のものです – guyPW123