Overlay windows and images
Pop up windows are still effective ways to get subscribers, especially in niche markets. Creating popups on your website is as easy as pie.
Pop-up windows are great tools to have in your marketing arsenal since they are so effective and inexpensive to implement. Pop-ups can be used to bring attention to sales/promotions, recover abandoned shopping carts, generate leads/email newsletter subscribers and much more.
The common argument you’ll hear executives and designers make is that most people block pop-up windows. But the modern overlay (pop-in) windows are not blocked as they are a part of the web-pages.
The most spectacular and popular scripts are “LightBox” and “GreyBox”.
“LightBox”, “GreyBox” scripts
“Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.”
All you need to use the LightBox is upload the script onto your site and add this code-lines below into header of your web-pages.
<script src="js/prototype.js"
type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects"
type="text/javascript"></script>
<script src="js/lightbox.js"
type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet"
type="text/css" />Then add a rel="lightbox" attribute to any link tag to activate the lightbox:
<a href="image-1.jpg" rel="lightbox">image #1</a>
In order to test Click this link: image #1
“GrayBox is a pop-up window that doesn’t suck. It can be used to display websites, images and other content in a beautiful way.”
To use the GreyBox you need to upload the script onto your site and add this code-lines below into your web-pages.
<script type="text/javascript">
var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script>
<script src="greybox/AJS.js"
type="text/javascript"></script>
<script src="greybox/AJS_fx.js"
type="text/javascript"></script>
<script src="greybox/gb_scripts.js"
type="text/javascript"></script>
<link href="greybox/gb_styles.css" rel="stylesheet"
type="text/css" />Then add a rel="gb_image[]" attribute to a link tag to activate the greybox with specified image:
<a href="image-2.jpg" rel="gb_image[]">image #2</a>
In order to test Click this link: image #2
Thumbnails and full-size images
The first and simplest case to use these scripts is to show full-size images of your goods from thumbnails placed on your sales page. You just cover each thumbnail with a <a>-link to appropriate image.
| *Note. These images below are used for example only. | |
| LightBox samples | GrayBox samples |
 Click the image #1 to enlarge |
Click the image #1 to enlarge |
 Click the image #2 to enlarge |
Click the image #2 to enlarge |
<a href="eb1.jpg" |
<a href="eb1.jpg" |
Image Galleries
The next case of use is image galleries. The both scripts allow you to organize a gallery without an effort.
You need to use a number of links to your images with another rel-attribute.
| LightBox samples | GrayBox samples |
| You may start to view the gallery from any image: 1 2 3 4 Place your mouse over the image to navigate next or previous one. |
You may start to view the gallery from any image: 1 2 3 4 Use the left/right arrow icons to navigate the images set. |
<a rel="lightbox[hats]" |
<a rel="gb_imageset[hats]" |
You can place several different galleries at the same page. Use the gallery-name (the word inside the square brackets) to group your images. All images of my example are grouped with the name hats: [hats]. |
|
Overlay pages
More often we need to open a window with external HTML-page.
Unfortunately the LightBox script can work with images only, but not with pages.
Lets see how to setup a link with the GrayBox script to open a page.
All you need to use a link with a page instead of an image is change the rel-attribute to rel="gb_page[WIDTH, HEIGHT]".
Enter the WIDTH and HEIGHT values in pixels to specify the window size:
<a href="http://yourdomain.com/popup.html"
rel="gb_page[625,590]">popup link</a>
Click this popup link to test the code.
So far we used links to open a new window. But what to do when you need an on-load window?
Place a link without the text between the <a></a> tags into your page. Such a link would be invisible. Then add an id-attribute with unique name into the link to be able to refer it in a javascript:
<a href="http://yourdomain.com/popup.html"
id="MyPopupLink"
rel="gb_page[625,590]"></a>
Finally you can use a javascript to trigger this link:
<script type="text/javascript">
function popup(linkID) {
var popupLink = document.getElementById(linkID);
if (popupLink) popupLink.onclick();
}
</script>
Now you insert the onload-attribute into your <body>-tag:
<body onload="popup('MyPopupLink')">
The complete code would look like below:
<html>
<head>
<title>On-Load PopUp Test</title>
<script type="text/javascript">
function popup(linkID) {
var popupLink = document.getElementById(linkID);
if (popupLink) popupLink.onclick();
}
</script>
</head>
<body onload="popup('MyPopupLink')">
<a href="http://yourdomain.com/popup.html"
id="MyPopupLink"
rel="gb_page[625,590]"></a>
. . .
LightWindow — yet another window-script
There is yet another script — LightWindow. It’s more flexible and complex.
You can find these outstanding features:
Related Articles:
October 6th, 2007 at 20:33
[…] Lightbox or Greybox Scripts for Popups or Layovers At one time popups were so effective that they became a nuisance….guess what, they still work great if you know what to use and how to use them. You find a great tutorial on how to use unblockable popups I love getting a new email from Ask Michel Komarov because I know I’ll learn a new code, script or different way to make my webpage useful. There is a new post that shows you the coding involved in a new type of popup or layover you’ve probably already seen. […]
July 4th, 2008 at 08:18
[…] Recently when I was looking for few scripts to implement on my websites, I got around to Michael’s website. On his blog he shares quite a few script codes for you to implement. Scripts like OTO (One time offer), Overlay Windows and images, content rotation and much more. […]
August 12th, 2008 at 01:28
HI Michel,
I have been an ARP user for nearly 2 1/2 years. I am lucky to have found such a great tool for my company. It’s such an amazing job you have made by making all this useful info public to we entrepreneurs and want to thank you for that.
I would like you to please give me some clues about how to make “greylight” script to work for my ARP opt-in forms, with preset timer, pretty much the way you guys do with ARP pop-in from main website autoresponder .com. Although I handle this stuff with some insight I guess I need a little bit more of info to customize this scripts to my use.
Any reply will be greatly appreciated,
Cheers,
JL