[HTML] lightbox2 Bilder-Gallerie

Dieses Thema im Forum "Webdesign" wurde erstellt von dutziman, 24. August 2010 .

Schlagworte:
  1. 24. August 2010
    lightbox2 Bilder-Gallerie

    Hallo zusammen,

    ich hätte eine kurze bitte untzwar würde ich gerne eine Komplett leere Seite erstellen wo lediglich ein Lightbox Fenster aufgeht und der User Bilder sehnen kann.

    Gibt es dafür ein fertiges Script wo ich einfach nur die BIlder einfügen kann.

    meine überlegung war lightbox 2.

    kann mir vll jemadn helfen?

    vielen Dank
     
  2. 24. August 2010
    AW: lightbox

    hi,

    du bindest deine bilder wie benötigt ein und machst diese unsichtbar (display).
    HTML:
    <div style="display none;">
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    </div>
    
    nun mit onload die lightbox direkt beim seitenaufruf starten, glaube das das richtig ist.
    HTML:
    <body onload="MM_preloadImages('/images/menu_on.gif')...;initLightbox()">
    
    alles andere macht die lightbox
     
  3. 24. August 2010
    AW: lightbox

    bei onload Lightbox.showImage() aufrufen und als parameter das erste bild übergeben.

    wichtig: onload, nicht DOMContentLoaded
     
  4. 25. August 2010
    AW: lightbox

    Danke erstmal das heisst ich baue das als css???

    (<div style="display none;"> <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> </div>)



    und wie hat meine html auszusehen ich möchte quasi nur das wenn meine hp aufgerufen wird das direkt eine schwarze page kommt wo ein lightbox popup auf geht und man bilder durchswitchen kann.

    hm danke
     
  5. 25. August 2010
    AW: lightbox

    so funktionierts:

    öffne die datei lightbox.js und entferne die letzte zeile (document.observe ...) und speichere das ganze ab. damit verhinderst du, dass sich ligthbox von selbst initialisiert.

    als nächstes erstellst du in deiner seite ein script, mit dem du lightbox selber starten kannst. ich hab das mal probiert:

    Code:
    document.observe("dom:loaded", function() {
     var lb = new Lightbox();
     
     // "onload" abwarten
     Event.observe(window, "load", function() {
     var links = $$("a[rel='lightbox']");
     if(links.length)
     (function() { lb.start(links[0]); }).delay(2);
     });
    });
    dieses script baust du in deine html/php-datei ein (innerhalb von <head>). damit sollte es klappen.
     
  6. 28. August 2010
    AW: lightbox

    Ich empfehle jQuery..

    Google nach: jQuery per Googlecode einbinden

    Erstelle DIV <div id='lightbox' style='position:absolute; top:0; left:0; height:100%; width:100%; z-index:9999;'> <div onclick="close_lightbox();">CLOSE</div> </div>

    Musste halt so stylen wie du magst... und dann per JS mit "open_lightbox()" zB öffnen

    mit sowas <body onload="init_lightbox();"> oder direkt per style die lightbox verschwinden lassen. kannste ja top:-3000 machen oder so...

    Die Funktionen sähen dann so aus:

    init_lightbox () { $("#lightbox").animate({ left:0, top:-3000, opacity: 0 },0); }
    die 0 ist die zeit in milisec, es soll sofort passiert sein; der rest sollte klar sein

    open_lightbox () { $("#lightbox").animate({ left:0, top:0, opacity: 0.8 },1000); }

    close_lightbox () { $("#lightbox").animate({ left:0, top:-3000, opacity: 0 },1000); }
     
  7. 30. August 2010
    AW: lightbox

    blöd nur, dass lightbox2 auf prototype basiert. für deine methode müsste er auf diese tickbox (o.ä) zurückgreifen.
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.