Hey Leute,
ich bin auf das Cycle-Plugin aufmerksam geworden und wollte mir einen Bildlauf schreiben. Da ich allerdings 13 Bilder mit je 500kB laden möchte dauert das entsprechend länger. Also habe ich mir gedacht, dass ich das Ganze über ein xmlHttpRequest lade und somit dem Nutzer schon die Möglichkeit gebe auf die anderen Elemente zu zugreifen. Die Dateien im einzelnen funktionieren und wenn ich den Teil des Bildlaufs in die Hauptseite kopiere funktioniert es auch. Nur wenn ich es über ein xmlHttpRequest lade funktioniert es nicht. Hier der Code über die relevanten Seiten:
Vorher zu den Variablennamen:
$i ist meine Zählervariable
$og steht für Obere Grenze
Die Hauptseite:
Die Seite "bildlauf.php":
Noch eine kleine Anmerkung: Wenn ich nur die Bilder lade und das Cycle-Plugin auf der Hauptseite habe, dann funktioniert es auch nicht.
EDIT: Wenn ich nun über die Navigation fahre, befindet die sich immer im Hintergrund, aber versuch das erst mal selbst zu fixen, aber vielleicht habt ihr eine Idee. Den z-index habe ich angepasst.
ich bin auf das Cycle-Plugin aufmerksam geworden und wollte mir einen Bildlauf schreiben. Da ich allerdings 13 Bilder mit je 500kB laden möchte dauert das entsprechend länger. Also habe ich mir gedacht, dass ich das Ganze über ein xmlHttpRequest lade und somit dem Nutzer schon die Möglichkeit gebe auf die anderen Elemente zu zugreifen. Die Dateien im einzelnen funktionieren und wenn ich den Teil des Bildlaufs in die Hauptseite kopiere funktioniert es auch. Nur wenn ich es über ein xmlHttpRequest lade funktioniert es nicht. Hier der Code über die relevanten Seiten:
Vorher zu den Variablennamen:
$i ist meine Zählervariable
$og steht für Obere Grenze
Die Hauptseite:
PHP:
<script type="text/javascript">
function $2(id) {
return document.getElementById(id);
}
function xmlHttpRequest (name, ubergabe, id) {
var xmlhttp = null;
// Mozilla
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
$2(id).innerHTML = '<center><img src="gui/loadingAnimation.gif"></center>';
xmlhttp.open("GET", name + '?' + ubergabe , true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState != 4) {
$2(id).innerHTML = '<center><img src="gui/loadingAnimation.gif"></center>';
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$2(id).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
[...]
<?php echo "
<body text=\"#ffffff\"
bgcolor=\"#000000\"
onload=\"xmlHttpRequest('news.php','sz=".$_GET['sz']."', 'news');
xmlHttpRequest('bildlauf.php', '', 'bildlauf') \">";
?>
<?php include("navi.html");
?>
<div id="bildlauf" class="slideshow">
</div>
<div style="background-color: #999999; width: 999px;"><br /><br /> </div>
<div class="content_news" id="news">
</div>
PHP:
<!DOCTYPE html>
<?php //Für den Bildlauf
$i = 0;
$verzeichnis = openDir("gui/bildlauf");
// Verzeichnis lesen
while ($file = readDir($verzeichnis)) {
if ($file != "." && $file != "..") {
$bildlauf[$i] = "$file";
$i++;
}
}
$og = count($bildlauf);
// Verzeichnis schließen
closeDir($verzeichnis);
?>
<html>
<head>
<style type="text/css">
.slideshow { height: 500px; width: 980px; }
</style>
<!-- include jQuery library http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js-->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- include Cycle plugin http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js-->
<script type="text/javascript" src="jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
sync: true,
pause: true,
resume: true,
timeout: 1000,
delay: 1000,
});
});
</script>
</head>
<body>
<div class="slideshow">
<?php
for($j=0;$j<$og;$j++)
{
// echo "$bildlauf[$j]";
echo "<img src=\"gui/bildlauf/".$bildlauf[$j]."\" width=\"980\" height=\"500\">";
}
?>
</div>
</body>
</html>
Noch eine kleine Anmerkung: Wenn ich nur die Bilder lade und das Cycle-Plugin auf der Hauptseite habe, dann funktioniert es auch nicht.
EDIT: Wenn ich nun über die Navigation fahre, befindet die sich immer im Hintergrund, aber versuch das erst mal selbst zu fixen, aber vielleicht habt ihr eine Idee. Den z-index habe ich angepasst.
Zuletzt bearbeitet: