Lektion 12 - Galerie mit Java-Script Unterstützung

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 12 - Galerie mit Java-Script Unterstützung

Beitrag von Admin » Di 19. Aug 2014, 11:26

Galerie mit Java-Script-Unterstützung

Häufig werde ich gefragt, ob man es nicht irgendwie hin bekommen könnte, dass das Bild nicht im gleichen Fenster öffnet. Viele Besucher klicken automatisch auf das Kreuz in der linken oberen Ecke um, die Seite zu schließen.

Nun, das Verhalten eines Browsers wird jedem Surfer selber überlassen. Ein guter Web-Designer schreibt einem Leser nicht vor, wo sich ein neuer Link öffnen soll, ob im neuen Fenster, im neuen Tab oder im gleichen Fenster.

Es gibt ein Attribut, was bewirkt, dass sich ein Link in einem neuen Fenster öffnet. target

Mit "target" weist man einem Link ein Ziel zu. Diese Technik ist ein Überbleibsel aus der Frame-Technik. Um dieses Attribut also ungestraft nutzen zu können, müsstest du den Doctype deiner Webseite in frameset ändern, wenn du beim Überprüfen des Html-Textes keine Fehlermeldung bekommen möchtest.

Eine Alternative dazu ist ein Java-Script. Es öffnet den Link in einem Popup Fenster, das in der Größe anpassbar ist.

Okay fangen wir mal an.

Zuerst erstellt du wieder Thumbnails zu deinen Bildern. Füge sie in einer unsortierten Liste ein. Lege eine ID für die Galerie an und formatiere die Liste ohne Listenpunkten. Stelle die Außen und Innenabstände wie gewohnt auf 0px ein.

[col]#galerie

Boxeigenschaften:
  • Außenabstände: 0px
    Innenabstände: 0px
    Breite: je nachdem wie viele Thumbnails die Galerie nebeneinander anzeigen soll.
#galerie li

Boxeigenschaften:
  • Höhe, Breite (Größe der Thumbnails einstellen)
    Außenabstände 1px (variabel, sodass die Thumbnails nicht aneinanderkleben)
Nun wird das Java-Script eingefügt. Klicke das erste Thumbnail an. Klicke in der Statusleiste auf <a>|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
Wähle in der Popup-Liste "Erweiterte Einstellungen". Wechsele in das Register JavaScript Events.[popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion12-2.png[/popup]
Wähle in der Attribute Liste "onclick" und schreibe als Wert "return" bild(this.href)

Mit diesem Befehl sagst du, dass beim Anklicken der Wert aus dem Script "bild" ausgeführt werden soll.

Bestätige den Assistenten mit OK.

Füge diesen Befehl bei jedem Bild in den a-TAG ein.

Speichere die Seite und öffne sie über den Editor-Button im Texteditor.

Jetzt wird die Funktion in den Html-Kopf eingefügt.

Suche den schließenden </head> TAG auf deiner Seite. Füge vor dem TAG das Script ein:

Code: Alles auswählen

<script type=text/javascript>
function popup (url) {
fenster=window.open(url, "Popupfenster", "width=300px, height=300px, resizable=yes");
fenster.focus();
return false;
}
</script>
Bild

Ok, was bedeutet das Script genau?

Code: Alles auswählen

<script type=text/javascript>
Hier beginnt das Script.

Code: Alles auswählen

function popup (url) {
Die Funktion ist öffnen eines Links { startet die Funktion

Code: Alles auswählen

fenster=window.open(url, "Popupfenster", "width=300px, height=300px, resizable=yes");
Ein neues Fenster öffnen (link öffnet im Popup Fenster in der Größe 300px Breite 300px Höhe, es soll in der Größe veränderbar sein.

Code: Alles auswählen

fenster.focus();
Das Fenster steht im Fokus

Code: Alles auswählen

return false;
nicht zurückgehen Schließt die Funktion

Code: Alles auswählen

</script>
Ende des Scriptes.

Die Größe des Popup Fensters kannst du ändern, indem du die Werte width und height veränderst.

Speichere und schließe das Texteditor-Fenster. KompoZer fragt, ob die Änderungen übernommen werden sollen. Bestätige diese Abfrage.

Öffne deine Galerie in der Browservorschau und klicke eines der Bilder an.

Viel Spaß beim Nachbasteln!

Lösung

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 12 - Galerie mit Java-Script Unterstützung

Beitrag von kp2709 » Mi 10. Sep 2014, 21:31

hallo,
hier der link von dieser lektion :)

http://reikuma27.reikuma.bplaced.de/web ... lerie.html

lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 243
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 12 - Galerie mit Java-Script Unterstützung

Beitrag von camouflage1984 » Mi 10. Sep 2014, 22:10

Hallo Kurt

Das hast du einen kleinen Fehler gemacht.

Code: Alles auswählen

function popup 
steht in deinem Javascript, aber bei deinen Bildern steht

Code: Alles auswählen

onclick='"return" bild(this.href)'
Es wird die Funktion popup aufgerufen aber diese ist bei deinen Bildern angegeben sondern bild.

Bitte entferne auch die Hochkommata von

Code: Alles auswählen

"return"
Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 12 - Galerie mit Java-Script Unterstützung

Beitrag von kp2709 » Fr 12. Sep 2014, 17:21

hi, ich habe vergessen dir meine korrektur zu zeigen oder? :?
http://reikuma27.reikuma.bplaced.de/web ... lerie.html

dies wäre es
gruß
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 12 - Galerie mit Java-Script Unterstützung

Beitrag von anke » Fr 12. Sep 2014, 18:26

Das funktioniert jetzt super :D

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 12 - Galerie mit Java-Script Unterstützung

Beitrag von Hellriders » Sa 31. Okt 2015, 20:39

irgend was passt nicht so. :o

galerie

gruß micha

camouflage1984
Beiträge: 243
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 12 - Galerie mit Java-Script Unterstützung

Beitrag von camouflage1984 » Sa 31. Okt 2015, 21:06

Hallo Michael

Da ist ein kleiner Fehler in dem Aufruf deiner js Funktion ;)

Code: Alles auswählen

return bild(this.href)
ist bestimmt von Ankes Beispie kopiert??? Aber anke hat bei Ihrem Beispiel auch den Namen der Funktion geändert ;) von popup auf bild :o

Code: Alles auswählen

function bild(url)
wenn du jetzt auch deine Funktion den Namen bild gibst funktioniert es auch ;)

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast