# Fotoalben, Includen-Scrollen, eigene Schriften, Laden, Daten entpacken



## SilverVegeto (17. Oktober 2008)

Morgen Community,

hab ein paar Fragen und wusste nicht genau wohin damit, also bitte nicht böse sein 
_Benutze HTML/PHP/CSS_

*1. Fotoalben*
Ich habe in letzter Zeit immer öfters auf Websiten gesehen das wenn ich in einem Fotoalbum auf ein Bild klicke, die Website schwarz wird und das Foto in der Mitte erscheint (z.B. wie hier URL)
Kann mir jemand sagen wie ich so etwas machen kann?

*2. Includen-Scrollen*
Da ich ja eigentlich kein Freund von "Frames" bin möchte ich eigentlich nur mit "includen" arbeiten. Gibt es denn eine Möglichkeit ein Objekt via include auch zu Scrollen wie bei einem Frame? Mein Problem ist das meine Inhalt/Content-Box die Größe nicht verändern darf. Oder gibt es da eine bessere Idee?

*3. eigene Schriftarten*
Ich arbeite mit "CSS" jetzt hab ich mich schon etwas schlau gemacht und auf vielen Seiten heißt es man kann keine Schriften einbinden andere meinen wieder ja aber man muss aufpassen Mozilla vs. IE. Ist es denn möglich eigene Schriften zu verwenden und wenn ja wie?

*4. Laden*
Kann ich wie bei einer Flash-Seite ein "Ladeanzeige" setzen (z.B. mit Javascript) damit die Seite erst vollständig geladen werden kann?

*5. Daten entpacken*
Auf dieser Website können User auch Fotoalben anlegen, nun ist es natürlich nervig 50 Bilder mühsam hochzuladen. Ich würde das gerne wie bei dem Woltlab-Forum 3 lösen. Einfach eine gepackte Datei (.rar oder .zip) hochladen diese vom Server entpacken lassen und fertig.

So das wars dann auch schon, danke schonmal fürs Helfen.


----------



## Zinken (17. Oktober 2008)

Zu 1: Da gibt es im Internet jede Menge fertige (Java-)Scripts, die Du Dir anschauen kannst.
zB. hier: http://www.huddletogether.com/projects/lightbox/


----------



## SilverVegeto (17. Oktober 2008)

Danke für die Nummer 1. das war exakt das was ich gesucht habe!

Nummer 2 "Includen-Scrollen" hab ich auch schon selber rausgefunden.


----------



## akrite (17. Oktober 2008)

zu 4 (gesucht und gefunden):
	
	
	



```
<script language="javascript">
  nn4=(document.layers)?1:0;
  nn6=(document.getElementById&&!document.all)?1:0;
  op5=(document.all&&!document.styleSheets)?1:0;
  ie5=(document.getElementById&&!nn6&&!op5)?1:0;

  if(ie5||nn6||nn4||op5) {
    document.write("
        <style type='text/css'>div {position:absolute;left:-500;top:-500}</style>");

    //Rahmen erzeugen
    if(ie5||nn6||op5) document.write("<div id='P0'>"+
        "<table width='300' height='30' cellpadding='0' cellspacing='0'"+
        "style='border-width:1;border-style:solid;border-color:red'><tr><td>"+
        "<p align='center'>Geich geht's weiter ...</p></td></tr></table></div>");
    else document.write("<div id='P0'>"+
        "<table width='300' height='30' cellpadding='0' cellspacing='0' border='1'"+
        "style='border-width:1;border-style:solid;border-color:red'><tr><td>"+
        "<p align='center'>Geich geht's weiter ...</p></td></tr></table></div>");

    //Fortschritts-Felder erzeugen (Leerzeichen wg. NN 4x nicht vergessen)
    t="<table width='30' height='30' bgcolor='red' border='0'"+
        "cellpadding='0' cellspacing='0'><tr><td>&nbsp;</td></tr></table>";
    for(i=1;i<11;i++) document.write("<div id='P"+i+"'>"+t+"</div>");
  }

  n=-1;

  //Fortschritt anzeigen. Wenn fertig, zurück zur Startseite.
  function progressBar() {
    n++;
    if(ie5) {
      if(n!=0)
        document.getElementById("P"+n).style.left=document.body.clientWidth/2-180+30*n;
      else document.getElementById("P0").style.left=document.body.clientWidth/2-150;
      document.getElementById("P"+n).style.top=document.body.clientHeight/2;
    }
    else if(nn6) {
      if(n!=0) document.getElementById("P"+n).style.left=window.innerWidth/2-180+30*n;
      else document.getElementById("P0").style.left=window.innerWidth/2-150;
      document.getElementById("P"+n).style.top=window.innerHeight/2;
    }
    else if(nn4) {
      if(n!=0) document.layers[n].left=window.innerWidth/2-180+30*n;
      else document.layers[n].left=window.innerWidth/2-150;
      document.layers[n].top=window.innerHeight/2;
    }
    else if(op5) {
      if(n!=0) {
        if (/Opera( |\/)7/i.exec(navigator.userAgent)) {
          document.getElementById("P"+n).style.left=window.innerWidth/2-183+30*n;
          document.getElementById("P"+n).style.top=window.innerHeight/2-8;
        }
        else {
          document.getElementById("P"+n).style.left=window.innerWidth/2-180+30*n;
          document.getElementById("P"+n).style.top=window.innerHeight/2-5;
        }
      }
      else {
        document.getElementById("P0").style.left=window.innerWidth/2-150-3;
        document.getElementById("P0").style.top=window.innerHeight/2-8;
      }
    }
    setTimeout("
      if(n<10) progressBar();else location.replace('Warteschleife.html')",1000);
  }
</script>
```
Und in den body-tag kommt onload="progressBar()".


----------



## Maik (17. Oktober 2008)

Hi,

*@ Eigene Schriftarten*:

Grundsätzlich ist davon abzuraten, "außergewöhnliche / exotische" Schriftarten im Internet für die Website zu verwenden, da dies immer voraussetzt, dass die zukünftigen Seitenbesucher diese Schriftart auch auf ihrem System installiert haben, um in den Genuß des Font-Types zu kommen, ansonsten greift der Browser auf eine Schriftart bzw. -familie zurück, die auf dem System vorrätig ist, und die in ihrer Typografie von deiner mitunter  "meilenweit" entfernt sein kann.

Wenn du dennoch nicht darauf verzichten möchtest, deine Website mit eigenen Schrifarten auszuschmücken, und auf der Suche nach einer browserübergreifenden Technik bist, solltest du dich mal mit sIFR 2.0: Rich Accessible Typography for the Masses näher beschäftigen.

mfg Maik


----------



## akrite (17. Oktober 2008)

zu 3 : eigene Schriftarten sind in sofern unklug, da mit der Schriftart(kommerziell) auch Nutzungsrechte verbunden sind. Zum anderen müsstest Du Schriftarten für verschiedenste OS(Linux, Mac, Windows) bereithalten und da wird es problematisch.


----------



## SilverVegeto (20. Oktober 2008)

Vielen Dank für eure Hilfreichen Tipps.
Es wäre nur noch die Frage *5. Daten entpacken* offen.
Kann mir da auch jemand helfen?


----------

