nicht angemeldet
Bildergalerie selbst gestalten und erstellen
Zuerst einmal riesen Dank an dieses Forum - ihr habt mir bisher immer sehr gut weiter geholfen.
Doch nun zu meiner nächsten Frage ;)
Folgendes: Ich habe eine Grafik erstellt. Mit einem freien Fenster (weißes Quadrat) und selbst gestalteten Pfeilen links und rechts.
So nun möchte ich eine Art Bildergalerie daraus machen, also eigentlich Bilder in das freie Fenster reinladen und durch die Pfeile navigieren (Bild weiter / Bild zurück).
Das geht doch sicher ohne, dass ich jedes Bild neu verlinken muss, dass wäre ja eine Arbeit ...
... ich hoffe ihr habt das verstanden?!
Ansonsten nochmal ne kurze Zusammenfassung:
Angenommen eine Tabelle mit einer Zeile und drei Spalten, dann soll die erste Zelle die "Zurücktaste" sein. In die mittlerste Zelle soll immer das Bild geladen werden. Und die rechte Zelle soll die "Vorwärtstaste" werden.
Ist das möglich?
Danke Peter
-
Zuerst einmal riesen Dank an dieses Forum - ihr habt mir bisher immer sehr gut weiter geholfen.
Doch nun zu meiner nächsten Frage ;)
Folgendes: Ich habe eine Grafik erstellt. Mit einem freien Fenster (weißes Quadrat) und selbst gestalteten Pfeilen links und rechts.
So nun möchte ich eine Art Bildergalerie daraus machen, also eigentlich Bilder in das freie Fenster reinladen und durch die Pfeile navigieren (Bild weiter / Bild zurück).Das geht doch sicher ohne, dass ich jedes Bild neu verlinken muss, dass wäre ja eine Arbeit ...
Klar. Aber:
Es gibt von Mootools schon eine fertige Bildgallery mit Pfeilen, scrollenden Thumbs, Perview und Zoombild. Dazu bietet es die Möglichkeit jedes Bild mit einem Kommentar darunter auszustatten.
Sehr gut gemachtes DHTML.Das kann ich dir empfehlen. Die alternative ist mit Javascript das selbst zu schreiben. Also konkret auf deinem Fall würde das bedeuten ein Array zu schreiben und via for-schleife in deine Tabelle zu schreiben
-
Klar. Aber:
Es gibt von Mootools schon eine fertige Bildgallery mit Pfeilen, scrollenden Thumbs, Perview und Zoombild. Dazu bietet es die Möglichkeit jedes Bild mit einem Kommentar darunter auszustatten.
Sehr gut gemachtes DHTML.Danke, mir ist klar - dass es eine Menge dieser Programme gibt, aber es geht mir wirklich darum, die von mir gestalteten Grafiken (Pfeile und Rahmen) verwenden zu können, wegen meinem Corporate Design. Gibt es denn kein Programm in der ich meine Grafiken dafür laden kann ...:)
Wie würde das in meiner eigenen Tabelle wohl aussehen müssen?Peter
-
Wie würde das in meiner eigenen Tabelle wohl aussehen müssen?
Kann ich so nicht beantworten, da ich den HTML Code nicht kenne. Du musst jedoch mit Javascript arbeiten. Ließ dir dazu mal Grundlagen über Arrays und Schleifen an. Dann kommst du schnell auf eine eigene Lösung
-
Wie würde das in meiner eigenen Tabelle wohl aussehen müssen?
Kann ich so nicht beantworten, da ich den HTML Code nicht kenne. Du musst jedoch mit Javascript arbeiten. Ließ dir dazu mal Grundlagen über Arrays und Schleifen an. Dann kommst du schnell auf eine eigene Lösung
Na gut gleich noch ne Frage:
Ich brauch nicht wirklich Thumbhs sondern man soll nur blättern solln - geht das auch?
Danke Peter
-
Klar geht das.
Du nimmst den Preloader den ich dir geschrieben habe und lässt dann via link eine Funktion aufrufen, die im Array immer ein Bild weiter oder zurückspringt.
Das entsprechende Bild kannst du mit myImages[Zahlenwert].src erreichen. -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenannt</title>
<script>
var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "1.jpg";
myImages[2] = new Image();
myImages[2].src = "2.jpg";
myImages[3] = new Image();
myImages[3].src = "3.jpg";
myImages[4] = new Image();
myImages[4].src = "4.jpg";
myImages[5] = new Image();
myImages[5].src = "5.jpg";var maxValue = myImages.length - 1;
var intValue = 1;
function gallerie(charValue) {
if(charValue == 'c') {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'>";
}
else if(charValue == '+') {
if(intValue == maxValue) {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'>";
intValue = 1;
}
else {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'>";
intValue = intValue + 1;
}
}
else if(charValue == '-') {
if(intValue == 1) {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[maxValue].src + "'>";
intValue = maxValue;
}
else {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'>";
intValue = intValue - 1;
}
}
}</script>
</head><body onload="gallerie('c')">
<table border="1">
<tr>
<td><a href="#" onclick="gallerie('-')">Pfeil_links</a></td>
<td><div id="imgGallerie"></div></td>
<td><a href="#" onclick="gallerie('+')">Pfeil_rechts</a></td>
</tr>
</table></body>
</html>Bitte schön
-
Wie kann ich dir Danken - merci!!!!
-
-
-
-
<script>
var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "Pfad zu Bild eins";
myImages[2] = new Image();
myImages[2].src = "Pfad zu Bild eins";
myImages[3] = new Image();
myImages[3].src = "Pfad zu Bild eins";
myImages[4] = new Image();
myImages[4].src = "Pfad zu Bild eins";
myImages[5] = new Image();
myImages[5].src = "Pfad zu Bild eins";
</script>So kannst du deine Grafiken Preloaden. Du musst sei dann nur noch irgendwo ausgeben in deiner Seite
-
-