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 galerie.zip
 Version vom: 31.10.2010
 Dateigröße: 92,6 KB
 Dateien: 14

  1.jpg - 11,9 KB - 190x190 - 31.10.10
  2.jpg - 10,2 KB - 190x190 - 31.10.10
  3.jpg - 6,1 KB - 190x190 - 31.10.10
  4.jpg - 10 KB - 190x190 - 31.10.10
  5.jpg - 9,6 KB - 190x190 - 31.10.10
  6.jpg - 11,1 KB - 190x190 - 31.10.10
  s_1.jpg - 6,1 KB - 50x50 - 31.10.10
  s_2.jpg - 6,1 KB - 50x50 - 31.10.10
  s_3.jpg - 4,9 KB - 50x50 - 31.10.10
  s_4.jpg - 5 KB - 50x50 - 31.10.10
  s_5.jpg - 5,4 KB - 50x50 - 31.10.10
  s_6.jpg - 5,8 KB - 50x50 - 31.10.10
  galerie.htm - 309 Byte - 31.10.10
  navigation.htm - 791 Byte - 31.10.10

 

 

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 galerie_js.zip
 Version vom: 31.10.2010
 Dateigröße: 93,2 KB
 Dateien: 15

  1.jpg - 11,9 KB - 190x190 - 31.10.10
  2.jpg - 10,2 KB - 190x190 - 31.10.10
  3.jpg - 6,1 KB - 190x190 - 31.10.10
  4.jpg - 10 KB - 190x190 - 31.10.10
  5.jpg - 9,6 KB - 190x190 - 31.10.10
  6.jpg - 11,1 KB - 190x190 - 31.10.10
  s_1.jpg - 6,1 KB - 50x50 - 31.10.10
  s_2.jpg - 6,1 KB - 50x50 - 31.10.10
  s_3.jpg - 4,9 KB - 50x50 - 31.10.10
  s_4.jpg - 5 KB - 50x50 - 31.10.10
  s_5.jpg - 5,4 KB - 50x50 - 31.10.10
  s_6.jpg - 5,8 KB - 50x50 - 31.10.10
  anzeige.htm - 465 Byte - 31.10.10
  galerie.htm - 409 Byte - 31.10.10
  navigation.htm - 987 Byte - 31.10.10

 

 

Bildergalerie mit JavaScript und Bildbeschreibung

Ein weiteres Demo diesmal mit einer Bildbeschreibung:
Demo

Galerie zum herunterladen: galerie_bs_js.zip galerie_bs_js.zip
 Version vom: 31.10.2010
 Dateigröße: 93,6 KB
 Dateien: 15

  1.jpg - 11,9 KB - 190x190 - 15.12.10
  2.jpg - 10,2 KB - 190x190 - 15.12.10
  3.jpg - 6,1 KB - 190x190 - 15.12.10
  4.jpg - 10 KB - 190x190 - 15.12.10
  5.jpg - 9,6 KB - 190x190 - 15.12.10
  6.jpg - 11,1 KB - 190x190 - 15.12.10
  s_1.jpg - 6,1 KB - 50x50 - 31.10.10
  s_2.jpg - 6,1 KB - 50x50 - 31.10.10
  s_3.jpg - 4,9 KB - 50x50 - 31.10.10
  s_4.jpg - 5 KB - 50x50 - 31.10.10
  s_5.jpg - 5,4 KB - 50x50 - 31.10.10
  s_6.jpg - 5,8 KB - 50x50 - 31.10.10
  anzeige.htm - 465 Byte - 31.10.10
  galerie.htm - 681 Byte - 31.10.10
  navigation.htm - 1,5 KB - 31.10.10

    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?
Kommentare: 39 » 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:
Einführung in HTML  Farbkennwörter - (CSS) Diese Farben zeigen Ihre PC-Farbeinstellung an.  Hyperlinks und Verweise  Kommentare - Ein HTML- oder JavaScript-Quelltext, der zum Beispiel mit Leerzeilen und Einrückungen übersichtlich aufgebaut ist und an entscheidenden Stellen Umbrüche und Kommentare aufweist, ist deutlich leichter zu pflegen.  Bildschutz (2)  Automatische Texteingabe - Automatische Texteingabe (autocomplete) in Formularfeldern verhindern oder erlauben.  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.  Leuchtfarben (Neonfarben)  Regenbogenfarben  Linie zwischen Bild und Link entfernen - Bild und Text wird in einem Link eingebunden. Dazwischen entsteht aber eine hässliche Linie. So einfach können Sie diese entfernen...  216 Standard-Farben - Das ist eine Aufstellung der „browsersicheren” Internet-Farben (Farbtabelle), die auf jedem System, mit jedem Browser gleich dargestellt werden und sich somit optimal fürs Webdesign eignen.  Meta-Angaben  Bildschutz (3)  Bilder nebeneinander stellen - Mit Hilfe einer HTML-Tabelle können Sie sehr einfach Bilder nebeneinander oder untereinander stellen.  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner