Dynamisches Fotoalbum mit JS

A

apriCe

Grünschnabel
Dynamisches Fotoalbum

Hallo!

Ich habe folgendes Problem:
Auf meinem Server wird kein PHP unterstützt, aber ich würde gerne ein Fotoalbum anlegen, ohne das ich einen nerviges html-Document schreiben muss, in dem ich jedes Bild einzeln einfügen muss...

Es sollte folgend aussehen:
Ne ganz normale html-Seite, mit Überschrift und und und...
Und darin ein Script, welcher eine Tabelle darstellt, in der Thumbnails (Vorschauen) automatisch vom Script eingetragen werden und automatisch mit dem Bild in groß, bzw. der Page mit dem entsprechenden Bild in groß verlinkt werden.

[modedit]
Deshalb meine Frage, wie würdet ihr es realisieren?
[/modedit]

Freue mich auf jede Antwort :)

MfG,
apriCe
 
Dreimal den gleichen Post in drei Foren, ich glaub es geht zu gut.

Ich verschiebe den Thread mal in den allgemeinen Coders Talk und gestalte ihn allgemeiner.

-moved-
 
Eine von unzähligen möglichkeiten...
PHP: 
<html>
<head>
<script type="text/javascript">

  var folder = "pics/";         //Ordner mit deinen Bildern
  var thumbs = "thumbnails/";   //Ordner mit den Thumbnails
  var max = 50;                 //Deine Bilder müssen 1.jpg, 2.jpg, 3.jpg usw heißen - hier würde es bis 50.jpg gehen
  var row = 5;                  //Anzahl der Thumbnails pro Zeile
  var pic_x = 800;              //Breite der Bilder
  var pic_y = 600;              //Höhe der Bilder



function openPic(pic,x,y){
  var html = '<html><head></head><body><img src="'+pic+'"></body></html>';
  var nw = window.open("#","Bilderalbum","width="+pic_x+",height="+pic_y+",left=200,top=200");
  with(nw.document){
    open();
    write(html);
    close();
  }
  nw.focus();
}
</script>


</head>
<body>

Ne ganz normale html-Seite, mit Überschrift und und und...

<script type="text/javascript">
  var z = 0;
  var html = '<table>';
  for(var x=0; x<Math.ceil(max/row); x++){
    html += '<tr>';
    for(var y=0; y<row; y++){
      html += '<td><a href="'+folder+z+'.jpg" onclick="openPic(this.href); return false;">';
      html += '<img src="'+thumbs+z+'.jpg"></a></td>';
      z++;
    }
    html += '</tr>';
  }
  html += '</table>';
  
  document.write(html);
</script>
</body>
</html>

bye
 
Vielen dank, dass hat mir schon mal weiter geholfen!

Aber kann man diesen Code auch auf html-Seiten umschreiben?

Also, ich meine, dass man, wenn man auf den Thumbnail klickt sich ein neues Fenster, wie bei diesem Script hier öffnet, in dem aber nicht NUR das Bild erscheint, sonder eine Site, auf der das Bild drauf ist, und unter dem Bild zwei Pfeile zu dem vorigen oder folgenden Bild sind?!

Da müsste man doch nur statt ".jpg" als Dateientyp ".html" eingeben und die jeweiligen html-Sites 1.htm, 2.htm ... 50.htm usw. nennen, oder nicht?

Aber um das dann dynamisch zu halten, also so, dass nicht 50 html-Documente erstellt werden müssen, sondern das document selber erkennt, ob es nun Bild 4 oder Bild 22 erscheinen lassen soll...
... was muss man, um das zu erreichen noch hinzufügen?
 
Du kannst alle Bilder in einem HTML-Dokument als Ebenen übereinanderlegen und jeweils einblenden. Wie Du auf das Dokument in dem anderen Fenster zugreifen kannst, geht schon aus dem anderen Code von Andreas hervor.
 
nächste seite?

Ich habe die Seite, die neu geschrieben wird nun wie folgt umgeschrieben:
PHP: 
function openPic(pic,x,y){ 
  var plus = pic++
  var minus = pic--
  var html = '<html><head></head><body><p align="center"><A href="'+minus+'" ><IMG src="previous.gif" vspace=2 hspace=1 border=0 alt=Zurück></A><A href="schließen.htm" ><IMG src="home.gif" vspace=2 hspace=1 border="0" alt=Schließen></A><A href="'+plus+'"><IMG src="next.gif" vspace=2 hspace=1 border=0 alt=Weiter></A></p><img src="'+pic+'"></body></html>'; 
  var nw = window.open("#","Bilderalbum","width="+pic_x+",height="+pic_y+",left=75,top=56"); 
  with(nw.document){ 
    open(); 
    write(html); 
    close();

Ziel der ganzen Sache ist es, dass ich die Pics weiter klicken kann, ohne immer ein neuen Thumbnail anzuwählen! Das Button home.gif sollte das Fenster schließen! (Hab ich aber auch noch nicht hinbekommen... das ist doch irgendwas mit windows.close(); aber ich weis nicht, wie man das einbindet).
Jetzt meinte ein Kumpel von mir, ich solle ne funktion schreiben, die das Menü immer wieder neu einblendet, da es ja in diesem Falle immer wieder weg geht. Aber ich habe keine Ahnung, wie das geht!

Also, kann mir jemand sagen, wie die funktion lauten müsste?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück