Problem mit html und javascript

pixpaw · 2. November 2010, 17:51

hi, also ich hab ne menge bilder auf nem webftp host. damit die halbwegs anständig angezeigt werden, hab ich was kleines zusammen gesuchen. irgendwie funktionieren die vor und zurück buttons nicht wie sie sollen. vielleicht hat einer ne ahnung, wo der fehler ist.

HTML-Quellcode

<html>
<head>
<title>Simple JavaScript Dia-Show</title>
</head>
<body>
<script language=JavaScript>
var aktuell=1293, ende=1907;
for(i=aktuell; i < ende; i++)
{
Animation[i]=new Image();
Animation[i].src=bild[i];
}
function blaettern(richtung)
{
if(aktuell+richtung >=1 && aktuell+richtung <= ende) aktuell += richtung;
document.images.picture.src=Animation[aktuell].src;
}
</script>
<b><font size=5>I Scream For Ice Cream - 2010-10-28 - Your Gig Bandcontest in Bad Breisig</font></b><br>
Das komplettes Archiv kann <a href="http://www.share.cx/files/631894669248/isfuc.rar.html">hier</a> heruntergelanden werden. <br><br>
<< <a href="javascript: blaettern(-1);"> Zurück</a> 
<a href="javascript: blaettern(1);">Vorwärts</a> >> <br><br>
<img src="IMG_1293.jpg">
</body>
</html>

Alles anzeigen

hier die site

downtimes · 2. November 2010, 18:32

Was steht in dem bild[] ?

willst du bei der Zuweisung

Quellcode

Animation[i].src=bild[i];

nicht was anderes machen als da steht?

EDIT: Hab zwar noch nie was mit javascript gemacht aber wenn ich das richtig sehe ist die Zeile hier auch quark

Quellcode

document.images.picture.src=Animation[aktuell].src;

Siehe hier: selfhtml.net/javascript/objekte/images.htm
Danach müsste es eher lauten

Quellcode

document.images[0].src = Animation[aktuell].src;

EDIT2: und noch was

Quellcode

if(aktuell+richtung >=1 && aktuell+richtung <= ende) aktuell += richtung;

da kann dein aktuell also werte von [1 - ende] annehmen. Schau dir aber mal an welche Indizies dein Animations array denn so hat

also wo da Bilder drinn stehen

Nur mal so als anregungen wenn du garnicht klarkommst schreib mich an dann mach ich dir das schnell.

ramius · 2. November 2010, 18:44

Wo ist denn die Variable "bild" definiert?
Du solltest vielleicht eine Liste aller Bildnamen Serverseitig erstellen und mit JSON an dein JavaScript übergeben, falls du nicht anderweitig "bild" definiert hast und ich es einfach übersehen habe.

pixpaw · 2. November 2010, 19:07

mhh also ich hab das ganze von hier

HTML-Quellcode

<html>
<head>
<title>Simple JavaScript Dia-Show</title>
<meta name="author" content="flaexx">
</head>
<script language=JavaScript>
Animation=new Array();
bild=new Array();
bild[1]='bild00.jpg';
bild[2]='bild01.jpg';
bild[3]='bild02.jpg';
bild[4]='bild03.jpg';
bild[5]='bild04.jpg';
bild[6]='bild05.jpg';
bild[7]='bild06.jpg';
bild[8]='bild07.jpg';
bild[9]='bild08.jpg';
bild[10]='bild09.jpg';
bild[11]='bild10.jpg';
var aktuell=0, ende=12-1;
for(r=1; r < 12; r++)
{
Animation[r]=new Image(); Animation[r].src=bild[r];
}
function blaettern(richtung)
{
if(aktuell+richtung >=1 && aktuell+richtung <= ende) aktuell += richtung;
document.images.depp.src=Animation[aktuell].src;
}
</script>
<body>
<< <a href="javascript: blaettern(-1);"> Zurück</a>  
<a href="javascript: blaettern(1);">Vorwärts</a> >> <br><br>
<img src="bild00.jpg" name="depp">
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://track.funpic.de/" : "http://track.funpic.de/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 3);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://track.funpic.de/piwik.php?idsite=3" style="border:0" alt="" /></p></noscript>
</body>
</html>

Alles anzeigen

zeile 38 bis 47 hab ich weg gelassen, da ich der meinung war, dass es für den zweck nicht nötig ist.
hab dann den rest ein wenig an meine bildnamen angepasst, aber irgendwie wohl falsch, wahrscheinlich zu viel copy paste....
ne liste aller bildernamen wär ganz cool, denn zwischen ben bildern fehlt oft welche, deswegen haben sie keine aufeinanderfolgende reihenfolge (hätte das später mit ner abfrage abgefangen)...

wenns einer grad hinrichten kann, solls mir auch recht sein, ich mach 2 mal im jahr was mit html, dann frag ich dann ^^

ramius · 2. November 2010, 19:31

Dein Problem ist: Du sagst in Zeile 11 von deinem Quellcode

Quellcode

Animation[i].src=bild[i];

Hast aber die Definition der Variable "bild", welche im original Quellcode in Zeile 8 bis 19 passiert nicht gemacht.
Das hat zur Folge, dass auch deine Variable Animation leer ist, welche eigentlich die Dateinamen der Bilder beinhalten sollte.
Du hast nun die Möglichkeit entweder die Bilder so zu benennen, dass du durch ein Schema eines nach dem anderen aufrufen kannst (beispielsweise mit bild1.jpg, bild2.jpg, bild3.jpg ohne "Lücken" beim zählen) oder du übergibst an das JavaScript eine Liste aller Bildnamen.
Natürlich gibts auch Möglichkeiten nur das nächste und vorherige Bild zu übergeben und per Ajax zu ändern, allerdings würde das glaube ich deinen "2 mal im Jahr"-Rahmen sprengen.

pixpaw · 2. November 2010, 19:39

mhh dann fänd ich ne liste aller bildernamen geschmeidiger. werde so ne site für alle zukünftigen fotos ja wieder benutzen, am besten dann mit jedem event im eigenen ordner.
so, und wie bekomm ich nun die liste aller bildernamen zurück?
wird das dann hardcoded als array im quellcode stehen?
denn bei knapp 400 bildern und sich immer wechselnder anzahl von bildern ist das ziemlich nervig.

ramius · 2. November 2010, 19:55

Kannst du Serverseitig beispielsweise mit PHP arbeiten? Was für Möglichkeiten stehen dir zur Verfügung?

pixpaw · 2. November 2010, 20:02

also konnte grad php4u aktivieren, das ist wohl php und mysql.
kenn abfragen aber nur per mysql und datenbanken

ramius · 2. November 2010, 21:44

Hab dir was gebaut, wobei du versuchen solltest auch zu verstehen, was genau im Quellcode passiert (hab Kommentare dazu geschrieben).
Kopiere folgenden Code in die aufgerufene .php Datei:

Quellcode

PHP-Quellcode

<?php
# Funktion liest alle Dateipfade aus von Dateien mit den Endungen in $type
function read_files($path, $type) {
$types = array_flip(explode(',', $type));
$result = array();
$handle = opendir($path);
if ($handle) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$name = $path . "/" . $file;
if (is_dir($name)) {
$ar = read_files($name, $type);
foreach ($ar as $value)
{
$result[] = $value;
}
} else {
if(isset($types[pathinfo($file, PATHINFO_EXTENSION)])) $result[] = $name;
}
}
}
}
closedir($handle);
return $result;
}
#Setzen der Variablen und Aufruf der Funktion
$type = 'jpg,gif,png'; // Gib mit Komma voneinander getrennt die Dateitypen an, welche ausgegeben werden sollen.
$path = './images'; // Der Ordner, aus welchem die Dateien ausgelesen werden. Es werden auch alle Unterordnern von $path ausgelesen.
$images = read_files($path, $type);
#Zählt die Anzahl der ausgelesenen Dateien
$cnt = count($images);
#Codiert die Pfade so, dass JavaScript das Array nutzen kann
$json = json_encode($images);
#JavaScript Teil, welcher direkt beim Seitenaufbau ausgeführt wird
#Übersetzt das Array mit den Dateipfaden
$js_static = "
var nmb = 0;
var cnt = ".$cnt.";
var images = eval('(' + '".$json."' + ')');
var txt = '';
";
#Die Funktion zum wechseln der Bilder
$js_functions = "
function switchImg(drct) {
nmb = parseInt(nmb) + parseInt(drct);
if (nmb < 0) nmb = 0;
if (nmb > cnt-1) nmb = parseInt(cnt)-1;
document.images['view'].src = images[nmb];
}
";
#Das HTML welches ausgegeben werden soll
$html = '<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">'.$js_functions.'</script>
</head>
<body>
<div>
<input id="prevBtn" type="button" value="previous" onClick="switchImg(\'-1\');"></input>
<input id="nextBtn" type="button" value="next" onClick="switchImg(\'1\');"></input>
<img src="'.$images[0].'" id="view" />
</div>
<script language="javascript" type="text/javascript">'.$js_static.'</script>
</body>
</html>';
#Ausgabe
echo $html;
?>

Alles anzeigen

pixpaw · 2. November 2010, 23:26

größtenteils versteh ichs ^^
bekomm allerdings die meldung

Quellcode

Fatal error: Call to undefined function: json_encode() in /data/members/free/tripod/de/k/e/n/kenshinz/htdocs/java/show.php on line 42

ich hab mit phpinfo(INFO_GENERAL); herausgefunden, dass PHP Version 4.4.9 dort läuft. könnte das ein problem sein?

ramius · 3. November 2010, 19:37

Wie du aus dem Fehler entnehmen konntest ist die PHP Funktion json_encode() nicht verfügbar.
Macht aber nicht viel, das ganze kann man auch ohne JSON lösen. Hier ein etwas anderer Ansatz:

Quellcode

HTML-Quellcode

function read_files($path, $type) {
$types = array_flip(explode(',', $type));
$result = array();
$handle = opendir($path);
if ($handle) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$name = $path . "/" . $file;
if (is_dir($name)) {
$ar = read_files($name, $type);
foreach ($ar as $value)
{
$result[] = $value;
}
} else {
if(isset($types[pathinfo($file, PATHINFO_EXTENSION)])) $result[] = $name;
}
}
}
}
closedir($handle);
return $result;
}
$type = 'jpg,gif,png';
$path = './images';
$images = read_files($path, $type);
$cnt = count($images);
echo '<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">
function switchImg(drct) {
nmb = parseInt(nmb) + parseInt(drct);
if (nmb < 0) nmb = 0;
if (nmb > cnt-1) nmb = parseInt(cnt)-1;
document.images["view"].src = images[nmb];
}
</script>
</head>
<body>
<div>
<input id="prevBtn" type="button" value="previous" onClick="switchImg(\'-1\');"></input>
<input id="nextBtn" type="button" value="next" onClick="switchImg(\'1\');"></input>
<img src="'.$images[0].'" id="view" />
</div>
<script language="javascript" type="text/javascript">
var nmb = 0;
var cnt = \''.$cnt.'\';
var images = new Array();';
foreach ($images AS $id => $path) {
echo "images[$id] = '$path';\n";
}
echo ' </script>
</body>
</html>';

Alles anzeigen

Die Änderung wird in diesen Zeilen (61 - 63) deutlich:

Quellcode

foreach ($images AS $id => $path) {
echo "images[$id] = '$path';\n";
}

Hier schreibt das PHP Script den JavaScript Code, welcher dann beim Client das Array mit den Pfaden in JavaScript anlegt.
Ansonsten verhält sich der obere Teil des Scripts gleich dem ersten Code von mir: Die rekursive Funktion liest den angegebenen Ordner und Unterordner nach Dateien mit den eingetragenen Dateiendungen aus.

pixpaw · 4. November 2010, 12:56

wow, es läuft =D super!
also ist json_encode nicht verfügbar, weils erst ab 5.2.0 unterstützt wird, richtig?

mhh, die bilder werden aber jetzt völlig durcheinander angezeigt. wenn ichs richtig versteh, muss da jetzt noch sowas wie ein $result = desc; oder so hin.

pixpaw · 5. November 2010, 17:48

ok, habs mit ner sortfunktion hinbekommen. gefällt mir soweit gannz gut und lass ich jetzt erst ma so. wenn ich zeit hab, versuch ich vielleicht n kleinen index oder so hinzumachen, sollte ja nicht all zu schwer sein.

vielen dank von meiner seite aus, ramius =D *thumbsup*

Tass · 14. November 2010, 03:37

Für nächstes Mal: jquery. Kicks ass.

HTML-Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

HTML-Quellcode

Quellcode

PHP-Quellcode

Quellcode

HTML-Quellcode

Quellcode

Benutzer online 1