Your ads will be inserted here by
Easy Plugin for AdSense.
Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.
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;
}
Your ads will be inserted here by
Easy Plugin for AdSense.
Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.
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.