Categories
Uncategorized

Image lightbox (imageflow) and image enlargement with Jquery

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:

View demo
Lightbox demo example download

By Alaa Badran

Front-End and Web developer

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

Leave a Reply

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