Creating Hyperlink with Lightbox Effects

This technique is a combination of Dynamic HTML (DHTML), and Asynchronous JavaScript™ + XML (Ajax) to throw content right at users' eye level so that it really grabs their attention. In the case of the example below, I have a link on the page, and when users click it, they're shown a larger version in a "lightbox."

When I navigate to the page, I see just a link:-

But when I click it, I see a full-sized image elegantly displayed in the center of the window, as shown below:-

Disclaimer: The lady on the picture has nothing to do with my site, the pic is stolen from Entrecard. Hope she doesn't mind. Any violent objections, don't hesitate to leave comments - Cheers -

All the material in the background is grayed out, so that your eye is further drawn to the content in the center of the display. Also, the wonderful part is, you too can display some additional text to users! Interested? Just follow the following instructions.

Login to your Dashboard> Layout> Edit Html. Copy here and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

Next, you need to copy the scripts source code below and paste between the closing b:skin tag and the closing head tag.

<script src='http://onlinebiztutorials.googlepages.com/prototype.js' type='text/javascript'/>
<script src='http://onlinebiztutorials.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
<script src='http://onlinebiztutorials.googlepages.com/lightbox.js' type='text/javascript'/>

Save the template. Back to Settings> Formatting> Post Template. Add this line into the post template box.
<a href="images/image-1.jpg" rel="lightbox" title="my caption">Link 1</a>
Example

Example
I have been trying to email <a href="http://entrecard.s3.amazonaws.com/eimage/23062.jpg" rel="lightbox" title="my gal">you</a> for several days now. I live right down the street. Im very interested in your stuff. please call me at xxx-xxxxxxxx

Save settings and publish the post if you'd like to use the above example. (Note - Change the color in red to suit your own preference eg. your image url, your caption (text to be displayed) and your link text. No limits to the number of image sets per page, how many images are allowed in each set or how many links are permitted as long as you specify like the above example in your post editor. Just copy and paste your first text link example and add as your second text link. If you don't have any link to be displayed, please remove/delete before you publish your post.)

As you can see, this is a great way to provide additional material on products or articles listed on the page without moving users away from the page. Leave me comments should you require my assistance. Enjoy!