Add lightbox to Wordpress blogs without using a plugin

October 27th, 2009 Posted in Web 2.0

There are a lot of plugins available for adding lightbox support to wordpress blogs. But I am trying to add the lightbox script directly to my blog here. I have followed the below steps to add the plugin to my wordpress blog
Step 1 : Download jquery lightbox plugin
Step 2 : Copy jquery.lightbox-0.x.js, jquery.js, jquery.lightbox-0.x.css from the downloaded plugin pack to a separate a folder and name it to  lightbox. Dont add Jquery if u are already using the jquery in your site.
Step 3 : Upload all the Images to your theme’s image folder
Step 4 : Open jquery.lightbox-0.x.js edit the image variables  to the path of your uploaded images

imageLoading: 'http://feelitfresh.com/wp-content/themes/feelitfresh/images/lightbox-ico-loading.gif',
imageBtnPrev: 'http://feelitfresh.com/wp-content/themes/feelitfresh/images/lightbox-btn-prev.gif',
imageBtnNext: 'http://feelitfresh.com/wp-content/themes/feelitfresh/images/lightbox-btn-next.gif',
imageBtnClose: 'http://feelitfresh.com/wp-content/themes/feelitfresh/images/lightbox-btn-close.gif',
imageBlank: 'http://feelitfresh.com/wp-content/themes/feelitfresh/images//lightbox-blank.gif'

Step 5 : Upload the lightbox directory to your wordpress theme folder. Better to inside the javascript directory /wp-content/themes/feelitfresh/javascript 6)Add the  following lines to your script.js file or to header tag or any of the javascript include file

 $(function() { $('a.lightbox').lightBox(); });


Step 6 : Open your theme folder in Appearance >Editor  and edit header.php and add the following lines inside the head tag

<script type=”text/javascript” src=”<?php bloginfo(’template_url’); ?>/javascript/lightbox/jquery.lightbox.js”> </script>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’template_url’); ?>/javascript/lightbox/jquery.lightbox.css” media=”screen” />

Step 7 : Add the class “lightbox” to the link  of the image. While inserting the image  you can click on the “File URL” button first to link the image to the image file

lighbox1

Step 8 : Then click on the image and edit the image settings  and select the the Advanced settings. Then change the “to “lightbox” as below

lightbox2

One Response to “ Add lightbox to Wordpress blogs without using a plugin ”

  1. Hi, thanks, it really works and i used it.
    Thanks

Leave a Reply