Lightbox

Ben K. · 4 März 2011

Hey,

Ich hab mir diese lightbox Leightbox gedownloadet das stylesheet in den sleben ordner wie meine html datei getan. doch trotzdem funktionierts nit, hat jemand erfahrung mit dieser lightbox, kann mir jemand genau erklären wie ich vorgehen muss???

vielen Dank

ben

vast · 4 März 2011

erster Satz auf der Page der Leightbox:
Since releasing this code, a lot of new and better solutions have been thought up and presented. We recommend you check them out here and here.
Soll heissen, ist etwas veraltet und es gibt bessere/einfachere/schlankere Versionen.

Such dir noch irgendeine andere aus, die auch dokumentiert ist, dann hast du es leichter.

Mathmos · 4 März 2011

Hi,

die Seite könnte bei der Suche behilflich sein ;)

The Lightbox Clones Matrix « planetOzh

Ben K. · 4 März 2011

Also, ich möchte ein browsergame machen und hab grade damit angefangen die startseite zu machen.jetzt möchte ihc das wenn man z.b. auf regestrieren klickt so eine lightbox wie beim link von mir das regestrierungsformular in einer lightbox gezeigt wird, wenn ich jetzt aber auf regestrieren klicke passiert ncihts, um mihc besser zu verstehen:
<html>

<head>

<title> Draconica </title>
<body style="background-color:#000000;">


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />


<link rel="stylesheet" href="screen.css" media="screen,projection" type="text/css" />


<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>

</head>

<body>
<img src="hintergrund.jpg" align="center"
<a href="javascript:toggleDiv('toggle');"><a href="#heading1">Regestrieren </a>
</a>
<div id="toggle" style="display:none;">

</div>
<p class="footer">
<div id="lightbox1" class="leightbox">

<h1>Leightbox 1</h1>

<p> <p> <form method="post" action="form.php">
<fieldset>
<legend> Felder mit * sind erforderlich </legend>
<label for="name"><font color="white"> Spielername* </font></label>
<input id="name" type="text" name="name" size="30" /><br />
<label for="email"><font color="white"> Emailadresse* </font></label>
<input id="email" type="text" name="email" size="30" /><br />
<label for="name"><font color="white"> passwort* </font></label>
<input type="password"name="passwort" size="30" /><br />
input type="radio" name="color" value="Ich akzeptiere die AGB und die Nutzungsbedingungen" />
<label for="Senden"> </label>
<input id="Senden" type="submit" name="senden" value="Senden" />
</fieldset>
</form>
<a href="#" class="lbAction" rel="deactivate">Close</a>

<p class="footer">

</p>
</div>

<p class="footer">
</p> <a href="CCFF99#" class="lbAction" rel="deactivate"><b>Close</b></a>

</a><a href="http://draconica.xobor.de" rel="lightbox1" class="lbOn">Forum</a><a href="#lightbox1" rel="lightbox1" class="lbOn">News</a></li>
</div>
</body>

</html>

Ben

vast · 4 März 2011

Also, ich möchte ein browsergame machen

Puh - da hast du dir ja ganz schön was vorgenommen ;)

Aus deinem code ist ersichtlich, dass dir noch grundlegende Dinge zu Aufbau und Struktur eines html-Dokumentes fehlen.

Deshalb hab ich mir gedacht ich mach dir erstmal ein sauberes Dokument ohne prototype und lightbox, weil das evtl noch zu früh ist.
Nicht das die schwer einzubinden wären, aber man sollte erstmal zumindest ein bischen verstehen was da vor sich geht, bevor man anfängt, javascript-Bibliotheken einzubinden.

Daher habe ich das simple javascript aus dem letzten Thread nochmal rausgekramt und hier eingebaut, ein wenig kommentiert.

Wenn du mal verstanden hast wie das "im kleinen" läuft, wirst du auch weniger Probleme mit dem Einbinden von lightboxen etc haben, vorausgesetzt du liest die Dokumentation.

Hier also erstmal eine fehlerfreie und simple html-Datei mit simpler ein-und ausblendfunktion für dein formular:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title> Draconica </title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />

<!-- CSS -->
<link rel="stylesheet" href="screen.css" media="screen,projection" type="text/css" />

<style type="text/css">
#main {
    background:transparent url(hintergrund.jpg) no-repeat top left scroll;
    position:relative;
    width:960px;
    border:1px solid #ccc;
    margin:0 auto;
    padding:10px;
}
#content {
    padding:40px;
    background:#eee;
    border:1px solid #ccc;
    min-height:350px;
}
#registrierung {
    display:none;
    position:absolute;
    z-index:999;
    width:450px;
    border:1px solid #ccc;
    padding:10px;
    top:100px;
    left:50px;
    background-color:#fff;
}
#footer {
    text-align:center;
    padding:10px;
    margin-top:10px;
    background-color:#999;
    border:1px solid #ccc;
}
</style>

<!-- JavaScript -->

<script type="text/javascript">
// die funktion, die ich im ersten thread vorgeschlagen hatte:

function toggleDiv(element) {    // Aufruf: toggleDiv('ID_des_Elements')
 if(document.getElementById(element).style.display == 'none')  // wenns nicht zu sehen ist,

{  // wirds eingeblendet
  document.getElementById(element).style.display = 'block'; 
}
 else
{  // ansonsten ausgeblendet
  document.getElementById(element).style.display = 'none'; 
}
}
</script>
</head>

<body>

<div id="main">
    
    <div id="content">
        <a href="javascript:toggleDiv('registrierung');">Registrieren</a>
    </div>
<!--  Hier muss der inline-style drin sein,weil wir den im js abfragen,sonst klappt der erste Klick nicht -->
<div id="registrierung" style="display:none;">
    <form method="post" action="form.php">
    <fieldset>
    <legend> Felder mit * sind erforderlich </legend>
    
    <label for="name"> Spielername* </label>
    <input id="name" type="text" name="name" size="30" /><br />
    
    <label for="email"> Emailadresse* </label>
    <input id="email" type="text" name="email" size="30" /><br />
    
    <label for="passwort"> passwort* </label>
    <input type="password" id="passwort" name="passwort" size="30" /><br />
    
    <input type="checkbox" id="agb" name="agb" />    
    <label for="agb">Ich akzeptiere die AGB und die Nutzungsbedingungen</label>
    
    <input id="Senden" type="submit" name="senden" value="Senden" />
    </fieldset>
    </form>
</div>

<div id="footer">
    <a href="http://draconica.xobor.de">Forum</a>
</div>

</div> <!-- end #main -->

</body>

</html>

Das sollte so funktionieren. Natürlich wirst du CSS etc. anpassen müssen.

Mach dich aber wie gesagt noch ein wenig schlau in Sachen html / CSS, bevor du dich auf die javascript-Sachen stürzt.

viel spass

Ben K. · 4 März 2011

Danke für die echt gute antwort, ja, stimmt ich hab mir ein bisschen zuviel vorgenommen, naja, bevor ihc weitermache werd ihc mir jetzt erstmal ein css tutorial reinziehen

Danke, echt gute antwort

Lg

Ben

Ben K. · 4 März 2011

trotzdem noch ne frage, kann ich auch machen das das weiße ausgeblendet wird?? denn das überdeckt sonst das bild...

Lg

Ben

vast · 4 März 2011

wenn du mit dem weissen die Form meinst, das javascript ist so angelegt, das bei jedem klick auf einen link, der die funktion toggleDiv aufruft, das ding entweder ein-oder ausgeblendet wird, je nachdem ob es sichtbar ist oder nicht.

Du könntest also zB. in dein #registrierung-div den gleichen Link nochmal reintun, und anstatt "Registrieren" "Schliessen" reinschreiben:

HTML:

<div id="registrierung" style="display:none;">
    <div style="text-align:right;padding:0 10px;">
      <a href="javascript:toggleDiv('registrierung');">Schliessen</a>
    </div>
    <form method="post" action="form.php">
    <fieldset>
    <legend> Felder mit * sind erforderlich </legend>
    
    <label for="name"> Spielername* </label>
    <input id="name" type="text" name="name" size="30" /><br />
    
    <label for="email"> Emailadresse* </label>
    <input id="email" type="text" name="email" size="30" /><br />
    
    <label for="passwort"> passwort* </label>
    <input type="password" id="passwort" name="passwort" size="30" /><br />
    
    <input type="checkbox" id="agb" name="agb" />    
    <label for="agb">Ich akzeptiere die AGB und die Nutzungsbedingungen</label>
    
    <input id="Senden" type="submit" name="senden" value="Senden" />
    </fieldset>
    </form>
</div>

müsste dann funktionieren.

Ben K. · 4 März 2011

das ist auch gut, aber ihc mein da wo der link regestrieren drinsteht, da ist nen total großes weißes feld und das bedeckt das bild, wie krieg ich dat raus???

thanks

Ben

vast · 4 März 2011

ah, haha - keine Ahnung.
Das Problem ist, dass das wahrscheinlich aus der noch eingebundenen screen.css kommt, und ich weiss nicht, was da drin steht...ich hab die ja nicht.

...oder verstehe ich was falsch?

bei mir siehts so aus:

Ben K. · 5 März 2011

ja stimmt, kann sein, bei mir siehst aber anders aus warscheinlich weil du dat bild nicht hast. ich werds mal versuchen, aber sag mal, wie macht man einen screenshot ???

Lg

Ben

threadi · 5 März 2011

Jedes Betriebssystem sollte die Druck-Taste unterstützen. Dann Grafikprogramm öffnen und dort "Aus Zwischenablagen einfügen" oder "einfügen". Genauer kann man das nur sagen, wenn man wüsste was Du für ein System und was für Programme Du hast.

Ben K. · 5 März 2011

hey,

danke für die schnelle antwort ;)

Windows 2000 und gimp

Ben K. · 5 März 2011

das das so schnell ging......

OK vast, so siehst bei mir aus

Ben K. · 5 März 2011

ah ja und hier noch die css datei von der alten lightbox die ich einbauen wollte...

screen.css

body {
font-family: arial;
font-size: 100%;
color: #fff;
line-height: 180%;
text-align: center;
background-color: #000000;
background-color: transparent; padding: 2em;
}

a,a:active,a:visited {
color: #CCFF99;
}

a:hover {
color: #CCFFFF;
}

h1 {
font-size: 3em;
color: #FFCC99;
}

#container {
width: 50%;
margin: 0 auto;
text-align: left;
}

.footer {
background-color: ;
padding: 0.5em;
}

.leightbox {
color: #333;
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 1em;
border: 1em solid #B8B8B8;
background-color: black;
text-align: left;
z-index:1001;
overflow: auto;
background-color:

#overlay{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:#333;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.lightbox[id]{ /* IE6 and below Can't See This */ position:fixed; }#overlay[id]{ /* IE6 and below Can't See This */ position:fixed; }

Vllt findest du ja den fehler..

Lg

Ben

vast · 5 März 2011

...für .leightbox {..} fehlt die schliessende Klammer, und da steht "background-color:" ohne Angabe.
ansonsten - könnte es sein,das das div mit der Klasse leightbox noch im html ist?

Sollte das alles nichts bringen, müsste ich dein aktuelles html auch noch sehen...

Ben K. · 5 März 2011

Ich zeig dir ma lieber das html dokument, cih will wieder das das so angezeigt wird wie vorher, menno, das das da unten gezeigt wurde wie auf meinem screenshot das war viel besser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Draconica </title>


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />


<link rel="stylesheet" href="Draconica.css" media="screen,projection" type="text/css" />

<style type="text/css">
#main {
background:transparent url(hintergrund.jpg) no-repeat top left scroll;
position:relative;
width:960px;
border:1px solid #ccc;
margin:0 auto;
padding:10px;
}
#content {
padding:40px;
background:#eee;
border:1px solid #ccc;
min-height:350px;
}
#registrierung {
display:none;
position:absolute;
z-index:999;
width:450px;
border:1px solid #ccc;
padding:10px;
top:100px;
left:50px;
background-color:#fff;
}
#footer {
text-align:center;
padding:10px;
margin-top:10px;
background-color:#999;
border:1px solid #ccc;
}
</style>



<script type="text/javascript">
// die funktion, die ich im ersten thread vorgeschlagen hatte:

function toggleDiv(element) { // Aufruf: toggleDiv('ID_des_Elements')
if(document.getElementById(element).style.display == 'none') // wenns nicht zu sehen ist,

{ // wirds eingeblendet
document.getElementById(element).style.display = 'block';
}
else
{ // ansonsten ausgeblendet
document.getElementById(element).style.display = 'none';
}
}
</script>
</head>

<body>

<div id="main">

<div id="content">
<a href="javascript:toggleDiv('registrierung');">Registrieren</a>
</div>

<div id="registrierung" style="display:none;">
<form method="post" action="form.php">
<fieldset>
<legend> Felder mit * sind erforderlich </legend>

<label for="name"> Spielername* </label>
<input id="name" type="text" name="name" size="30" /><br />

<label for="email"> Emailadresse* </label>
<input id="email" type="text" name="email" size="30" /><br />

<label for="passwort"> Passwort* </label>
<input type="password" id="passwort" name="passwort" size="30" /><br />

<label for="passwort"> Passwort Wiederholen* </label>
<input type="password" id="passwort" name="passwort" size="30" /><br />

<input type="checkbox" id="agb" name="agb" />
<label for="agb">Ich akzeptiere die AGB und die Nutzungsbedingungen</label>

<input id="Senden" type="submit" name="senden" value="Senden" />
</fieldset>
</form>
<text><b> Die Anmeldung bei Draconica ist natuerlich kostenlos</b></text>

</div>

<div id="footer">
<a href="http://draconica.xobor.de">Forum</a>
</div>

</div> 

</body>

</html>

vast · 5 März 2011

meinst du so?

#registrierung {
background-color: transparent;
border: 1px solid #CCCCCC;
bottom: 83px;
display: none;
left: 22px;
padding: 10px;
position: absolute;
width: 915px;
z-index: 999;
}

ein Tip noch: <text></text> gibt es nicht. Dafür würde man <p></p> verwenden.

Hast du bereits verstanden, das wenn du ein

HTML:

<div id="abc"></div>

hast, du dessen Darstellung per

HTML:

#abc{...}

im CSS bestimmst?

Ben K. · 5 März 2011

jain, ist zwar besser, aber....

guck ma auf meinen screenshot,somöcht ichs haben, nur das graue feld/weiße soll weg sein....

Lg

Ben

Ben K. · 5 März 2011

ok, das wie beim screenshot hab ich wiede rhinbekommen, aber das weiße/graue krieg ich immern noch nit weg

Lightbox

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Moderator

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied