Neue Mustergalerie

[kuni-r]

Hallo Forumsmitglieder,

die letzten Wochen habe ich hier aus dem Forum immer wieder Anregungen mitnehmen können, wie's mit den Galerien und HomeGallery besser geht. Schnell hab ich gemerkt, daß meine Galerien nicht optimal aussehen und nicht optimal ausgestattet sind.

In den letzten Nächten habe ich nun getestet, probiert, verworfen und wieder geändert, bis eine Galerie rausgekommen ist, mit der ich für's Erste mal zurfrieden bin.

Hier mal die Aufgabenstellung:

Es werden Indexdateien erzeugt, die je 4 Thumbnails neben- und 3 untereinander darstellen. Die Thumbnails sollen Kleinbilddias nachempfunden sein, auf denen ein kleines Etikett mit dem Dateinamen klebt. Die Diarähmchen sollen auf einer hellen Fläche, wie auf einer Leuchtplatte angeordnet sein und ein klein wenig Abstand haben.

Von den Thumbnails aus soll die jeweilige Einzelbildseite aufgerufen werden, die, damit die Bilder leuchtender aussehen, jetzt einen dunkleren Hintergrund hat. Die Darstellung der Texte erfolgt teilweise über Hand-Einträge, teilweise über EXIF-Platzhalter. (Siehe GDF-Datei - Bilder)

Neben den bekannten Navigationspfeilen soll auch durch Klick auf die linke, beziehungsweise rechte Bildseite vor und zurück geblättert werden können. Zudem wollte ich von der Einzelbildansicht aus nochmal zusätzliche Seiten/Bilder aufrufen können.

Die Aufrufe sind mit einer kleinen Grafik, rechts oben in der Überschriftenleiste, realisiert, die angeklickt werden kann und nur dann zu sehen ist, wenn auch wirklich ein weiterführender Link vorhanden ist (Bilder 12 und 13). Im Bild 14 zeige ich, wie man auch innerhalb der Bildbeschreibung einen weiterführenden Textlink setzen kann.

Das Wichtigste: es soll nur reiner HTML-Code verwendet werden und die Galerie muß ohne Java, Javascript, etc. laufen.

Die Galerie wird so erstellt, dass die Galerie-Files problemlos mittels I-Frame in eine bestehende Homepage integrierbar sind. Ich habe das bei der Mustergalerie auf meiner Homepage genau so gemacht. (Dafür liegen die beiden HTML-Dateien 1menu1.html und 1menu2.html mit im Ordner der erstellten Galerie).

Zum Anschauen in der in die Homepage eingebundenen Version:
http://www.der-fotoritter.de/1menu/~tes ... menu1.html

Oben links kann der Kopf ausgeblendet werden, damit man sich auf die Bilder konzentrieren kann:
http://www.der-fotoritter.de/1menu/~tes ... menu2.html

Die beiden obigen Links funktionieren mittels I-Frame-Technik, damit die Galerien in möglichst viele Seiten eingebunden werden kann.

Für die Puristen geht natürlich auch
http://www.der-fotoritter.de/1menu/~testgalerie/
was dann die reine Galerie zeigt, die HomeGallery erstellt hat.

Falls Interesse besteht, werde ich in den nächsten Tagen schrittweise, wie ich dazu komme, erklären, welche Parameter wo verstellt werden müssen, um Aussehen, Farben, etc. der Galerie zu ändern und an die eigene Homepage anzupassen.

Für die Experten habe ich den ganzen Klumpatsch mal zusammengezippt. Das Archiv enthält alle Bilder, Stylesheets, die verwendeten Templates und natürlich auch das GDF. Das Zip-Archiv wird einfach im HomeGallery Programmverzeichnis entpackt. So sollte die Ordnerstruktur dann in etwa aussehen:



[galleryfiles] enthält die GDF-Datei mit allen Galerie-Einstellungen und Bildern
[templates] enthält die beiden Templates für die Thumbs und die Bilder
[ziel] hier finden sich alle für die Galerie notwendigen Bilder, Stylesheets, sowie alle nötigen Unterordner, auf die wir später noch zu sprechen kommen. Die meisten anderen Ordner sind eigentlich nur nötig, damit diese I-Frame-Geschichte gezeigt werden kann.

der Ordner [pics] mit den Unterordnern [logos] und [menu] enthält die Grafiken aus meiner Homepage für Titel, Monitorkalibrierbild, etc.

Der Ordner [sheets] mit dem Unterordner [logos] enthält das Sylesheet von meiner privanten Homepage.

Nur das, was im [tutorial] mit Unterordnern liegt, wird für die eigentliche Galerie benötigt.

[sicherungsordner] enthält die Originalbilder der Galerie.

Also nicht erschrecken, ist viel weniger kompliziert, als es aussieht.

Falls also gewünscht, in den nächsten Tagen mehr Details. Sollte kein Interesse bestehen, dann wünsche ich zumindest viel Spaß beim Galerie-anschauen.

Ach so: der Link zum ZIP fehlte:

http://www.der-fotoritter.de/1menu/~tes ... alerie.zip

[Florianb]

Mensch Kuni,

das ist ja super! Die Idee, ein Tuto zu machen, mit Hinweisen wo was geändert wird finde ich klasse (Du hast ja gemerkt, wie knapp meine html Kenntnisse sind...). Große Probleme haben mir zum BEispiel das Zentrieren von einzelnen ZEilen bereitet, und ich habe es zwar hinbekommen, aber nicht begriffen warum

Ich könnte das ganze dann noch ergänzen, wenn ich darf, durch ein Tuto für eine selbststartende menugesteuerte CD, weil das eine nette Art ist, Bilder an Freunde weiterzugeben.

Besonders ohne Java auszukommen ist schön. Dabei fände ich eine Darstellung asl Vollbild reizvoll, ohne das blöde Outfit des IE-Kopfes. Das ist mir bisher nur mit Java gelungen.

FÜr meine Panoramen müsste ich ausserdem Quicktime einbinden, und brauche bisher für die Vollbilddarstellung leider auch JAva. Aber vielleicht gibt es ja andere Möglichkeiten...

GRuß

Florian

[rupie]

Guten Morgen Kuni,

da hast Du dir aber mächtig Arbeit gemacht und alles toll beschrieben.

Also von meiner Seite meeeehr!!

Freue mich schon, hier weitere Erläuterungen zu der Galerie zu lesen.

[kuni-r]

So, dann starten wir mal!

Schauen wir uns also die Galerie mal an. Als erstes fällt der Hintergrund der Indexdateien auf.

Der wird in einer sogenannten "class" im Stylesheet "galerieprivat.css" definiert. Man unterscheidet feste Klassen, wie zum Beispiel "body", "table", etc. Auch zum Beispiel "a.link" und die anderen Angaben im Stylesheet, die mit einem Buchstaben beginnen, sind fest im HTML-Code verankert. Die Klassen im Sylesheet beginnen immer mit dem Schlüsselwort, gefolgt von einer geschweiften Klammer auf. Nach dieser Klammer werden die Definitionen eingetragen und durch ein Semikolon voneinander getrennt. Die Definition endet mit einer geschweiften Klammer zu.

Man kann in einem Sylesheet eigene Klassen mit eigenen Schlüsselworten erstellen. Diese unterscheiden sich von den fest eingebauten durch einen Punkt vor dem Schlüsselwort. Die erste Klasse im Sylesheet, die wir uns anschauen ist .hell

Code: Alles auswählen

.hell {
      background-color: #DDDDDD;
      color: Black;
      }


Hier ist als Hintergrundfarbe ein helles Grau und als Schriftfarbe ein Schwarz definiert. Wenn ich nun dieses helle Grau durch Rot ersetze, kann ich gut sehen, welche Bereiche in der Galerie von der Class .hell beeinflusst werden:



Da der allgemeine Hintergrund mit den einzelnen Thumbnails nix zu tun hat, ist er im Template "t_privatneuthumbs.htm" definiert. Wenn man sich den Quelltext anschaut, dann findet man ziemlich weit oben im <body>-Tag schon den entsprechenden Eintrag: <BODY CLASS="hell".

Dieses CLASS="hell" kann in allen Bereichen verwendet werden, in denen die Hintergrundfarbe hellgrau und der Text schwarz sein muß.

Damit die Klasse .hell aus dem Stylesheet in der fertigen HTML-Datei auch gefunden wird, muß das Stylesheet in die HTML-Datei eingebunden werden.

Im Header-Bereich muß also angegeben werden welches Sylesheet verwendet werden soll. Das sieht in unserem Fall so aus:

Code: Alles auswählen

<LINK REL="STYLESHEET" HREF="../~sheets/galerieprivat.css" TYPE="text/css">

Man kann das Sylesheet auch in den Headerbereich direkt eintragen. Die Syntax, die zu verwenden ist, seht ihr hier:

Code: Alles auswählen

<STYLE TYPE="text/css">
<!--
   body {color: #000000; background-color: #CCCCC0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
....
....
  -->
</STYLE>

Stefan hat das in den mitgelieferten Mustertemplates so gemacht. Man muß dann die jeweilige Information allerdins in jedes einzelnes Template extra reinschreiben. Bei zwei Templates (eines für die Thumbs, eines für die Bilder) ist das kein großer Aufwand. Trägt man allerdings einen Link auf ein Stylesheet ein, braucht man bei Änderungen nur in diesem einen externen Sylesheet arbeiten und die Änderungen wirken sich auf alle HTML-Dateien aus, in denen auf dieses externe Stylesheet verlinkt ist.

Denken wir uns mal Änderungen an einer fertigen Galerie mit 100 Bildern. Da müßten jetzt, wären die Stylesheet-Informationen direkt im Template-Header hinterlegt worden, mehrere Index- und 100 Page-HTML-Dateien von Hand angepasst werden. Mit einem Link ändere ich nur einen Parameter im externen Stylesheet und diese Änderung wirkt sich automatisch auf alle Dateien aus, die den Link zum Stylesheet enthalten. In unserem Fall also auf alle Index- und Page-HTMLs.

Soviel zum Ausflug in HTML und CSS.

Jetzt aber zurück zu unserer Mustergalerie. Der Rest der Erklärungen kann jetzt kürzer werden, wenn der obige Abschnitt verstanden wurde.

Als nächstes sehen wir den fett gedruckten Überschriftsbalken mit dem gelben Untergrund. Hier handelt es sich um eine Tabelle(nzelle) die als Headerzelle definiert ist. (statt normaler Zelle <td> heißt der Tag <th>.

Die Infos über das Aussehen stehen also im "galerieprivat.css" unter

Code: Alles auswählen

th {...}

Da auch diese Überschrift nix mit einem einzelnen Thumbnail zu tun hat, steht die Information darüber wieder, und diesmal in beiden Templates hinterlegt.



Diesen Tag müßt ihr suchen:

Code: Alles auswählen

<TH ALIGN="CENTER"> &nbsp;##GALLERYNAME## </TH>

So, jetzt muß ich aber erst mal ins Bett. Ich hoffe, daß ich morgen Zeit finden werde, ein wenig weiter zu schreiben. Dann kümmern wir uns um den Aufbau der einzelnen Thumbnails...

Halt, noch eins gleich heute: Den Text "Seite x von y" wollte ich gelb haben, damit die Anzeige zu den Pfeilen passt. Ich habe mir dazu den Tag <em> ausgesucht, dem ich im Stylesheet die passenden Textattribute zugeordnet habe. Den Text im Template habe ich dann in den <em>-Tag eingeschlossen:

Code: Alles auswählen

<EM>Seite ##PAGEINDEX## von ##PAGECOUNT##</EM>

So, jetzt aber endgültig...

[rupie]

Hallo Kuni,

danke für den weiterführenden Lehrgang in Sachen Homegallery und HTML.

Unglaublich welche Mühe du Dir machst, um uns das HTML/CSS näher zu bringen, da kann man süchtig werden.

Ich hoffe, dass du die Zeit findest am Wochenende weiter daran zu arbeiten.

Auf jeden Fall schon mal vielen Dank für die Arbeit!

[variablewoman]

Super! Danke, Kuni !

[erich_k]

Super!

Da werde ich jetzt ständiger "Mitleser"!!!

[kuni-r]

Hallo,

Jetzt geht's weiter mit dem Aufbau der Thumbnails. Die Thumbnails auf den Index-Seiten werden innerhalb einer Tabelle angeordnet. Dazu müssen wir jetzt innerhalb von HomeGallery (das tutorial.gdf ist geladen) zum Tab "HTML-Templates" wechseln. Hier sind alle Informationen für das Aussehen der Index-Thumbs abgelegt.

Die Haupt-Tabelle enthält später dann so viele Felder, wie Thumbnails angezeigt werden müssen. Damit die einzelnen Thumbnails Abstand von einander haben, muß in dieser Tabelle der Abstand der Zellen von einander definiert werden.

Das passiert innerhalb des Table-Tags. (der Eintrag "Start-Tag")

Code: Alles auswählen

<table ALIGN="CENTER" CLASS="hell" border="0" cellpadding="0" cellspacing="4">

Die Tabelle soll immer zentriert auf der Seite dargestellt werden, deshalb bekommt sie ein ALIGN="CENTER". Damit sich der Tabellenhintergrund nicht vom früher im Thumbnail-Template definierten Außenhintergrund unterscheidet, wird auch für diese Tabelle CLASS="hell" definiert, wie im Template. Zuletzt wird festgelegt, daß die Tabelle keinen Rahmen haben soll und der Abstand zwischen Inhalt der Zelle und Zellenrand =0 (Pixel) sein soll. Alles, was später in die einzelne Zelle reingepackt wird (zum Beispiel ein Thumbnail) geht also bis zum Zellenrand.

Anders der Abstand zwischen den einzelnen Zellen soll 4 Pixel breit sein, damit später die Bilder/Diarähmchen nicht auf einander kleben. CELLSPACING="4"

Das End-Tag ist dann nur noch </table> für das Ende der Tabelle.

für die Zeilen der Tabelle muß noch der Zeilentag definiert werden. Eine HTML-Tabellenzeile beginnt mit <tr> (tablerow) und endet mit </tr> man nennt das Start- und Endtag. Die beiden unterscheiden sich nur dadurch, daß beim Endtag ein "/"vorangestellt wird. HTML-Tags werden grundsätzlich in spitzen Klammern eingeschlossen. (Beispiel: <table> Tabellenanfang, </table> Tabellenende).

Der Rahmen ist nun definiert, jetzt geht's an den Inhalt der Zellen, der sich in der Abteilung "je Thumbnail" versteckt.

eine Zelle wird durch den Starttag <td> und durch den Endtag</td> definiert. Schauen wir uns den Code jetzt etwas näher an:

Code: Alles auswählen

<TD ALIGN="CENTER" VALIGN="MIDDLE" HEIGHT="165" WIDTH="160" CLASS="thumbs">
...
...
</TD>

Die Zelle wird als mit einer horizontalen Ausrichtung zentriert (ALIGN="CENTER" und einer vertikalen Ausrichtung Mitte (VALIGN="MIDDLE") versehen. die Zellenhöhe soll 165 Pixel, die Zellenbreite 160 Pixel sein. Das Aussehen der Zelle wird durch CLASS="thumbs" aus dem Stylesheet definiert, das ja am Anfang des Index-Templates aufgerufen wird.

Ändern wir die Hintergrundfarbe der Klasse Thumbs in Rot, sehen wir, was dort definiert wird. Damit die einzelne Tabellenzelle nun wie ein Diarähmchen aussieht, wurde im Stylesheet bestimmt:

Code: Alles auswählen

.thumbs    {
      text-align: center;
      background-color: #FAFAFA;
      padding: 8px 8px 8px 8px;
      color: Black;
      border: 2px double;
      border-color: #e9e9e9 #4c4c4c #111111 #cccccc;
      }

Der Text soll eingemittet sein, falls dort einer stehen soll, die Hintergrundfarbe wird definiert, der Abstand des Inhalts zum Zellenrand soll rundum 8 Pixel betragen, Die Schriftfarbe sei schwarz und der Rahmen der Zelle soll ein doppelter mit 2 Pixel rundum sein.



Das farbliche Aussehen des Randes wird durch "border-color:" bestimmt. Es handelt sich um die vier grundfarben für die vier Zellenseiten.

Jetzt muß theoretisch nur noch ein Thumbnail in die Zelle, das mit einem Link zur Bildseite versehen ist.

Ein Link beginnt mit dem HTML-Tag <A> und endet mit </A>.

Code: Alles auswählen

<A CLASS="hell" HREF="##IMGURL##">
   <IMG SRC="##THUMBURL##" ALT="##CAPTION##" BORDER="##THUMBBORDER##" WIDTH="##THUMBWIDTH##" HEIGHT="##THUMBHEIGHT##">
</A>

CLASS="hell" sorgt wieder dafür, daß der Hintergrund der Zelle so aussieht, wie der Hintergrund des Templates.
HREF="##IMGURL##" sorgt für den Link zur Bildseite

Jetzt soll innerhalb des Links das Thumbnail eingefügt werden, damit man es später anklicken kann.

Der Imagetag hat keinen Endtag sondern wird einfach mit ">" geschlossen.

<IMG SRC=##THUMBURL## sorgt für das richtige Thumbnail.
ALT="##CAPTION##" sorgt dafür, daß als Text beim Drüberfahren mit dem Cursor der in HomeGallery definierte Beschreibungstext angezeigt wird.
BORDER="##THUMBBORDER##" WIDTH="##THUMBWIDTH##" HEIGHT="##THUMBHEIGHT##"> sorgen dafür, daß der in HomeGallery definierte Rahmen und die Größe des Thumbnails übergeben werden.

</A> schließt den Link ab.
Alles was jetzt in der Tabellenzelle dargestellt wird, ist also das Thumbnail mit dem Link zur Bildseite, aber keinerlei Beschreibungstext. Wie das mit dem Beschreibungstext geht, werde ich im nächsten Beitrag schreiben.

Gut Nacht einstweilen...

[rupie]

Hallo Kuni,

super die weiteren Erläuterungen zum Thema Thumbnail-Seite.

Da kommt man auch dahinter, was so alles mit HomeGallery möglich ist, vorausgesetzt man beschäftigt sich eingehend mit HTML/CSS.

Bin schon auf den Rest der Beschreibung gespannt.

Ich weiss, Du trinkst Apfelschorle, darüber können wir reden, aber eins sag ich dir gleich, Nachtzuschlag gibts keinen, gell!

[Florianb]

Hallo Kuni,

da habe ich ja wohl was losgetreten, letzte Woche... Aber Du machst das super.

Interessant finde ich, wie Du das Panorama eingebunden hast. Wenn Du mal auf meine HP geschaut hast, dann wirst Du festgestellt haben, dass ich viele Panos mache. Das CD Projekt, was ich im Moment baue, hat auch eine Panorama Ecke. Leider kommt man da nicht ohne Java aus, ich habe es jedenfalls noch nicht hinbekommen.

Ich erstelle die Indexseiten dazu mit HG, und verwerfe dann die erstellten Bildseiten. Statt dessen habe ich eine HTML-Vorlage für das Quicktime Movie als fullscreen, in der ich nur den *.mov Namen ändere und dann unter dem mit imgurl übergebenen Namen (page.****.htm) abspeichere.

Übrigens, womit setzt Du Deine Panos zusammen? Der Horizont ist etwas überarbeitungsbedürftig. Sonst ein sehr schönes Bild,

Ich bin gespannt auf die weiteren Erläuterungen

FLorian

[kuni-r]

Hallo Florian,

Übrigens, womit setzt Du Deine Panos zusammen? Der Horizont ist etwas überarbeitungsbedürftig. Sonst ein sehr schönes Bild,

Das Pano hab ich nur ganz schnell zur Demo zusammengesetzt. Ich hab außer der Helligkeit nix bearbeitet. Der wellenförmige Horizont hat vermutlich zwei Gründe: Das verwendete Objektiv, ein 17-35er Zoom an einer D60 verzeichnet. Die Verzeichnung hab ich aber für das Testpano nicht rausgerechnet. Und das Pano ist ohne Stativ und/oder nodalpunktadapter aus der Hand entstanden.

Zusammengesetzt hab ich's mit Panoramastudio und dort mit den Standard-Automatikeinstellungen. Es ging mir eigentlich eher ums Zeigen wie man was wo einbinden kann. Aber wenn ich mal Zeit habe, werde ich eine optimierte Version herstellen.

[kuni-r]

Jetzt zur Beschreibung unter dem eigentlichen Thumbnail, diesem nachempfundenen Etikett.

Das geht jetzt bestimmt auch irgendwie eleganter. HTML-Cracks werden uns bestimmt erzählen, wie. Ich für meinen Teil hab nicht so rasend viel Ahnung davon, deshalb behelfe ich mir mit dem, was ich durchblicke, einer Tabelle.

Da die Tabelle unter dem eigentlichen Thumbnail angeordnet werden soll, wird ein <BR> (Zeilenschaltung) vor die Tabelle gesetzt.

Danach kommt die Tabelle:

Code: Alles auswählen

<TABLE ALIGN="CENTER" CELLPADDING="2" CELLSPACING="5">
   <TR>
      <TD ALIGN="CENTER" CLASS="dia">&nbsp;##ORIGFILE##&nbsp;
      </TD>
   </TR>
</TABLE>

Der Aufbau entspricht wieder der großen Tabelle, die für die Umrandung gesorgt hat.
Die Ausrichtung soll zentriert sein (ALIGN="CENTER") Das Aussehen habe ich in der Klasse .dia im Stylesheet festgelegt. (CLASS="dia")
Der Abstand vom Text zum Tabellenrand soll 2 Pixel betragen (CELLPADDING="2"), mit (CELLSPACING="5") lege ich fest, wie breit der Tabellenrand sein soll und sorge damit für einen Abstand zwischen dem Thumbnail und dem Etikett. Der Platzhalter ##ORIGFILE## wird von zwei geschützten Leerzeichen eingegrenzt, damit zwischen dem Etikettenanfang/-ende und dem Text ein wenig Abstand bestehen bleibt.

Vor der Beschäftigung mit der verwendeten Klasse .dia aus dem Stylesheet hier nochmal der grundsätzliche Aufbau einer HTML-Tabelle:

Code: Alles auswählen

<TABLE> (die Tabelle fängt an)
   <TR> (die Zeile fängt an (table row)
      <TD> (die Tabellenzelle beginnt (table datacell)
         ...hier kommt der Inhalt der Zelle...
      </TD> (Die Zelle endet hier)
   </TR> (Die Zeile endet hier)
</TABLE> (Die Tabelle endet hier)

Jetzt aber zur CLASS="dia":

Code: Alles auswählen

.dia
    {
    background-color:#ffffff;
    color: #888888;
    font-size: 7pt;
    padding: 2px;
    }

background-color: #ffffff; (Hintergrundfarbe soll weiß sein)
color: #888888; (Textfarbe soll grau sein)
font-size: 7pt; (Textgröße 7 Punkt)
padding: 2px; (rundum 2 Pixel zwischen Text und Etikettenrand)

Eines habe ich jetzt noch ausgespart, nämlich die unterschiedlichen Farben und Effekte der Links auf den Index- und Bildseiten. Oben sieht man ja, daß ein Link mit einem <A> beginnt. Deshalb kann im Sylesheet nach diesem "a" gesucht werden:

a:link {color: #F7C401; text-decoration: none; }

Der Link kann verschiedene Zustände einnehmen, die mit einem Doppelpunkt vom "a" getrennt werden.

link = das Aussehen des Links beim Öffnen der Seite (text-decoration: none sagt, daß der Link keinen Unterstrich haben soll, wie das ja standardmäßg dargestellt wird).
a:active { color: #F8C400; text-decoration: none }
active = so soll der Link aussehen, wenn er aktiv ist. Man sieht das, wenn das Ziel des Links zum Beispiel in einem Frameset dargestellt wird und man den angeklickten Link weiterhin sieht. Geht aber nicht mit allen Browsern.
a:visited { color: Yellow; text-decoration: none; }
visited = das Aussehen des Links, wenn er bereits einmal angeklickt wurde
a:hover { color: #FFD700; text-decoration: none; }
hover = so sieht der Link aus, wenn man mit der Maus drüber fährt.

Diese Definition gilt für alle Links, die auf dieses Stylesheet beruhen. Wenn man eine Klasse, in unserem Fall die Klasse .hell, mit einer anderen Definition versehen möchte, kann man sich des Tricks bedienen, die Klasse zu definieren:

a.hell:link { color: #880000; text-decoration: none; }
a.hell:active { color: black; text-decoration: none }
a.hell:visited { color: #5D0000; text-decoration: none; }
a.hell:hover { color: #CC0000; text-decoration: none; }

Falls auffallen sollte, daß die Tabelleninhalte in diesem Beitrag nicht in allen Fällen mit denen der Mustergalerie übereinstimmen - das ist korrekt. Beim Schreiben ist mir nämlich aufgefallen, daß einige Angaben in der Mustergalerie überflüssig sind. Man könnte jetzt auch noch das Stylesheet abspecken und alle Angaben löschen, die in der Mustergalerie nicht benötigt werden. Ich hab sie aber mit Absicht drin gelassen, weil sie prima zum Spielen und Üben verwendet werden können.

Ich wünsche viel Spaß beim Bauen weiterer Galerien und beim Ausprobieren.

Wie das mit dem Weiterschalten auf den Bilderseiten durch Klick links oder rechts ins Bild funktioniert, würde schon sehr in die Internas des HTML führen, deshalb erspare ich mir eine genauere Erklärung. Nur so viel:

Ich binde das eigentliche Bild als Tabellenhintergrund ein. Die Größe der Tabelle mit diesem Hintergrundbild definiere ich aus der Bildgröße. die Tabelle hat eine Zeile und zwei Spalten:

Code: Alles auswählen

<TABLE>
   <TR>
      <TD>
      Transparentes GIF mit Link zum vorigen Bild als Zelleninhalt
      </TD>
      <TD>
      Transparentes GIF mit Link zum nächsten Bild als Zelleninhalt
      </TD>
   </TR>
</TABLE>

Diese Definition wird natürlich im Template "t_tutorbilder.htm" an entsprechender Stelle gemacht. Wer bis hierher durchgehalten hat, wird diese Stelle in der Mustergalerie sicher finden.

Sollten noch Fragen sein, bin ich gerne bereit weiterzuhelfen, wo ich kann. Einfach hier im Thread fragen, Kurznachricht schicken oder über den Sturkopf und meine private Homepage Kontakt mit mir aufnehmen.

[JensBS]

Hallo Kuni,

erst einmal ein großes Lob für die Galerie.
In Sachen html + css bin ich noch blutiger Anfänger und habe daher folgendes "Problem" mit deiner Galerie:

Auf der ersten Seite sieht man die Bilder in Form eines Dias, also "kleines Bild mit weissen Rahmen".
Irgendwie schaffe ich es nicht, die Bilder zu vergrößern bzw. den weissen Rahmen zu verringern, denn empfinde größere Bilder in der Index-Vorschau angenehmer.
Welche Einstellungen muss man genau ändern?

Kann man deine Galerie eigentlich für die eigene Homepage verwenden? Natürlich mit dem (c)-Hinweis auf dich.

Grüße
jens

[kuni-r]

Auf der ersten Seite sieht man die Bilder in Form eines Dias, also "kleines Bild mit weissen Rahmen".
Irgendwie schaffe ich es nicht, die Bilder zu vergrößern bzw. den weissen Rahmen zu verringern, denn empfinde größere Bilder in der Index-Vorschau angenehmer.
Welche Einstellungen muss man genau ändern?

Die Größe der Bilder wird innerhalb Homegallery bei den Kopfdaten unter "Thumbnails" definiert. Du mußt nur aufpassen, daß die Bilder samt Bildunterschrift innerhalb des Rahmens noch Platz haben. Den Rahmen kannst Du ebenfalls in Homegallery unter HTML-Templates beim Eintrag "je Thumbnail" verändern. Eventuell mußt Du dann noch vorne bei den Kopfdaten die Anzahl pro Reihe und pro Seite anpassen.

Kann man deine Galerie eigentlich für die eigene Homepage verwenden? Natürlich mit dem (c)-Hinweis auf dich.

Natürlich darfst Du die Templates, GDFs und Stylesheets verwenden. Ohne jede Verpflichtung. Ich würde mich natürlich freuen, wenn Du von Deinen Seiten aus auf meinen Blog-Beitrag zum Thema und/oder auf meine Galerien verlinken würdest.

Blogbeitrag: http://www.die-ritters.de/blog/?p=42
private Galerien: http://www.der-fotoritter.de/1menu/galerien.html

Viel Spaß beim Umbauen und Anpassen der Galerien an Deine Wünsche! Wenn Du noch was brauchst, mail mich einfach an.

[JensBS]

Manchmal sieht man den Wald vor lauter Bäumen nicht.
Vielen Dank, Kuni, es hat funktioniert.

Allerdings habe ich nun ein weiteres Problem:

Den Ordner "~sheets" unter hg-mustergalerie/ziel/tutorial/ kann ich nicht auf meinen webspace hochladen.
Es kommen immer Fehlermeldungen: "Transferfehler" bzw. "Kritischer Transferfehler"
Ich nutze FileZilla und der Webspace liegt bei Arcor.

Zur Kontrolle habe mal das "~" herausgenommen. Da hat es funktioniert, allerdings wurde die Galerie dann fehlerhalt aufgebaut.
(Es scheint, als ob Arcor Sonderzeichen nicht mag)

Ich müsste wohl in der "hg-mustergalerie" auch an anderer Stelle das "~" entfernen, damit es läuft.
Kannst Du - oder jemand anderes hier - mir einen Tipp geben?

[kuni-r]

Ich müsste wohl in der "hg-mustergalerie" auch an anderer Stelle das "~" entfernen, damit es läuft.
Kannst Du - oder jemand anderes hier - mir einen Tipp geben?

Du mußt den Link zum Stylesheet in den beiden Templates für die Bilder und die Thumbnails anpassen. Du findest im Header-Bereich der Templates folgende Zeile:

Code: Alles auswählen

<LINK REL="STYLESHEET" HREF="../~sheets/galerieprivat.css" TYPE="text/css">

Dort machst du die Tilde weg und speicherst das Template neu ab. Dann die Galerie aufrufen und neu aufbauen lassen, und schon klappt's auch mit dem Nachbarn bei Arcor!

[JensBS]

Hallo Kuni,

und wieder ein neues Problem

Ich habe die Tilde in den Header-Bereichen der Templates "t_tutorbilder" und "t_tutorthumbs" herausgenommen.
Nach dem Neuaufbau erscheint auch die Übersichtsseite ganz normal.

Wenn ich allerdings ein Bild anklicke, wird nur die linke Seite des Bildes in Einzelansicht angezeigt (dies entspricht ca. 1/3 des jeweiligen Bildes). Ausserdem wird es hochkant dargestellt.

Sonst habe ich nichts geändert!
Wenn ich die Tilde wieder einsetze und den Urzustand der Galerie herstelle, wird alles normal angezeigt.
Selbst die Änderung des Ordners "~sheets" in zB. "shets" oder gar "huhu" (sowie die entsprechenden Templates-Änderungen) haben bei mir keinen Erfolg!
Wenn ich die Tilde im Template "t_tutorbilder" NICHT ändere und verwende, werden die Bilder richtig dargestellt, allerdings bleibt der Hintergrund WEISS. Dein grauer Hintergrund sowie dein gelbunterlegter Überschriftsstreifen werden nicht dargestellt.
Der entsprechende Text und auch die gelben Pfeile werden angezeigt.

Gibt es noch ein Stylesheet, der geändert werden muss?

Zur Änderung nutze ich NVU. Dein Original-Header wird so dargesellt:
<link rel="STYLESHEET" href="../%7Esheets/galerieprivat.css"
Also "%7E" anstelle der Tilde "~".
Könnte es daran liegen?

[JensBS]

Problem gelöst !

Ich habe den Ordner "sheets" nach dem Hochladen in "~sheets" umbenannt und nun funktioniert es.

Das soll nun einer verstehen

[Florianb]

Tsja,
ich bastel gerade mal wieder an einer Galerie herum. Die Bilder sind, da es sich um Panoramen handelt, nicht alle gleich breit.

Leider bekomme ich es nicht hin, dass die Thumbs zentriert im "Diarämchen" sitzen.

Hat jemand eine Idee?

Danke

Ich vergaß, die Galerie ist im Prinzip so aufgebaut, wie Kuni es hier vorgestellt hat. Ich hätte zwar gerne eine floatende version, aber das ist ein anderes Projekt; bisher bin ich daran gescheitert.

[Florianb]

Hallo an alle!

Ich habe viel herumprobiert, aber ich bekomme es einfach nicht hin. Die Thumbs werden nicht zentriert im "Diarähmchen" dargestellt.

Wenn ich es nach dem Tuto richtig verstanden habe, werden die Thumbs in HG im Feld "Je Thumbnail" definiert:

Dort habe ich nach Kuni - etwas aufgeräumt - folgendes stehen:

Code: Alles auswählen

<TD
      ALIGN="CENTER" VALIGN="MIDDLE" HEIGHT="200" WIDTH="200" CLASS="thumbs">


<A
      HREF="##IMGURL##">
      <IMG SRC="##THUMBURL##"
      ALT="##CAPTION##"
      BORDER="##THUMBBORDER##"
      WIDTH="##THUMBWIDTH##" HEIGHT="##THUMBHEIGHT##"> 
</A>

<BR>

<TABLE CELLPADDING="2" CELLSPACING="5" VALIGN="BASELINE">

<TR>
     <TD   WIDTH="150" ALIGN="CENTER" CLASS="etibg"><FONT SIZE="-2"
           FACE="Verdana,Helvetica">&nbsp;##ORIGFILE##&nbsp;</FONT> 
     </TD>

</TR>

</TABLE>


Dabei wird das eigentliche Bild <IMG SRC="##THUMBURL##" ja definiert. Das hätte ich jetzt gerne zentriert im Rähmchen, und zwar unabhängig von den Bild Dimensionen, die bei Panoramen ja unterschiedlich innerhalb einer Galerie sein können. Die Tabelle für das Rähmchen wird ja wohl im Start Tag definiert. Die Zentrierung bezieht sich aber hier auf die Seite.

Wer kann mir da weiterhelfen?

LG Florian

[wolboe]

Hallo Florian,

versuch's mal damit:

erste TD-Zeile um style="vertical-align: middle;" zu erweitern oder die gleiche Anweisung in die CLASS="thumbs" einbinden.
Warum das valign="middle" nicht wirkt , kann ich nicht sagen - evtl. wird es vom Inhalt Deines Style-Sheet übersteuert.

Gruß
Wolfgang

Code: Alles auswählen

<TD
      ALIGN="CENTER" VALIGN="MIDDLE" HEIGHT="200" WIDTH="200" CLASS="thumbs" style="vertical-align: middle;">


<A
      HREF="##IMGURL##">
      <IMG SRC="##THUMBURL##"
      ALT="##CAPTION##"
      BORDER="##THUMBBORDER##"
      WIDTH="##THUMBWIDTH##" HEIGHT="##THUMBHEIGHT##">
</A>

<BR>

<TABLE CELLPADDING="2" CELLSPACING="5" VALIGN="BASELINE">

<TR>
     <TD   WIDTH="150" ALIGN="CENTER" CLASS="etibg"><FONT SIZE="-2"
           FACE="Verdana,Helvetica">&nbsp;##ORIGFILE##&nbsp;</FONT>
     </TD>

</TR>

</TABLE>


[Florianb]

Hallo Wollboe,

Danke für die Antwort, ich war fast zur gleichen Zeit auf die Lösung gekommen: Es ist in der Tat eine Konkurenz / Diskrepanz

Bei Panoramen kommt es leicht zu Seitenverhältnissen von 700 x 175 Px.

Wenn im HG Blatt Kopfdaten die Thumnails auf 500 x 500 eingestellt sind, aber im im Blatt HTML-Templates / Je Thumbnail die Zelle anders definiert ist

Code: Alles auswählen

hight="200" width="200"


dann kommtes zur Konkurenz zwischen der Thumbnailgröße und der vorgegebenen Größe für das Tabellenfeld. HTML reagiert damit, das Tabellenfeld zu vergrößern (habe ich in selfhtml gefunden) aber leider gehen dabei Formatierungen wie zentriert usw verloren (habe ich nicht gefunden aber vermute ich). D.h. hier muß man nach den Dimensionen des Thumbnails sehen und die Tabellenfelder entspre´chend anpassen

Code: Alles auswählen

hight="320" width="600"


dann klappt es.

(es gibt eben auch quadratische "Panoramen", in dem Fall also Bilder, die aus mehreren Einzelbildern zusammengesetzt sind, aber eben nicht einreihig nebeneinander, sondern mehrreihig)

Also nicht ein Tabellenformatproblem sondern eine Konkurenz zwischen zwei Formatierungen

[Hilpers]

Erst einmal ein großes Lob an alle die hier Lösungen bereitgestellt haben, es hat mir weitergeholfen.

Allerdings bleibt für mich noch eine Frage offen, falls ich es nicht überlesen habe.

Wie kann ich einen Rahmen direkt um ein Bild machen?

Hilpers

[wolboe]

...........Wie kann ich einen Rahmen direkt um ein Bild machen?...

Hallo Hilpers,

im Image-Template wird das Bild meist über

Code: Alles auswählen

##IMAGE##   


eingebunden.
Man kann statt dessen aber auch - siehe Platzhalter für HomeGallery

img style="border-width:10px; border-color: red;" src="##IMGSRC##" alt="##IMGALT##" title="##IMGALT##"
width="##IMGWIDTH##" height="##IMGHEIGHT##"
border="##IMAGEBORDER##"
(den kursiv geschrieben Teil mit mit "<" beginnen und mit ">" beenden!)
verwenden und mit den rot geschriebenen css-Style-Elementen Rahmen erzeugen bzw. deren Aussehen umfangreich beeinflussen.
Dazu sollte man aber einige Grundlagen über CSS gelesen haben.
Speziell zu Rahmen gibt es hier mehr!
Gruß
Wolfgang

PS: @stefan: warum kann man hier im Forum nicht mehr [ code][ /code] verwenden?

[Hilpers]

Vielne Danke Wolboe,

allerdings habe ich noch nicht so viel Ahnung von css,
aber ich probiere es trotzdem einmal.

Hilpers

[kuni-r]

Vielne Danke Wolboe,

allerdings habe ich noch nicht so viel Ahnung von css,
aber ich probiere es trotzdem einmal.

Hilpers

Wenn Du es nicht mit CSS machen möchtest, kannst Du dem jeweiligen Bild, wie hier unten gezeigt, oder auch der Tabelle, die eventuell das Bild umschließt, ein STYLE zuweisen.

Code: Alles auswählen

[IMG SRC="images/logoTeamgrau.jpg"
          WIDTH="157"
          HEIGHT="117"
          ALIGN="middle"
          STYLE="border-top: 3pt gray solid; border-right: 3pt #F3F3F3 solid; border-bottom: 3pt white solid; border-left: 3pt silver solid"]
         

Die beiden äußeren eckigen Klammern müssen durch <und> ersetzt werden. Mußte ich austauschen, damit ich den Tag im Codefenster darstellen kann. Der besseren Übersicht wegen habe ich die Schlüsselwörter untereinander geschrieben. Das STYLE sorgt nun dafür, daß um das Bild ein Rahmen entsteht, der wie ein Schrägschnittpassepartout aussieht.

Wenn Du das im Stylesheet definierst, kannst Du in allen Dateien auf dieses Feature zugreifen, die auf Deinem Stylesheet basieren. Du definierst Dir eine CLASS innerhalb des Stylesheets, die Du dann statt STYLE= mit CLASS="Rahmen" aufrufst.

Code: Alles auswählen

.rahmen {
border-top: 3pt gray solid;
border-right: 3pt #F3F3F3 solid;
border-bottom: 3pt white solid;
border-left: 3pt silver solid;
}

Ach ja, und hier kann der Rahmen in der Praxis begutachtet werden:
http://www.die-ritters.de/blog/?page_id=107

[Werner I.]

Hallo zusammen,

ich habe mich mal etwas mit der Mustergallery beschäftigt; einfach genial.

Jetzt habe ich eine Frage: wenn ich den fett gedruckten gelben Überschriftsbalken der HP ändern will, ändere ich das ja im Stylesheet-Bereich "th"; das klappt auch.

Wenn ich nun diesen Bereich in beiden Templates farblich unterschiedlich haben will, hab ich mir gedacht, ich kopiere den TH-Bereich der Galerieprivat.css und ändere einfach den Namen von "TH" in "TH2". Im TH2 ändere ich die Farbe und dann natürlich auch im Template der Bilder den entsprechenden Bereich auf TH2. Das klappt aber nicht so.

Gibt es da noch einen anderen Bereich, den ich berücksichtigen muss?

Danke für die Unterstützung.

Werner

[kuni-r]

Hallo zusammen,

ich habe mich mal etwas mit der Mustergallery beschäftigt; einfach genial.

Jetzt habe ich eine Frage: wenn ich den fett gedruckten gelben Überschriftsbalken der HP ändern will, ändere ich das ja im Stylesheet-Bereich "th"; das klappt auch.

Wenn ich nun diesen Bereich in beiden Templates farblich unterschiedlich haben will, hab ich mir gedacht, ich kopiere den TH-Bereich der Galerieprivat.css und ändere einfach den Namen von "TH" in "TH2". Im TH2 ändere ich die Farbe und dann natürlich auch im Template der Bilder den entsprechenden Bereich auf TH2. Das klappt aber nicht so.

Gibt es da noch einen anderen Bereich, den ich berücksichtigen muss?

Danke für die Unterstützung.

Werner

th ist ein fester, nicht änderbarer Tag. In diesem Fall mußt Du anders vorgehen:
in der Definition des th-Tags mußt Du die Angaben für Textfarbe und Hintergrund löschen. So sieht er vorher aus:

Code: Alles auswählen

th { font-family: Verdana, Arial, Helvetica, Helv, sans-serif; font-size: 10pt; color:#000000; background-color:#F7C401; alignment: left; text-align: left; padding: 1px }

Du löschst also dort

Code: Alles auswählen

color:#000000; background-color:#F7C401;

und definierst die gewünschte Farbkombination jeweils als eigene Class:

Code: Alles auswählen

.balkengelb
    {
    background-color:#F7C401;
    color: #000000
    }

Auf diese Art definierst Du Dir die gewünschten unterschiedlichen Farben und trägst sie innerhalb des jeweiligen "th" als class ="balkengelb".

Obacht! Eine Class im CSS muß immer mit Punkt vorneweg definiert werden, aufgerufen wird sie dann ohne Punkt.

[Werner I.]

Hallo Kuni,

danke für den Tip: es hat bestens geklappt.

Hab jetzt mal zwei Bereiche meiner HP hochgeladen und mußte feststellen, dass im IE7 alles korrkt dargestellt wird, bei Firefox aber die Überschriftsbalken ohne die hinterlegte Farbe (nur die schwarze HG-Farbe) bleiben.

Was läuft denn da bei Firefox falsch? Hast Du ne Ahnung?

Danke nochmals

Werner

[kuni-r]

Hallo Werner,

Was läuft denn da bei Firefox falsch? Hast Du ne Ahnung?

weiß ich ehrlich gesagt nicht. Ich vermute mal, Du hast die Class an einer Stelle eingefügt, die nicht korrekt ist. IE ist in solchen Fällen fehlertoleranter und zeigt an, wogegen Firefox die Anzeige verweigert.

Die eigentlichen beiden Zellen für den Balken werden ja von einer TABLE (Tabelle) umschlossen.

Wenn Du die Farben im Stylesheet bei TH rausgemacht und Dir eine eigene Classe definiert hast, setz doch probehalber die CLASS mal für die TABLE ein.

Code: Alles auswählen

<TABLE CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BORDER="0" CLASS="roterbalken">
     <TR>
          <TH ALIGN="LEFT">
          &nbsp;##GALLERYNAME##
          </TH>
          <TD ALIGN="right">
          ##IMGID##&nbsp;
          </TD>
     </TR>
</TABLE>