JavaScript Lightbox, Fancybox etc.

[wasi1306]

Hey ho,

ich melde mich mal wieder zu später Stunde mit einem kleinen Problem.

Und zwar möchte ich auf die Startseite einer Homepage beim Seitenaufruf ein Bild einblenden.
Gedacht sein soll diese Bild als Information über aktuelle Angebote, Aktionen, etc.

Hab schon ein bisschen gegoogelt und bin dabei auf die Fancybox gestoßen. Mein Hauptproblem dabei ist aber, dass ich nicht genau weiß, wie ich den Code richtig einbinde. Ich nutze ein fließendes Rasterlayout und habe eigentlich zwei Haupt-div-Bereiche: Einmal das Menü und den Contentbereich. Ich würde die Fancybox aber gerne zentriert über alles einblenden. Wenn ich den Code nun in eines der divs oder in den gridcontainer kopiere, taucht die Fancybox logischerweise auch dort auf.

Ich hab mal zwei Bilder hochgeladen wie ich mir das vorstelle, ist schwer zu erklären

 

[Daaron]

Lightbox-Container landen normalerweise vor dem schließenden </body>.... Aber normalerweise kümmern sich die Dinger doch eh selbst und legen das Träger-Element selbsttätig vor den schließenden </body> an.... und da die Dinger auch eigenen CSS-Code mitbringen richtet sich die Lightbox auch immer selbsttätig mittig über den gesamten Bildschirm mit Verdunklung der Außenbereiche aus.

Oh, und lass dir nicht einfallen, die Lightbox automatisch bei jedem Seitenbesuch zu öffnen. Deine Besucher werden dich dafür hassen und einfach wegbleiben.

 

[wasi1306]

Perfekt, Danke! Mit der Lightbox hats so geklappt, wie ich es mir vorstelle!
Wenn du mir jetzt noch erklärst, wie ich die Box automatisch laden lasse, wär ich glücklich

Keine Sorge, ist nur auf der Startseite und nur hin und wieder für wenige Tage.

 

[Tion1392]

Als Beispiel (mit Fancybox):

$('a#yourAwesomeID').fancybox();

damit wird beim Klick auf den Link die Fancybox gestartet.

 

[Daaron]

Wenn du mir jetzt noch erklärst, wie ich die Box automatisch laden lasse, wär ich glücklich

Du wirst auf eines der "ready"-Events zurückgreifen müssen. Wenn du kein JS-Framework verwendest, wirst du "window.onload" verwenden müssen. Wenn du jQuery oder Mootools verwendest, steht dir zusätzlich noch das DOMready - Event zur Verfügung, dass um einiges besser geeignet ist (es zündet eher).

Wenn du etwas die Lightbox etwas dosierter starten willst könntest du neben regulären Cookies übrigens auch einfach den HTML5 Local Storage verwenden. Alle Browser ab IE9 können den Kram, und ich finds um einiges handlicher als Cookies.

 

[wasi1306]

Ich habs jetzt hinbekommen Vielen Dank euch allen!