jQuery Tutorial: Build your own Light Box for your website

jQuery Tutorial: Build your own Light Box for your website

jQuery Tutorial: 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 theater view.

Lightbox have become famous when popular social networks like Facebook, Google+ and Twitter started showing the images and videos in such theater 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

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

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.

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

Lets take a look on the part of deactivating the previously created lightbox.

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

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

Got Something To Say:

Your email address will not be published. Required fields are marked *