 |
 |
« How To Create Free onMouseOver Slideshow | Online Business Is Easy To Start, Difficult To Sustain & Grow »
| Tweet |
|
|
|
Sometime back we’ve seen how to create an overlay lightbox with MooTools JS library. If you refer to that example you’ll see that we made the screen fully opaque – and therefore dark – when the overlay screen opens upon clicking a link.
Overlay lightbox is a good way to economize on the webpage real-estate. It’s like a pop-up window that opens on the top of the present screen, but there is an essential difference.
Unlike the traditional pop-up window, the overlay lightbox opens and closes with grace. Moreover, you can do so much redesigning like making the rest of the screen fully opaque (as in the above example), or not opaque at all.
What’s more, you can make the overlay lightbox open as slow or as fast as you want, or make it open with a big or a small initial size that reshapes according to the overall size of the document it opens.
There is another important advantage. When you have a zoom for text, you have the text in the html (thus satisfying the need of contents for feeding search engines) yet not visible on the page unless the link for zoom-in is clicked on. This is a good example of economizing on webpage real-estate as mentioned above.
In the present example, we will be using a jQuery JavaScript, based on Fancy Zoom. The script can be downloaded from here free of cost.
Before we go to implementation of the script, let us look at some examples.
Click the following thumbnails to see what they throw up. The last 2 respectively show you examples of opening a text box and a video. The video tutorial follows thereafter.
If any difficulty to view the examples below, click here to see it on a full page.
How To Do It In Your Website
Take a look at the html code below. Of the 2 JavaScript files needed, you’ll be getting the ‘fancyzoom.min.js’ file from the download. The other one is sourced from ‘ajax.googleapis.com’ site.
A third JavaScript is used in the head section of the html. This one defines the properties of the respective zoom boxes for images, text, and video. I’ve modified the CSS elements as needed here.
For each image, you’ll need 2 sizes, one thumbnail, the other a bigger one. For the video I’ve chosen to embed a YouTube video of ours.
Here is the html code of the page that shows the jquery fancy-zoom in action in the above example. Feel free to copy it for your own use. If you are aware of other zoom-in types, do let me know.
<html><head>
<title>Overlay Lightbox With Fancy Zoom</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="fancyzoom.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
$('#medium_box_link').fancyZoom({width:400, height:300});
$('#flash_box_link').fancyZoom();
});
</script>
<style type="text/css" media="screen">
a:link {color: #060;text-decoration: none;}
a:visited {color: #060;text-decoration: none;}
a:hover {color: #000066; text-decoration: underline;}
div#photos {overflow:auto;}
div.photo {display:inline; margin:0 20px 0 0;}
div.photo a img {border:1px solid; padding:1px;}
div#text a {font-weight:bold;}
</style>
</head>
<body>
<table width=440 border=0 cellpadding=5 cellspacing=0 style="border:1px dashed #468;">
<tr>
<td><h2 style="font:bold 25px verdana;text-align:center;color:#369;letter-spacing:-1px;">Creating Overlay Lightbox With jQuery Fancy Zoom</h2></td>
</tr><tr>
<td>
<p style="font:normal 12px verdana;line-height:17px;text-align:justify; color:#333;">This works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css.</p>
<p style="font:bold 12px verdana;line-height:17px;text-align:justify; color:#333;">Click the text and image links below to see how the overlay lightbox works.</p>
<br />
</td>
</tr><tr>
<td style="text-align:center;padding:15px 0 0 0;border-top:1px dotted #468;border-bottom:0;border-left:0;border-right:0;">
<!-- Zoom-In Images -->
<div id="photos">
<div class="photo">
<a href="#image1"><img src="2-small.jpg" alt="Clock Tower" /></a>
<a href="#image2"><img src="4-small.jpg" alt="Alone by Atlantic" /></a>
<a href="#image3"><img src="6-small.jpg" alt="Tuk Tuk" /></a>
</div>
<div id="image1">
<img src="2-big.jpg" alt="Clock Tower" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px verdana;color:#520;">
Clock Tower - A big attraction at V&A Waterfront!
</p>
</div>
<div id="image2">
<img src="4-big.jpg" alt="Alone by Atlantic" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px verdana;color:#630;">
Hesitating - Atlantic is cold in Cape Town!
</p>
</div>
<div id="image3">
<img src="6-big.jpg" alt="Tuk Tuk" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px verdana;color:#740;">
Tuk Tuk - Normally seen in Thailand & India!
</p>
</div>
</div>
<!-- Zoom-In Images end -->
<!-- Zoom-In Text & Video -->
<div id="text">
<p style="font:normal 13px verdana;line-height:17px;text-align:center;"><a href="#medium_box" id="medium_box_link">A Text Link</a><p>
<p style="font:normal 13px verdana;line-height:17px;text-align:center;"><a href="#flash_box" id ="flash_box_link">A YouTube Video</a><br />[Can be an image instead of text link]</a></p>
<div id="medium_box">
<h2 style="font:bold 21px verdana;text-align:center;color:#369;letter-spacing:-1px;">Details Of Text Link</h2>
<p style="font:normal 12px verdana;line-height:17px;text-align:justify; color:#333;"><strong>The width and height of this box are set in the options for this fancy zoom.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
<p style="font:normal 12px verdana;line-height:17px;text-align:justify; color:#333;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>
<div id="flash_box">
<object width="340" height="285"><param name="movie" value="http://www.youtube.com/v/UxalBFGYZPM&hl=en&fs=1&rel=0&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UxalBFGYZPM&hl=en&fs=1&rel=0&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="340" height="285"></embed></object>
</div>
</div>
<!-- Zoom-In Text & Video end -->
</td>
</tr></table>
</body>
</html>
Some viewers have pointed out difficulty in sourcing the free jQuery Fancy Zoom script. So, here are the steps that can be followed to obtain the script and put it to use.
- The Fancy Zoom script based on jQuery library is made by John Nunemaker, and so the first step is to download it free from the github site.
- Unzip the code in your computer. Open the folder and then proceed to open the folder named ‘jquery’.
- You now have 2 folders, ‘images’ and ‘js’, and the ‘index.html’ file. You will need all the images inside the ‘image’ folder, and from the ‘js’ folder take the ‘fancyzoom.min.js’ file for your use.
- Now take a look at the html code above. Before you use ‘fancyzoom.min.js’ you will need to refer to the jQuery library. You will also need a small JavaScript string that defines how the overlay zoom will behave.
- All the 3 JavaScript and CSS code are then placed in the head section.
| Tweet |
|
|
|
This article of September 14th, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
28 Comments
Trackbacks/Pingbacks
- How To Create Overlay Lightbox With jQuery Fancy-Zoom : 2WebVideo Video Production Blog | My Web Development Bookmarks - [...] Follow this link: How To Create Overlay Lightbox With jQuery Fancy-Zoom : 2WebVideo Video Production Blog [...]
i really appreciate the effort you made for such new commer like me.
i copy all the html code.
also fancyzoom.min.js file
css is already include in html as you know.
but in design view it shows tumbnail and also big image of that tumbnail.when i try to click on tumbnail it jumps to big image not the overlay function is working. kindly help me
…………….
Here is the code which i have edit
……………………….
Overlay Lightbox With Fancy Zoom
$(document).ready(function() {
$(‘div.photo a’).fancyZoom({scaleImg: true, closeOnClick: true});
$(‘#medium_box_link’).fancyZoom({width:400, height:300});
$(‘#flash_box_link’).fancyZoom();
});
a:link {color: #060;text-decoration: none;}
a:visited {color: #060;text-decoration: none;}
a:hover {color: #000066; text-decoration: underline;}
div#photos {overflow:auto;}
div.photo {display:inline; margin:0 20px 0 0;}
div.photo a img {border:1px solid; padding:1px;}
div#text a {font-weight:bold;}
Creating Overlay Lightbox With jQuery Fancy Zoom
This works with any html (images, text, headings, flash). The only caveat is it doesn’t currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css.
Click the text and image links below to see how the overlay lightbox works.
Clock Tower – A big attraction at V&A Waterfront!
Hesitating – Atlantic is cold in Cape Town!
Tuk Tuk – Normally seen in Thailand & India!
A Text Link
A YouTube Video[Can be an image instead of text link]
Details Of Text Link
The width and height of this box are set in the options for this fancy zoom. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.
Irshad,
2 things come to mind. One, are the paths to the javascript files okay? This is the most common mistake we usually do. Two, is your browser javascript enabled? If answers to both are ‘yes’ then there is no reason why the zoom-in will not work.
Thanks for your quick response.Is it possible to send me all the files of this tutorial in winzip at my email address as ad_irshad@hotmail.com because here is no clear link to download all the data from one folder.
i have check the javascript in IE8 its active. secondly path is ok but i think some of the files are missing
like common.css etc
kindly if you can send me in one folder all the data at my email id,
your this little effort may be made me your permenent member.
thanks once again your quick response.
In the present example, we will be using a jQuery JavaScript, based on Fancy Zoom. The script can be downloaded from here free of cost.
………………..
one more thing when i click on the above link it show me alot of files
like
.gitignore
README
TODO.txt
css/
fireworks/
jquery/
mootools/
prototype/
some of the above i don’t know where to use it i mean is there any other way that you teach me in the form of steps like in step-1 do ABC
step 2 do DEF
and so on…
The link to download Fancy Zoom is http://github.com/jnunemaker/fancy-zoom. If the page gives error, reload it. Click on the download button – NOT on the top menubar, but below it by the side of the buttons ‘fork’ and ‘watch’. A window nearly similar to Fancy Zoom pops up showing options of Zip & Tar download options. Click on Zip to proceed. If IE8 gives problem (not sure why), try Chrome or Firefox.
Superb tutorial… well done! one thing i cant figure out is, where is the css class for close button??
Ihsan,
The CSS class for the ‘Close’ button at top left is in the ‘fancyzoom.min.js’ file. Open it in a text editor, and then search (Ctrl+F) for it to locate. The following is what specifies the close button:
<a href=”#” title=”Close” id=”zoom_close” style=”position:absolute; top:0; left:0;”><img src=”‘+m+”/closebox.”+f+’” alt=”Close” style=”border:none; margin:0; padding:0;” /></a>
Thanks, but I did find it out and I hardcoded the location for the time being as I dont know what m would generate?is there any way in which i can specify the path in the jquery that which i am calling the js function?
i.e.
$(document).ready(function() {
$(‘div.photo a’).fancyZoom({scaleImg: true, closeOnClick: true});
});
because my image is in totally a different location altogether and not in the immediate child. please advice and Thanks again
Have you tried using absolute URL for the image file…pointing to wherever your image is located?
yeah, I’ve used it and it works partha but the thing is that I am using this plugin for many sites which are in the same solution but in seperate folders.. you get what I mean right? ok now the question is this, when changing the js file itself then what happens is that I need to use the same image for all the sites unless I create copies of the js file with different names and link them to the pages which is bad
but if I can give a path in the place i call the fancyzoom function then this would mean i can define a path unique to that page which in turn means i can generate seperate images.. anyways I did try to call the folder names dynamically and it did work in the development pc and not in the server 
. once again thanks for your reply… really appreciate it partha 
ohhh and can we reduce the opacity of the background so that everything else darkens up and this shows uniquely???
Ihsan, I’m not sure of that for this script.
Hi,
I really appreciate your kindness of sharing the codes and of explaining how to set up.
This is what I did to set up.
I uploaded the js file and the images under the “images” folder of my blog. (This blog allows to upload all files under the “images” folder.) So, I changed the path “” to “”
This is the way I modified html or css and every time it worked.
The codes and the js file seem to work well. But the images(e.g.box and close icon) do show up when I click on the links or images.
What should I do to fix the problem?
Please advise me.
Thank you for your help.:D
Oh, I can see the javascript I wrote in my question was gone!
Again, I changed the path (src=”fancyzoom.min.js”) to (src=”./images/fancyzoom.min.js).
Thank.
Misun, sorry for replying late. It appears you’ve solved the problem.
Cheers
Partha
Hi, Partha
Thank you for replying. But the problem still happens. I can’t see the close image but only a “x” mark and no box lines (top, bottom, right, and left). Please let me know what I should do to solve this.
I have a question. How can I insert images instead of movies in the flash_box? Is there other id(such as “image_box”) or just use the id (flash_box)?
Looking forward to hearing from you.
Thanks.
Hi again,
I figured out how to insert images. But still no close icon and box lines. The browsers I use are IE 8. Chrome 3, and Firefox 3.5. No browsers display the icon and box lines.
Thanks.
Hi,
Yes!! I solved the problem. I should change the directory of images in the fancyzoom.min.js file. (i.e., the full name of directory like “http://….”) and also the path of the js file too (not just “./images/fancyzoom.min.js” but “http://….).
It works well in both IE 8 and chrome. But FF3.5 still not.
Anyhow, I do appreciate your sharing.
Thank you
I like your smiling face. Cheers
Hey nice blog, i’d be interested to know what spam app you use for comments because i get a bunch on my blog.
Akismet
Hello Partha,
I appreciate your excellent explanations above. I am a javascript novice and I am trying to add some effects to an elementary school website. I have the image and text boxes working as you show above. Now I would like to add text box zooms from multiple locations on an image map. I have not been able to figure out how to link the image map to the text box zoom script.
I would also like to show Quicktime movies in a zoom box. These are timelapses created daily by a webcam. They are .mov files. Can these be shown in a zoom window.
Thanks for your help, –Stan
Stan,
Refer the demos given at Flowplayer, though I’m not sure about zooming MOV files. You can see some demos in my Hire Us page.
Best of luck!
Partha
Is there a way to make a flv video file play when it zooms open and then after the video is done the player and overlay automatically go away?
@Meghan,
Not to my knowledge. But I’ll be eager to know if you come across one.
Partha
Hey Partha,
First off I want to say really nice post, Thank you so much.
I attempted to take your code and apply it to the website i’m building I have got the text and video to work just fine. However, i can’t seem to get the pictures to work the same way for some reason. When i click on the image i can see the new overlay popup but it is just a small empty box and no enlarged picture!?
I’ve uploaded both js files to the same root folder plus all of the image files in the same folder.
I should also mention that i trimmed the above code by getting rid of the table plus the individual div image1,2,3 codes because when i left them i would just all of the photos listed in the website.
Please help!?
Eagerly waiting to hear from you
@YA,
I’m not sure of the problem you’re facing. Usually, people mistake the paths to the different files. It appears they’re okay in your case. Perhaps there’s some flaw in the html code. Try using the code exactly as given above, see if it works, and then make changes as deemed fit.
Best of luck.
It won’t let me iframe more than one source at a time :/
I’m using this
<a href=”#medium_box1″ rel=”nofollow”>Blog</a>
<a href=”#medium_box2″ rel=”nofollow”>About</a>
<a href=”#medium_box3″ rel=”nofollow”>Contact Us</a>
It gives my the Blog link in a fancy zoom just fine, but then the other two are iframed underneath the links and don’t show up in the zoom… help? :s