While I was looking for a way to make a good lightbox with Javascript, I found a better way to do that. A simple code with a absolute result.
I used many ways to create this lightbox or as some people call “Image Flow”, but this way is a better way in my openion.
I used Jquery plugin and generated some code to get a great result.
Here is the explanation and the demo code for this script:
HTML Code
Please put this code inside <body tag
<center>
<p>
<img src="images/nature.jpg" alt="Image" id="image" />
</p>
</center>
The above code is the HTML code for the image. Now let’s apply a stylesheet for this image:
#image
{
float: left;
padding: 5px 5px 5px 0;
}
Also, put this code before the </body>
<div id="overlayBackground"></div>
Put this in your CSS
#blackBackground
{
position: absolute;
background-color: Black;
top: 0;
left: 0;
z-index: 3;
}
#largeImage
{
position: absolute;
width: 400px;
top: 100px;
z-index: 4;
}
As you can see, we didn’t apply any JavaScript code or even adding a link <a tag.
We can do that simply with Jquery by applying this code:
Jquery Code (Javascript)
Please put this code anywhere you would like to. I prefer to put it in the header or in an External JavaScript file.
$(document).ready(function()
{
$('#image').click(function()
{
var background = $('<div>');
$(background).attr('id', 'blackBackground').animate(
{
'opacity' : '.8',
'FILTER' : 'alpha(opacity=80)' /* For IE */
}, 1000).css(
{
'width' : $(document).width(),
'height' : $(document).height(),
});
$('body').append(background);
var newImage = $('<img />');
var width = $('body').width();
$(newImage).attr('src', $(this).attr('src')).attr('id', 'largeImage').css(
{
'left' : width/2 - 200
});
$('body').append(newImage).children('#image').hide();
$(newImage).fadeIn(2000, function()
{
$(this).bind('click', function()
{
$(this).fadeOut(1000);
$('div#blackBackground').fadeOut(1000, function()
{
$(this).remove();
});
});
});
});
});
Now let me explain this to you.
When the document is ready to be manipulated [$(“document”).ready], we create at first an action for the image [.click()] and create a function to run once we click on the image.
$('#image').click(function()
Now we create a DIV to set as a transparent background for the image and we make some animation for this DIV to appear.
var background = $('<div>');
$(background).attr('id', 'blackBackground').animate(
{
'opacity' : '.8'
}, 1000).css(
{
'width' : $(document).width(),
'height' : $(document).height(),
});
$('body').append(background);
create a virtual IMG tag to handle the large image.
var newImage = $('<img />');
var width = $('body').width();
$(newImage).attr('src', $(this).attr('src')).attr('id', 'largeImage').css(
{
'left' : width/2 - 200
});
$('body').append(newImage).children('#image').hide();
Then we create the animation (Fade In) for the image and the background.
$(newImage).fadeIn(2000, function()
{
$(this).bind('click', function()
{
$(this).fadeOut(1000);
$('div#blackBackground').fadeOut(1000, function()
{
$(this).remove();
});
});
});
As we can see above, there is a function named BIND. This will apply an action for the element which is (click) and sets a function to run once we click on the large image.
More details will be found in the demo file here:
Really cool code. I might try this one out.
I also recommend HubPages itself, and Squidoo, which is similar.