You are here : : Home > Free Resources > CSS Tutorials > CSS Lightbox Effect |
Free Web Design Resources
Browser Support | » | ![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Language | » | CSS3, jQuery & HTML4 | |||
Difficulty | » | Intermediate | |||
Estimated Completion Time | » | 20 minutes |
We'll follow these steps to apply the fonts to your webpage.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a lightweight "write less, do more" JavaScript library.
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from › jQuery.com ‹.
We will have to include jQuery inside the <head>
tags.
Here's the code:
1 2 3 4 5
<head>
<script type=text/javascript
src=jquery-1.5.2.min.js
></script>
</head>
src
attribute to the script
tag.src
attribute to "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
1 2 3 4 5 6
<head>
<script type=text/javascript
src=http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js
></script>
</head>
div
element.img
element must have class
attribute having value "thumbnail".class
later with jQuery to trigger the Lightbox Effect.
1 2 3 4 5
<div>
<img src=images/ferrari1.jpg
class=thumbnail
width="120">
<img src=images/ferrari2.jpg
class=thumbnail
width="120">
<img src=images/ferrari3.jpg
class=thumbnail
width="120">
</div>
The Lightbox Display Block consist of two div
elements.
First div
element with id="popup"
having a black background color and spans across the screen.
Second one with id="center"
is inside the first div
element where the clicked image will be displayed.
The img
tag with id="lightbox"
will be replaced by the image that you click on the image gallery.
The img
tag with id="close"
will be used as the close button for the Lightbox Effect.
1 2 3 4 5 6
<div id=popup
>
<div id=center
>
<img id=lightbox
src=images/ferrari1.jpg
>
<img id=close
src=images/close.png
alt=close
>
</div> <!-- #center -->
</div> <!-- #popup -->
The Lightbox is only visible when someone clicks any image in the gallery. Rest of the time it is hidden.
We will use CSS display
property to hide the Lightbox.
Here's the CSS Stylesheet codes for the Lightbox Block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<style type=text/css
>
#popup{
background:#000000;
height:100%;
width: 100%;
position:fixed;
top: 0;
left: 0;
display: none;
}
#center{
border: 10px solid #121212;
margin: 6% auto;
width: 750px;
}
#close{
float: right;
position: absolute;
top: 12%;
}
</style>
div
. <div id="popup">
. div
with id="popup"
relative to the browser window.<div id="popup">
from the top-left corner . <div id="popup">
, display property is set to none.div
.div id="center"
at the center of the screen. src
attribute of the <img id="lightbox" src="..." >
with the src
of the clicked image in the gallery. 1 2 3 4 5 6 7 8 9 10 11 12 13
<script type=text/javascript> $(document).ready(function(){ $(.thumbnail).click(function(){ var address= $(this).attr(src); $(#popup).fadeIn(slow); $(#lightbox).attr(src,address); }); $(#close).click(function(){ $(#popup).fadeOut(fast); }); </script>
.thumbnail).click(function(){
class="thumbnail"
in the Image Gallery . src);
src
value of clicked image to the address
variable. #popup).fadeIn(
slow);
<div id="popup">
will fade in slowly into the view. #lightbox).attr(
src,address);
src
attribute of the image having id="lightbox"
with the value assigned to the address
variable. #close).click(function(){
id="close"
. #popup).fadeOut(
fast);
id="popup"
with a fadeout effect. No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.