Custom Lightbox using jQuery

Without images Internet would be lifeless but well that's not the case and on the top of that jQuery contains enormous power to turn around any bit of the web page. Internet is itself a proof that what can be done with jQuery.

Today we will explore power of adding html elements on the fly using jQuery and using that we will create our own lightbox.

Screenshot:

 

HTML:

<body>

<form id="form1" runat="server">

 

<div>

<a href="images/blogpics/clickSlice.png" title="Sample Pic: Pie Slice Graph">Picture 1</a><br />

<a href="images/blogpics/ExplodedSlice.png" title="Sample Pic: Pie Graph Exploded">Picture 2</a><br />

<a href="images/blogpics/Form.png" title="Sample Pic: Windows Form">Picture 3</a><br />

<a href="images/blogpics/CustomValidation.png" title="Sample Pic: Custom Validator">Picture 4</a><br />

</div>

 

</form>

</body>

 

CSS:

<style type="text/css">

#customLightBox

{

 

opacity:0;

filter:alpha(opacity=0);

position:absolute;

top:20px;

left:200px;

border-style:double;

border-color:white;

border-width:10px;

background:black url(images/loadinfo.net.gif) no-repeat scroll center center;

 

}

body

{

background-color:White;

}

 

#overlayContainer

{

background-color:Black;

position:absolute;

top:0;

left:0;

height:100%;

width:100%

}

 

</style>

 

jQuery Script:

<script type="text/javascript">

$(document).ready(function () {

$('a').click(function () {

var title=$(this).attr('title');

$(this).blur();

$('<div id="overlayContainer"></div>').appendTo('body').animate({

opacity:'0.5'

},1000);

$('<div id="customLightBox"/>').appendTo('#overlayContainer').hide();

$('#customLightBox').focus();

$('<img />').attr('src', $(this).attr('href')).appendTo('#customLightBox').load(function(){

var top = ($(window).height() - $('#customLightBox').height()) / 2;

var left = ($(window).width() - $('#customLightBox').width()) / 2;

$('#customLightBox').css({ 'top': top + $(document).scrollTop(),

'left': left

}).fadeIn();

});

$('#customLightBox').show().animate({

opacity: '1',

 

}, 1000,'swing',function () {

$('<div id="title" style="color:black; background-color:lightgray;border:1px solid gray;"></div>').appendTo('#customLightBox').hide();

$('#title').html(title+'<span id="close" style="float:right;cursor:pointer;"><img src="images/fileclose.png" height="20px" width="20px" /></span>').slideDown(200);

$('#close').click(function () {

$(this).parents('#overlayContainer').remove();

});

});

 

return false;

});

});

</script>

 

Tags: , , , ,

ASP.NET | jQuery