[HTML] lightbox2 Bilder-Gallerie

dutziman · 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

Anzeige

onip · 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

Murdoc · 24. August 2010

AW: lightbox

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

wichtig: onload, nicht DOMContentLoaded

dutziman · 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

Murdoc · 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.

zx0w · 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); }

Murdoc · 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.

[HTML] lightbox2 Bilder-Gallerie

Videos zum Thema

Ähnliche Themen mit den Stichworten: HTML lightbox2 Bilder

Nützliche Suchen

[HTML] lightbox2 Bilder-Gallerie

Videos zum Thema

Ähnliche Themen mit den Stichworten: HTML lightbox2 Bilder