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"
   rel="lightbox"
   title="LightBox Full ...">
<img src="eb1t.jpg"
   border="0"></a>
Click the image #1<br>
<a href="eb2.jpg"
   rel="lightbox"
   title="LightBox Full ...">
<img src="eb2t.jpg"
   border="0"></a>
Click the image #2
<a href="eb1.jpg"
   rel="gb_image[]"
   title="GreyBox Full ...">
<img src="eb1t.jpg"
   border="0"></a>
Click the image #1<br>
<a href="eb2.jpg"
   rel="gb_image[]"
   title="GrayBox Full ...">
<img src="eb2t.jpg"
   border="0"></a>
Click the image #2

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]"
   href="g1.jpg">1</a>
<a rel="lightbox[hats]"
   href="g2.jpg">2</a>
<a rel="lightbox[hats]"
   href="g3.jpg">3</a>
<a rel="lightbox[hats]"
   href="g4.jpg">4</a>
<a rel="gb_imageset[hats]"
   href="g1.jpg">1</a>
<a rel="gb_imageset[hats]"
   href="g2.jpg">2</a>
<a rel="gb_imageset[hats]"
   href="g3.jpg">3</a>
<a rel="gb_imageset[hats]"
   href="g4.jpg">4</a>
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:

  • Multiple Galleries are allowed with a Menu on the Galleries
  • Window will fit content fetched
  • Inline Content. The script on load will look for the container with specified id, hide it and reference its content for the window.
  •  

    by Michel Komarov, © Copyright 2007. iCoder.com

     

    Share in social bookmarking:These icons link to social bookmarking sites where readers can share and discover new web pages.  digg del.icio.us BlinkList Reddit NewsVine YahooMyWeb co.mments

    Related Articles:

    3 Responses to “Overlay windows and images”

    1. Lightbox or Greybox Scripts for Popups or Layovers Says:

      […] 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. […]

    2. Great Script Resource for FREE. | Strategic Internet Marketing Says:

      […] 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. […]

    3. jochenko Says:

      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

    Got a question?   Leave a Reply

    You must be logged in to post a comment.