Singpolyma

Technical Blog

Lightbox Gone Wild for Blogger

Posted on

Lightbox Gone Wild is a JavaScript tool used to overlay other pages on the current page using AJAX. It looks nice and is really user-friendly. One problem : we on Blogger cannot create a static HTML page on the same domain to be included via AJAX.

So I have modified the code slightly. My version will include snippets from your local page instead. Just include these lines in your <head> section:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=1093361"></script>
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=2655847"></script>
<link rel="stylesheet" type="text/css" href="http://singpolyma.googlepages.com/lightbox.css" />

Then, insert the HTML you want to be displayed in the lightbox like so:

<div id="lightbox-id" style="display:none;">
HTML HERE
</div>

Make sure you have a link similar to this in the code to be inserted so that the lightbox can be closed again:

<a href="#" class="lbAction" rel="deactivate">Close</a>

Then, insert a link to open the lightbox, like so:

<a class="lbOn" href="#lightbox-id">Open Lightbox</a>

To see an example, click the calendar icon next to the archives in my sidebar.

Not sure why I’m linking to translations today. I usually don’t. They show up in the backlinks, and saying in English ‘here’s a translation’ doesn’t make loads of sense. They deserve a link though. A translation of this post.

Tags:

5 Responses

angelinnocent •

Hey there=)

Kudos for all the awesome hacks you’ve accomplished, like this lightbox one. Really want to implement it in my blog but you lost me after the first step (where you put the scripts in the section).

This is a super basic question I guess but where do you put all the code in the next few steps? And which html are you referring to in the second step?

Thanks for the help!

as6 •

I don’t understand it either. I think there are a few things missing from your instructions. I would love to use this but simply can’t follow what you’re saying. More detailed instruction is needed. Please.

Leave a Response