✔ Thumbnails in Vollbild

N

Norman_79

Mitglied
Hallo liebe Gemeinde,

ich weiß der Titel ist sicherlich nicht der beste aber ich weiß nicht wie ich es anders nennen soll.

Ich möchte gerne folgeden Effekt erziehlen:

Wenn man auf ein Thumbnail klickt soll das Bild in Vollbild erscheinen und zwar so ,dass der Hintergrund der Seite "einfriert" und das Vollbild sich über die Seite legt.

Besser kann ich es nicht beschreiben und eine Bsp. Seite fällt mir jetzt auch gerade nicht ein.
Ich denke aber Ihr wisst was ich meine.

Könnt Ihr mir sagen wie dieser Effekt mit divs und javascript realsiert werden kann?

Mfg
Norman
 
Wow,
Okay das ist nicht schlecht. Wieder was dazu gelernt. Vielen Dank.

Kann man sowas auch selber "programmieren" ohne das man schon vorhandene Klassen bzw. Funktionen übernehmen muss?
 
Maik hat gesagt.:
Theoretisch ja - aber wozu das Rad neu erfinden?

mfg Maik
Zum Vergrößern anklicken....

Um zu lernen wie es funktioniert ;)

Also wenn Du lernen willst programmier es selber wenn es nur für den Einsatz ist ohne das Du die Sprache JavaScript brauchst nimm ein vorgefertigtes Script.

Es wird grob gesagt als Basis ein DIV Element in den Body gelegt mit einer absoluten positionierung und einen gewissen Z-Index. Dazu die Hintergrundfarbe schwarz zum Beispiel , Weite und Höhe noch anpassen und dies stellt dann die gesammte Grundfläche. Mit einer Transparenz bekommst dann den Effekt hin das der alte Hintergrund nen bissel ausgegraut ist.

In diese neue Zeichenfläche kommen dann die Inhalte rein wie Bilder oder eben die gewünschte Oberfläche. Auf den Bildern / Thumbs selber liegen Mouseevents wie Click welche das Script starten welches die Oberfläche zusammen baut und bestimmen welche Bilder geladen werden.
Mehr ist es eigentlich schon gar nicht grob gesagt , das dort ein wenig mehr Aufwand drinnen steckt kann man denk ich gut erkennen.

MfG
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück