Lightbox Ads with jQuery and SimpleModal

What is a Lightbox?

Typically a lightbox is used to overlay larger versions of photos on top of a page when you click on their smaller counterparts. They are also great for advertising. Using a lightbox you can display your advertisement over top of your page when a visitor first arrives. This guarantees that the visitor will see your advertisers message and it is an easy way to create some valuable new ad space on your site.

Live Example

Let us take a look at a live example so we can see exactly what a lightbox advertisement looks like.

View Example

Pretty neat huh? Keep in mind that this is just an example so we are trying to keep it simple. It is possible to fully customize the HTML code displayed inside of the lightbox. So, yes, you can use Flash or even create an interactive mini-site to more deeply engage your visitors.

Loading jQuery

Odds are that you are probably already using jQuery on your web site. If you are there is no need to load another copy of jQuery. In fact, it is a bad idea to embed jQuery within your ads because of its size. For that reason we recommend that you load jQuery directly into your page if you aren't already using it. Ideally you would load it from a CDN, such as the free ones provided by Google and Microsoft.

Download SimpleModal

The next step is to download the SimpleModal plugin for jQuery.

Download Here

There are two files contained in the ZIP file that you will want to upload to your server:

• jquery.simplemodal.css
• jquery.simplemodal.js

Remember to make note of their URLs because you'll need them in a later step.

Creating the Media

1. Log in to AdvertPro and click on Media in the toolbar
2. Click on the Create New Media link
3. Enter a Name for you media, select the Advertiser and choose Dynamic for the media type.
4. Paste the following code into the Local HTML Content box (notice we prefix the links with %%CLICKLINK%% so the ad server can track clicks):

   <div id="lightbox-banner" style="display: none">
     <a href="%%CLICKLINK%%http://www.sanfrancisco.travel/"><img src="http://services.renegadeinternet.com/examples/lightbox-banner/img/goldengate.jpg" border="0" width="625" height="434" alt="Click Here!" /></a>
     <div id="simplemodal-caption">
       Advertisement
     </div>
   </div>
   <script type="text/javascript">
   jQuery(function ($) {
     $('#lightbox-banner').modal();
   });
   </script>
   
   

5. Press the Create Media button to complete the process

Publishing to your Website

1. Log in to AdvertPro and click on Code Wizard in the toolbar
2. Click on the Dynamic Code option in the menu on the left
3. Then click on the HTML link underneath it
4. Select the Media you just created on the right
5. Press the Generate Code button
6. Copy the generated code and paste it into the bottom of your page
7. Finally, you should insert the following code just before the media code to ensure that SimpleModal is loaded first:

   <script type="text/javascript" src="http://www.yoursite.com/js/jquery.simplemodal.js"></script>
   <link href="http://www.yoursite.com/css/jquery.simplemodal.css" rel="stylesheet" />
   

The Final Result

At this point you should be able to go to your site and see your new lightbox advertisement as soon as the page loads. If you run into trouble, take a look at the index.html file contained in the ZIP file you downloaded earlier. It will show you how to properly include jQuery, SimpleModal and the the AdvertPro code into your page.