jQuery: Build your own Light Box for your website

You must be knowing Lightbox! If not; let me tell you; Lightbox is a UI approach to show the links, media and other content in a theatre view.

Lightbox have become famous when popular social networks like Facebook, Google+ and Twitter started showing the images and videos in such theatre boxes.

Why to use this UI approach? So in my opinion by this way you can be more user interactive and user friendly. There can be more effective ways but at the minimal requirements I suggest to use this approach.

So to use this approach you can use the jQuery plugins like fancybox, lightbox etc. These plugins provide high customizability and options.

But what if you need some of the functionality. You can go for your own Lightbox design. Though it will take some time to code but when you will come up with this, you will have that minimal code which meets only your requirements.

So here are the some simple steps to make a Lightbox.

First we will make some html elements which will act like a Lightbox when activated. Here’s the markup for that

<div id="lightbox_modal">
  <div id="lightbox_area">
    <!-- Content will be shown Here -->
  </div>
</div>

Now the CSS! It's the CSS which is gonna make it look and feel like lightbox theatre. So here are the style rules…

#lightbox_modal{
  position: fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:none;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
}

#lightbox_area{
  color:black;
  width: 60%;
  height:400px;
  margin:80px auto;
  overflow: auto;
  z-index: 15;
  border:1px solid gray;
  border-radius: 3px;
  padding: 10px;
  display: none;
  background: #fff;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.5), 
    0px 0px 8px rgba(0,0,0,0.2);
}

That’s sufficient; but there can be more effective ways.

Now we’ll see the javascript that will work to activate lightbox, deactivate lightbox and fetch the media content interactively.

Here I am gonna use jQurey to make it work; but core JS can also be made to work like this.

$('.lightbox').click(function(e) {
  e.preventDefault();
  //alert(this);
  console.log('clicked for load_it()');
  load_it(this);
});

The above code does a simple task to fetch content by AJAX and put it in lightbox’s html area and activates the lightbox.

Let's take a look on the part of deactivating the previously created lightbox.

$('#lightbox_modal').click(function(e){
  e.preventDefault();
  $('#lightbox_area').html('');
  $('#lightbox_modal').css('display', 'none');
  $('#lightbox_area').css('display', 'none');
});
$('#lightbox_area').click(function(e){
  e.preventDefault();
  return false;
});

Here in above part of code two click event handlers are registered. First handler will deactivate lightbox while the second one will prevent to deactivating of lightbox by stopPropogation coz you would not like it close when you click on content.

Here is the complete JS for the Light box

$(document).ready(function(e){
  $('body').append('<div id="lightbox_modal"><div id="lightbox_area"></div></div>');
  $('.lightbox').click(function(e) {
    e.preventDefault();
    //alert(this);
    console.log('clicked for load_it()');
    load_it(this);
  });

  $('#lightbox_modal').click(function(e){
    e.preventDefault();
    $('#lightbox_area').html('');
    $('#lightbox_modal').css('display', 'none');
    $('#lightbox_area').css('display', 'none');
  });
  $('#lightbox_area').click(function(e){
    e.preventDefault();
    return false;
  });
});

function load_it(target){
  console.log('called load_it()');
  $('#lightbox_area').html('Loading');
  $('#lightbox_modal').css('display', 'block');
  $('#lightbox_area').css('display', 'block');
  $.get(target, function(data){
    if(data.length > 0){
      content = true;
      contents = data;
      $('#lightbox_area').html(contents);
    } else {
      content = false;
      contents = 'The Content can not be loaded';
      $('#lightbox_area').html(contents);
    }
  });
  return false;
}

Now with the above simple steps we have come up with our lightbox.

So go on and play with this. And share your views about this tutorial.

Demo Download