Image lightbox (imageflow) and image enlargement with Jquery


Posted on January 12th, by Alaa Badran in Uncategorized. 16 comments

Image lightbox (imageflow) and image enlargement with Jquery

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:

View demo
Lightbox demo example download





16 thoughts on “Image lightbox (imageflow) and image enlargement with Jquery

Leave a Reply

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