jQuery Lightbox

by Dennis Betman

HTML

<section id="wrapper">
    <h1>jQuery Lightbox - example</h1>
    <ul>
       <li>
           <a id="1" href="http://p1.pichost.me/i/8/1307169.jpg" class="image_click">
               Picture 1
           </a>
       </li>
               <li>
           <a id="2" href="http://p1.pichost.me/i/28/1509786.jpg" class="image_click">
               Picture 2
           </a>
       </li>
    </ul>
</section>
<div class="tekst">
    <p class="test" id="1">hallo dit is een test</p>
    <p class="test" id="2">Dit is een stukje text bij afbeelding 2</p>
</div>
<div class="lightbox">
    <p>Click to close</p>
    <h1 class="dennis">NEXT</h1>
    <div class="content">
        <img class="afbeelding" src="#" />
        <p class="content_text">Hier komt tekst</p>
    </div> 
</div>

CSS

.lightbox{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: rgba(0,0,0,0.5);
    text-align:center;
    z-index:999999;
    display:none;
    opacity:0;
}

.lightbox .content .afbeelding{
    position:absolute;
    width:100%;
    max-width: 1000px;
    min-width:500px;
    left:-50px;
    opacity:0;
}

.test{
    display: none;
}

.content_text{
    position:absolute;
    opacity:0;
}

JavaScript

$(".image_click").click(function(e){
    e.preventDefault();
    var img_href = $(this).attr("href");
    var content = $(this).attr("id");
    var id = "#" + content;
    var content2 = $(".tekst").find(id).text();
    
    $(this).addClass("active");
    $(".content > .afbeelding").attr("src", img_href);
    $(".content > p").text(content2);
    $(".lightbox").show().animate({opacity: 1}, 500);
    setTimeout(function(){
        $(".content_text").animate({opacity: 1}, 500);
        $(".afbeelding").animate({left: "0px",opacity: 1}, 500);
    }, 1000);
});

$(".dennis").click(function(){
    var find = $("ul").find(".active");
    var find2= $("ul").find(".image_click");

    find2.next().addClass("active");    
});

$('p').on('click', function() {
    $('.lightbox').animate({opacity: 0}, 500);
    setTimeout(function(){
        $(".lightbox").hide();
        $(".afbeelding").css({left: "-50px",opacity: 0}, 0);
        $(".content_text").css({opacity: 0}, 0);
    }, 500);
});