[opgelost] Lightbox

Heey,
Ik zoek een goede lightbox goedwerkend en heel simpel!

Je moet hem met een link kunnen openen en door op kruisje te klikken weer moeten sluiten..

Kom niet aan met google links daar staat niets wat ik zoek.

Ik wil er gewoon html in plaatsen dus tekst + plaatjes
edit//
Zoiets als de overlay van one2xs..
En het liefst ook dat hij het van een andere pagina op me host laad

hallo, ben jij nou mod op kfb? Kijk eens bij scripts

Marjolein schreef:

hallo, ben jij nou mod op kfb?

Kijk eens bij scripts
Haha,
Ik zag bij wie bekijkt dit topic en ik wist dat je dit ging zeggen
Maar nee sorry dat is niet wat ik zoek dat is alleen voor plaatjes het moet met javascript werken om te open zoals

Moet je met jQuery de pagina die je wilt met get ophalen en dan tonen in de overlay

Raoulfloks schreef:

Moet je met jQuery de pagina die je wilt met get ophalen en dan tonen in de overlay

Raoul, Verwijder me ff op msn en voeg me opnieuw toe..
Want jij bent nooit online op msn...

En zoiets dacht ik ook al..

Ik probeer zelf nog wel even

Style:

Codeblok (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#light{ z-index: 9997; position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; }
#light_bg{ z-index: 9998; position: absolute; display: block; top: 0; left: 0; background: #333; filter: alpha(opacity=80); -moz-opacity: 0.80; -o-opacity: 0.80; opacity: 0.80; width: 100%; height: 100%; }
#light_content{ z-index: 9999; width: 100%; height: 100%; position: absolute; display: none; }
#light_drop{ width: 900px; z-index: 9999; margin: 50px auto 0 auto; background: #FFF; padding: 10px; border: 5px solid #D3D3D3; -moz-border-radius: 1em;}
#light_kruis{
border: 5px solid #D3D3D3;
-moz-border-radius: 1em;
color: #FF1E00;
float: right;
margin-top: -15px;
margin-right: -15px;
padding-top: -15px;
cursor: pointer;
font-size: 16px;
font-style: oblique;
width: 15px;
height: 15px;
}

Zet dit in je head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
               function lightbox(page){
        $(#light).fadeIn(slow, function(){
            $(#light_content).fadeIn(slow);
        });
        document.getElementById("light_drop").innerHTML = <span id="light_kruis" onclick="close_lightbox();">X</span><center>Laden...</center>;
        $.get(page, function(data){
            document.getElementById("light_drop").innerHTML = <span id="light_kruis" onclick="close_lightbox();"><strong>X</strong></span> + data;
        });
    }
    
    function close_lightbox(){
        $(#light_content).fadeOut(slow, function(){
            $(#light).fadeOut(slow);
        });
    }
</script>

En dit in de van je pagina zetten:

<div id="light"><div id="light_bg"></div><div id="light_content"><div id="light_drop"><span id="light_kruis" onClick="close_lightbox();"><strong>X</strong></span></div></div></div>

Edit; je kunt hem zo aanroepen: Klik op mijnpagina.php te openen

Hij werkt niet

Zet dat er eens bij

Opgelost