CSS Lightbox per onload starten

[MrMysteria]

Hey,
ich würde gerne folgende CSS Lightbox
Create a Lightbox effect only with CSS – no javascript needed : Emanuele Feronato - italian geek and PROgrammer
per onload starten, weil derzeit startet sie per onclick, gibts ne möglichkeit das beim onload zu machen?
Weil ich möchte sobald das:
if(!show_ads) der fall ist das onload starten, andernfalls nicht.
mfg

 

[Gilles]

Öhm joa. So wies bei onclick ist
Im head Bereich dann folgendes

window.onload = function() {
  if(!show_ads) {    
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';    
  }
}

Edit:

Ich finde den Titel so lustig:

Create a Lightbox effect only with CSS – no javascript needed : Emanuele Feronato - italian geek and PROgrammer

Anscheinend kein PRO, wenn er denkt Javascript Befehle innerhalb von Elementen wäre kein JS
Funktioniert also nur mit JS die Box :)

 

[MrMysteria]

Ja es geht ;)
Danke, btw das es ohne JS nicht geht war mir klar^^

Gibt es ne Möglichkeit die Div-Boxen per JS reinzuladen?
weil so stehen sie ja jetzt im Quelltext, gäb es ne möglichkeit das auszulagern in ne externe datei oder so, das das nur geladen wird wenns gebraucht wird?

 

[Imbericle]

Inhalte kannst du mittels Ajax nachladen.
Ajax Tutorial


MfG

 

[Gilles]

Ja es geht ;)
Danke, btw das es ohne JS nicht geht war mir klar^^

Gibt es ne Möglichkeit die Div-Boxen per JS reinzuladen?
weil so stehen sie ja jetzt im Quelltext, gäb es ne möglichkeit das auszulagern in ne externe datei oder so, das das nur geladen wird wenns gebraucht wird?

Deswegen ist das die Light CSS Variante
Denn normalerweise (zumindest bei meinem eigenem Code) erstelle ich die Divs mit javascript und füge sie dann in das HTML Grundgerüst ein :)

Also entweder nicht die Light-Variante benutzen, oder Imbericle sagte mit Ajax nachladen.

 

[MrMysteria]

document.write('<div id="light" class="white_content"><span style="font:bold 110% Verdana, Tahoma, Helvetica, Arial">Please disable your ad blocker!<br />Bitte deaktiviere Deinen Werbeblocker!<br />Veuillez d&eacute;sactiver votre bloqueur de publicit&eacute;!<br />Por favor, desactive el bloqueador de anuncios!<br /></span><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://www.html.de/images/closelabel.gif" alt="Close Box" /></a></div><div id="fade" class="black_overlay"></div>');

sowas?
bzw. wie sorg ich den dafür das ' im html code nicht als js anweisung verstanden wird sondern halt nur so ausgegebn wird?

 

[Gilles]

Bevor du da noch sehr viel lernen musst würde ich dir zu Ajax raten
Aber auch dafür würde ich dir raten dich ein wenig mit javascript aueinander zu setzen.
Denn es ist immer schöner HTML und Javascript strikt zu trennen. (Und es fällt mir auch kein Fall ein wo es nicht funktionieren würde)
Ein Beispiel. Für deinen Link:

// Erst ausführen wenn Seite komplett geladen wurde
window.onload = function() {
   // Gebe deinem Link eine Id. Zum Beispiel: showLink damit folgendes funktioniert
  document.getElementById("showLink").onclick = function() {
    // Box erscheinen lassen
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
  }
}

 

[MrMysteria]

eig. möcht ich bloss das die div.container die ja normalerweise so geladen werden, erst geladen werden wenn js das auch sagt das es nötig ist.

 

[Gilles]

Wie ich vorher erwähnte Ajax oder die divs erstellen, sobald der Link gedrückt wurde.
Da zweiteres "viel" Erfahrung in Javascript vorraussetzt und nicht mit einem framework mal eben zu machen ist, würde ich dir zur Ajax Variante raten. Dafür gibt es einige gute Frameworks. Wähle einfach davon eins :)
script.aculo.us - web 2.0 javascript
jQuery: The Write Less, Do More, JavaScript Library
MooTools - a compact javascript framework

 

[MrMysteria]

Na nen Framework möcht ich nicht einsetzen, soweit ich weiß gibts doch document.write um da was reinzuladen...

 

[Efchen]

document.write lädt nichts, sondern gitb nur Text aus.

 

[Gilles]

Außerdem überschreibt document.write dein ganzes Dokument, sobald dieses einmal komplett geladen wurde. Dir bleibt echt nur entweder das Erstellen dieser 2 Elemente, oder halt die Ajax Geschichte. Aber mit document.write wird bei beiden varianten keine Rolle spielen