hilfe für bildergalerie
christiane
- javascript
0 rfb0 Christiane0 rfb
Hallo selfhtml Forum,
ich hoffe dass ich auf diesem Weg eine Lösung/Hilfe finde.
Ich möchte eine relativ einfache Bildergalerie erstellen, die folgendermaßen
aussieht: eine Übersichtsseite mit Vorschaubildern, nach klicken eines Vorschaubildes öffnet sich das betreffende Bild in höherer Auflösung in einem neuen Browserfenster.
Zusätzlich sollte man in dem neuen Browserfenster sich mit vor und zurück durch die
grösseren Bilder klicken können. An sich hab ich das schon so. Nur sehr umständlich, da ich nicht weiß, ob es möglich ist, dass ich nur mit einem einzigen neuen Browserfenster arbeite, in dem sich dann das jeweilige angeklickte Vorschaubild öffnet. Momentan hab ich halt für jedes Vorschaubild ein eigenes neues Browserfenster, d.h. es sind 60 Bilder, also 60 html-Seiten für die grösseren Bilder. Ich müsste also den java script Code für das Weiterklicken (habe ich auch schon) in jede der 60 html-Seiten einfügen, und ausserdem müsste ich in jeder seite den array für das Weiterklicken anpassen, denn ansonsten würde man zwar in der Vorschau zb auf Bild 27 klicken; es öffnet sich dann in einem neuen Fenster auch Bild 27 vergrössert, aber bei "vor" klicken fängt es dann mit Bild 1 zu zählen an und nicht mit 28.
Gibts für dieses Problem eine einfache Lösung??
Danke & lG Christiane
Moin
Tipp: Wenn du
An sich hab ich das schon so.
präzisieren würdest, zB durch Quellcode, ließe sich über
Gibts für dieses Problem eine einfache Lösung??
besser nachdenken!
Gruß
rfb
Hallo,
naja Quellcode habe ich ja keinen für dieses Problem.
Die Übersichtsseite ist eine ganz normale html-Tabelle mit
Java Script Funktion bei klicken neues Browserfenster öffnen (in Dreamweaver
generiert), und der Java Script Code für das Weiterklicken wäre folgender:
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
images = new Array(
"../../pics/3dpics/33.jpg",
"../../pics/3dpics/34.jpg",
"../../pics/3dpics/35.jpg",
"../../pics/3dpics/36.jpg",
"../../pics/3dpics/37.jpg",
"../../pics/3dpics/38.jpg",
"../../pics/3dpics/39.jpg",
"../../pics/3dpics/01.jpg",
"../../pics/3dpics/02.jpg",
"../../pics/3dpics/03.jpg",
"../../pics/3dpics/04.jpg",
"../../pics/3dpics/05.jpg",
"../../pics/3dpics/06.jpg",
"../../pics/3dpics/07.jpg",
"../../pics/3dpics/08.jpg",
"../../pics/3dpics/09.jpg",
"../../pics/3dpics/10.jpg",
"../../pics/3dpics/11.jpg",
"../../pics/3dpics/12.jpg",
"../../pics/3dpics/13.jpg",
"../../pics/3dpics/14.jpg",
"../../pics/3dpics/15.jpg",
"../../pics/3dpics/16.jpg",
"../../pics/3dpics/17.jpg",
"../../pics/3dpics/18.jpg",
"../../pics/3dpics/19.jpg",
"../../pics/3dpics/20.jpg",
"../../pics/3dpics/21.jpg",
"../../pics/3dpics/22.jpg",
"../../pics/3dpics/23.jpg",
"../../pics/3dpics/24.jpg",
"../../pics/3dpics/25.jpg",
"../../pics/3dpics/26.jpg",
"../../pics/3dpics/27.jpg",
"../../pics/3dpics/28.jpg",
"../../pics/3dpics/29.jpg",
"../../pics/3dpics/30.jpg",
"../../pics/3dpics/31.jpg",
"../../pics/3dpics/32.jpg"
);
var imageIndex = 0;
var imageMaxIndex = images.length - 1;
function changeImage(direction) {
imageIndex += direction;
if (imageIndex > imageMaxIndex)
imageIndex = 0;
else if (imageIndex < 0)
imageIndex = imageMaxIndex;
document.getElementById("slideshow").src = images[imageIndex];
}
-->
</script>
</head>
<body bgcolor="000000" topmargin="0" leftmargin="0">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="../../pics/3dpics/33.jpg" id="slideshow"
alt="slideshow pictures"
onclick="changeImage(1)" />></td>
</tr>
<tr>
<td class="smalltitle" align="left"><a href="#" onClick="changeImage(-1);return false;"><font face="Arial, Helvetica, sans-serif" size="2" color="ffffff">Zurück</font></a></td>
<td class="smalltitle" align="right"><a href="#" onClick="changeImage(1);return false;"><font face="Arial, Helvetica, sans-serif" size="2" color="ffffff">Vor</font></a></td>
</tr>
<tr>
<td align="right" colspan="2"><a href="Javascript:window.close();"><font face="Arial, Helvetica, sans-serif" size="2" color="ffffff">Fenster schließen</font></a></td>
</tr>
</table>
</body>
</html>
Ob das Dir weiterhilft??
» Moin
Tipp: Wenn du
An sich hab ich das schon so.
präzisieren würdest, zB durch Quellcode, ließe sich über
Gibts für dieses Problem eine einfache Lösung??
besser nachdenken!Gruß
rfb
Moin
Hallo,
naja Quellcode habe ich ja keinen für dieses Problem.
doch doch, nur noch keinen zur Abhilfe!
Die Übersichtsseite ist eine ganz normale html-Tabelle mit
Java Script Funktion bei klicken neues Browserfenster öffnen
da kannst du doch prima die Bildnummer mit Übergeben als Funktionsparameter
(in Dreamweaver generiert)
Oh :-(
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
images = new Array(
"../../pics/3dpics/33.jpg",
...
"../../pics/3dpics/32.jpg" );
var imageIndex = 0;
hier müstest du besagten Parameter wieder auslesen (zB von der fensteröffnenfunktion als Parameter an die Seitenadresse anhängen und per location.search auslesen
var imageMaxIndex = images.length - 1;
function changeImage(direction) {
imageIndex += direction;
if (imageIndex > imageMaxIndex)
imageIndex = 0;
else if (imageIndex < 0)
imageIndex = imageMaxIndex;
document.getElementById("slideshow").src = images[imageIndex];
}
hier fehlt jetzt sowas wie
window.onload=function() {
document.getElementById("slideshow").src = images[imageIndex];
}
um zum Start das aktuelle Bild zu laden
</script>
</head>
<body bgcolor="000000" topmargin="0" leftmargin="0">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="dummy.jpg" id="slideshow"
alt="slideshow pictures"
onclick="changeImage(1)" />></td>
</tr>
<tr>
...
zu deinem Tabellenlayout und dessen Nachteile solltest du dich mal kundig machen, zeitgemäßes layouten ist das wirklich nicht!
</table>
</body>
</html>
So brauchst du nun nur noch eine HTML-Datei für die Slideshow-Bilder
Gruß
rfb