HTML / Tipps / Bildergalerie mit iFrames[IE|M|O]

von: Werner Zenk

Eine Bildergalerie mit iFrames.
Diese Galerie benötigt kein JavaScript und ist sehr einfach anpassbar.

Demo:


Galerie zum herunterladen: galerie.zip

 

 

Bildergalerie mit JavaScript

Aufgrund der vielen Anfragen, finden Sie hier eine Bildergalerie
mit einem farbigen Hintergrund.
Diese Bildergalerie benötigt JavaScript.

Demo:



Galerie zum herunterladen: galerie_js.zip

 

 

Bildergalerie mit JavaScript und Bildbeschreibung

Ein weiteres Demo diesmal mit einer Bildbeschreibung:
Demo

Galerie zum herunterladen: galerie_bs_js.zip
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?
Kommentare: 28 » aufmachen   
Andrea:
Vielen Dank, jetzt kapier ich endlich wie das mit den Frames funktioniert. Ich habe die Galerie bereits in meiner Website eingebaut. *Super*

Anyone:
Also das ist wirklich gut, gefällt mir

Judith:
Klasse, endlich mal was unkompliziertes für Bildergalerien

Georg:
Super, gefällt mir sehr gut.Ein Problem gibt es aber noch. Wenn ich das Browserfenster schmäler mache, springt das rechte IFrame nach unten. Kann man das verhindern?

Werner:
eine Möglichkeit wäre die Frames mit CSS absolut zu positionieren:
<div style="position: absolute; top: 100px; left: 200px;">Frame 1</div>
<div style="position: absolute; top: 100px; left: 300px;">Frame 2</div>
Die Werte müssen, je nach Frame, angepasst werden! Oder die Frames in eine Tabelle einbauen
<table>
 <tr>
  <td>
   Frame 1
  </td>
  <td>
   Frame 2
  </td>
 </tr>
</table>


Georg:
Super, herzlichen Dank.

migue:
Prima, gefällt mir sehr gut!

oliver:
Wie bekomme ich innerhalb dieser Galerie einen anderen Hintergrund? oder besser noch: wie kann ich den Hintergrund der Galerie transparent machen?

Werner:
Tipps dazu findest du im Forum unter: Hintergrund bei iFrames

SchErn:
Danke für den Tipp... ) Das ist wirklich was echt Brauchbares und sehr sehr unkompliziert zu handhaben. Besten Dank dafür ! Grüße aus Wien...

Franziska:
Gefällt mir wirklich gut! Würde aber gern noch Bildunterschriften einblenden zu jedem groß angezeigten Bild. Ist das möglich?

Werner:
Füge in jedem Link folgendes hinzu:
<a href="#"
   onClick="document.getElementById('titel').innerHTML='Bildunterschrift zu bild 1';"
>bild1</a>

Und unterhalb des Frames:
<div id="titel"></div>


Michaela:
Hallo, wieso ist die Galerie so klein? Wie kann ich sie vergrößern? LG Michaela

Werner:
Die Größe kann im iFrame-Tag geändert werden.

christian:
Hallo. Ich möchte gerne die Galerie für quer. Hab die Größen schon geändert aber der Scrollbalken soll noch möglichts nach unten... kann jemand helfen?!Danke

Sascha:
Is toll,die Galerie, aber ist es auch möglich, dass das erste Bild sofort startet?

luggi:
das programm ist echt super

gianni:
super gallerie

Willy:
Sehr schön und wirklich einfach in die eigene Homepage zu integrieren.

Nikolaus:
wirklich schönes Tool. Ich hab zwar gelesen, was die Antwort auf Franziskas Frage ist, aber bei mir erscheint der Titel immer in der Navigationszeile. Ich würd's aber gerne unter dem jeweils geöffnete Bild stehen haben. Ich bin noch ziemlich frisch in html etc. Bestimmt hab ich's nur an der falschen Stelle eingefügt.

Hans:
Ich find die Galerie SUPER! Perfekt wäre sie nur dann, wenn es noch einen zusätzlichen *Weiter* und *Zurück* button gäbe!

Frank:
Hallo, wie bekomme ich die Galerie bei mir eingebaut? Ich stehe voll am Schlauch.

Werner:
Einfach die vorhandenen Bilder durch andere ersetzen.

Anonym:
Wieso kann man nicht einfach den html code dahin setzen? ist doch viel einfacher und besser! Ich werde echt langsam wütend!

Maximilian:
Hoffe mir antwortet hier noch jmd nicht das das schon zu alt ist... aber ich versthe nicht ganz wie ich die bilsbeschreibung einbaue kann mir da jmd vll helfen?danke schon mal im voraus!danke schon mal im voraus!

Werner:
In der Datei "navigation.htm" steht z.B.: ''Beschreibung Bild 1'' und dieser Text muss für jedes Bild geändert werden.

Alena:
Die Galerie ist total super =)Nur auf meiner Homepage ist nicht genug Platz Darum würde ich die Navigation gerne unter dem großen Bild haben, dass man die Navigation waagrecht scrollen kann. Wäre das irgendwie möglich?

Werner:
Ja, dazu braucht man nur etwas HTML. Beispiel für Galerie eins: 1. Vertausche in der Datei "galerie.htm" die zwei iFrames miteinander.
2.Füge dazwischen einen BR-Tag ein.
3. Ändere die Größe des zweiten iFrames (in width="250" height="100")
4. Entferne in der Datei "navigation.htm" alle BR-Tags - Fertig.

Nadiene:
Find ich echt toll! aber alles ein bisschen kompliziert aufgebaut

Harry:
Sicher eine schöne Sache, aber wie kann ich horizontal in der Navi-Leiste scrollen? Habe die iframes getauscht, funktioniert sonst alles bestens.Danke für eine Antwort.

Werner:
Setze deine Bilder in der Navi-Leiste in eine Tabelle. Beispiel:
<table>
 <tr>
  <td><img src="bild1"></td>
  <td><img src="bild2"></td>
  <td><img src="bild2"></td>
  <td><img src="bild4"></td>
  <td><img src="bild5"></td>
   u.s.w
 </tr>
</table>


Ingrid:
Vielen Dank! Ein Programm, wo man nicht vom Web abhängig ist und sie ist einfach in die eigene Homepage zu integrieren. Weiter so tolle Sachen. Lg Ingrid! Einfach Klasse.

Christian:
Hallo, kann ich bei einem der "großen" Bilder auch eine Image Map einfügen? Wenn ja, wie???Grüße Christian

Werner:
Bei dem Beispiel mit javascript leider nicht. (Anmerkung: Die Bilder müssen eine einheitliche Größe haben!) Mehr dazu unter » Image Maps

Günter:
wie kann ich das bei meinen Bilder realisiern? das ist genau das was ich such. Zu jedem Bild in meiner Bildergalerie möchte ich meinen Besucher ein Kommentarfeld zuverfügung stellen also im prinzip wie das hier nur was fehlt ist das datum, die zeit wann der text geschrieben wurde. so soll der text auch sortiert sein (Datum / Zeit)danke Günter goldpixler.de

PCChrizzly:
Hi Leute,das Script ist echt easy aufgebaut und leicht anpassbar. Nun stehe ich vor dem Problem, das ich die Galerie in einem Frame einbauen möchte auf einer Internetseite die ich mit Office Publisher geschrieben habe. Wenn ich versuche einen Codefragment einbauen möchte, bekomme ich die Meldung das bestimmte dateien nicht gefunden werden, obwohl ich alle Dateien in den gleichen Ornder packe, wo auch meine Index- Datei steckt.Für Hilfe wär ich Dankbar,Gruß Chrille

Werner:
Um dir zu helfen, müsste ich erst das Prog. "Office Publisher" herunterladen und installieren! Wenn bestimmte Dateien nicht gefunden werden ist folgendes zu beachten: • Stimmt der Pfad zur Datei • Dateien ohne Leerzeichen und in Kleinbuchstaben.

Tim:
Bei mir ist hinter dem großen Bild ein weises Fenster, wie bekomme ich das weg ? bzw wie gebe ich dem Fenster eine Farbe ? Danke!

Werner:
Wenn du dem Fenster eine Hintergrundfarbe geben willst, dann musst du die "Bildergalerie mit JavaScript" verwenden.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Image-Toolbar - Neu im Internet Explorer 6 ist die Image Toolbar. Sie erscheint automatisch, sobald der Mauszeiger auf einer Grafik größer als 130*130 Pixel ruht. Über die angebotenen Icons kann die jeweilige Grafik abgespeichert, gedruckt oder per Email verschickt werden. So lässt sich die Image Toolbar abschalten  Bild als HTML-Button - Bild als HTML-Button, Bild als Submit-Button, und um eine JavaScript-Funktion zu starten.  Farbfamilie  Helle Farben - Farben sind eines der wichtigsten Gestaltungsmittel auf einer Webseite.  Umlaute, Sonderzeichen, Unicode und ANSI-Code  Farbkennwörter - (CSS) Diese Farben zeigen Ihre PC-Farbeinstellung an.  Ladehinweis bei großen Bildern anzeigen - Große Bilder sollten mit einem Ladehinweis erscheinen, damit der Besucher die Seite nicht verlässt bevor er das Bild gesehen hat.  Beispiele für Farbkombinationen  1536 - Farben - Farbtabelle  Grafik Einbinden - So werden Grafiken und Bilder richtig eingebunden (referenziert).  Schriftarten  Einen Link zum Seitenanfang setzen - Ist die Webseite etwas lang geworden, kann man einen Link zum Seitenanfang setzen.  Quelltext mit Format - Es gibt gute Gründe einen Quelltext zu formatieren  Bildschutz (4)  Frameset Vorlagen (3)  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner