How to add a lightbox form to WordPress
Here are the steps that I took to create the lightbox subscription form used on this site:
1. Download “Lightbox gone Wild” from this page.
2. Unpack the following files and save them to the “lightbox” directory on your site:
scripts\lightbox.js
scripts\prototype.js
css\lightbox.css
3. Save the HTML code for the lightbox as a file in the lightbox directory, eg. as form.html
4. To make the lightbox load automatically, make the changes listed on this page, but don’t add the last line of HTML to anything just yet.
5. Return to the Lightbox gone Wild site and search for a comment from “preaxz”. Make the changes listed, so that the lightbox disappears when you press Escape or click in the shadowed area.
6. Create the following files within your WordPress theme directory:
– lightbox-cookies.php –
<?php
$lightboxcookie = $_COOKIE["lightbox"];
setcookie ("lightbox","1",pow(2,31)-1,"/"); // never expire
?>
– lightbox-header.php –
<!-- CSS --> <link rel="stylesheet" href="/lightbox/css/lightbox.css" media="screen,projection" type="text/css" /> <!-- JavaScript --> <script type="text/javascript" src="/lightbox/scripts/prototype.js"></script> <script type="text/javascript" src="/lightbox/scripts/lightbox.js"></script>
– lightbox-activate.php –
<?php
if ($lightboxcookie != "1")
{
echo "<input class=\"lbOn\" id=\"lbOnAuto\" type=\"hidden\"
value=\"/lightbox/form.html\">";
};
?>
7. Within the WordPress theme file header.php, add the following lines:
On the very first line (yes, before the DocType!) add:
<?php include "lightbox-cookies.php"; ?>
Before the </HEAD> tag add:
<?php include "lightbox-header.php"; ?>
After the <BODY> tag add:
<?php include "lightbox-activate.php"; ?>
8. Now upload the 4 files in the theme directory and the lightbox directory to your site!
February 18th, 2010 at 5:57 am
HI…
First, thanks for your help. I have been using it for quite sometime.
My question is along the lines of Shell’s: How to stop it from resizing images? I really liked it when it didn’t do that, and besides, it’s not resizing the images proportionally to the original image’s aspect ratio, distorting them in the process.
February 18th, 2010 at 8:33 am
My code and this entire solution has nothing to do with images – resized or otherwise!
March 22nd, 2010 at 9:13 pm
testing
March 22nd, 2010 at 9:19 pm
Sorry, was having issues with the below comment not being submitted, feel free to remove that comment.
I was wondering with lightbox and what it displays in the actual lightbox (form.html/form.php), how to submit a form without the form vanishing on SUBMIT.
What I'm speaking bout is:
<button>Submit</button>
<button>No Thanks</button>
the submit button will load the content (submit.php) in the lightbox window still, so the whole window doesn't get reloaded!
However, this doesn't work when working with forms. You need to use something like
<input type=”submit” value=”Submit” />
To submit a form properly. However, this way, like your system currently, loads the whole window rather then just loading the submitted data in the lightbox window.
Is there any way to submit FORM content in a lightbox window without having the whole window refresh to the new page? So that it acts like <button>Submit</button> and loads the data INSIDE the actual lightbox window.
April 12th, 2010 at 10:39 am
I've been wondering how to do this, and at the moment I can only think that with a target=”_blank” you could force a new tab/window open for the resulting confirmation page. That would leave the original page loaded, but what would happen to the lightbox? I guess I'll have to try it out. The original page itself does not need to be updated, since it does not change.
April 17th, 2010 at 4:17 pm
Yeah I am wondering this myself. I am thinking this is one of the more popular applications of LIghtbox Gone Wild, and perhaps not possible? Even the particletree demo only loads some stupid nipple picture on submitting the form. I haven't found an example that actually transmits info to a processing page. It's kind of frustrating, because if there were a solution it would save everyone time by posting it and if there isn't why the hell don't they just say that on the frickin site? I've wasted a day now messing around with the code and searching google. How bout a little respect for your developer community Particletree? sheesh!
I leave this comment here because of course they've closed the comments on all related threads and don't have any contact info posted…
May 23rd, 2010 at 1:24 am
[...] Cymeradwyo.net » Blog Archive » How to add a lightbox form to … [...]