Feb 07
25
How to add Lightbox
16% The lightbox image add-on is already packed and ready to use with my new theme Blogvaria. However including this to your existing theme shouldn’t take to long. Start by downloading the original source code from Lokesh Dhakar’s website. Unzip the archived files and upload them to your theme folder:
- ../yourtheme/css/ (1 file)
- ../yourtheme/images/ (10 files)
- ../yourtheme/js/ (4 files)
Then open up your header.php file in your theme folder and add the following lines somewhere between <head> and </head>:
<!-- Include the Lightbox Magic -->
<link rel="stylesheet" href="<?php echo bloginfo('template_directory') ?>/css/lightbox.css" type="text/css" media="screen" />
<script src="<?php echo bloginfo('template_directory') ?>/js/prototype.js" type="text/javascript"></script>
<script src="<?php echo bloginfo('template_directory') ?>/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="<?php echo bloginfo('template_directory') ?>/js/lightbox.js" type="text/javascript"></script>
Then to apply the magic see my post about the Blogvaria plugins (and add-ons).
You should also open ../yourtheme/js/lightbox.js and look for the following lines (62 and 63):
var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif";
To make sure it works with all browsers and various rewrite rules you should edit the URI’s from relative to absolute. In plain English this means that you add http://mysite.com/wp-content/themes/yourtheme/ just before images/… on both occurrences.
Subscribe to Comments
Weekly Stats Chart
Wordpress.org
Blogvaria » Blogvaria Plugins said,
February 26, 2007 @ 2:06 pm
[...] If you are not using my theme but would like to include this add-on to the theme you are using, please see this post about how to add Lightbox to my WP theme. [...]