How To Make A Really Sweet Lightbox Notification

Published by on January 22, 2009

I’ve seen lightboxes like these on a couple of sites recently, and I think it’s a great way to inform your users of new features, updates, newsletters, etc. without shoving a pop-up down their throats.

The lightbox creates a nice opaque effect, and allows you to keep a high-quality feel, while also guaranteeing your readers read your message.

So after doing some research, and putting together my own lightbox for my Wise Startup Blog, I wanted to share with you how you can make your own.

lightbox.png

How To Make Your Own Lightbox

Step 1
Grab the necessary resources from Particletree. If you’re lazy, here’s what you need.

Place this in your ‘<head>’ area of the site:

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” />
<script src=”scripts/prototype.js” type=”text/javascript”></script>
<script src=”scripts/lightbox.js” type=”text/javascript”></script>

Download the files and follow the instructions in the folders.

Step 2
Create your lightboxes. You can use the template I have as a starting point.

<img src=”http://wisestartupblog.com/wp-content/themes/arthemia/images/wisestartupbloghowto.gif” style=”float:right; width:128px; height:128px;”/>
<h3>Receive Real, Practical Business Advice, For FREE</h3>

<p class=”highlight”>Subscribe to our newsletter and receive our exclusive <em>How-tos, Articles, & more</em> and discover the secrets to selling and marketing online businesses.</p>

<p class=”highlight”>Just enter your email address below to receive our free newsletter.</p>

Step 3
Invoke your lightbox. You can make your lightbox either show up when the page is loaded or when the user clicks on a link.

If you want to active the lightbox with a click, use this code:

<a href=”form.html” class=”lbOn”>Email This</a>

Just replace the “form.html” with the link to your page.

If you want to activate the lightbox automatically, which is what I am using now, you need to make a couple changes to your code.

You can visit Webfoundation to see what changes need to be made to prototype.js or you can just download my modified prototype.js.

Now, to make sure the lightbox loads automatically, you need to insert this code on the page where you want it to appear. For instance, mine appears on all of my blog posts, so I put it at the end of my single.php page.

<input class=”lbOn” id=”lbOnAuto” type=”hidden” value=”http://google.com”/>

Step 4
Test test test. You have all of the tools needed above, now you just need to test things out. Experiment with placing your lightbox in different areas, and doing pre-loads and load on click, and see what works for you.

For me, I’m trying to grow my subscriber base, so I’m doing a lot of testing to see what readers like, and what they don’t like, simply based on my Google Analytics.

Please let me know if you need any help getting started, etc.