How to use lightbox in wordpress – 4 Ways to Lightbox enable your WordPress blog

Turn on your blog with Lightbox for WordPress

Here is a great video on how to turn Lightbox on in your WordPress blog – then we give you a written guide – 4 Ways to Lightbox enable your WordPress blog article we teach you everything you need to know and give you links for even more info!

how to use light box

This wordpress training article is in 6 parts:

1) The video guide to Lightbox.

2) For the programmers out there – We will give you the basic Lightbox 2.01 instructions from the man Who invented it and a link to his site for more info.

3))  For the rest of us we will cover the Lightbox WordPress plugin

4) We will show you a how to use Lightbox in WordPress with a Second video

5)  For people who want to learn how to program in WordPress we will show you an excellent book available from Amazon.

First the video guide to using lightbox:

1) For the programmers out there – We will give you the basic Lightbox 2.01 instructions from the man Who invented it and a link to his site for more info.

The below is directly from the website of Lokesh Dhakar the inventor of Lightbox!!  You can go to his  website for more info and troubleshooting by clicking on this link

How to Use

Part 1 – Setup

  1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
    <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 
  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 
  3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 – Activate

  1. Add a rel="lightbox"attribute to any link tag to activate the lightbox. For example:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> 

    Optional: Use the title attribute if you want to show a caption.

  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> 

    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

2)  For the rest of us we will cover the Lightbox wordpress plugin

Lightbox-2 plugin for WordPress

Lightbox 2 allows you to present images in a slick window, while darkening the rest of the page. It makes your site look professional, and adds very little to page load times. It does not require any browser plugins to work, and works on just about every web browser out there! When a browser doesn’t support javascript, the code fails gracefully.

Lightbox 2 is a plugin that is available for automatic install from your WordPress Plugins tab.

If you do not know how to install plugins you can click on the following link to read an article about how to install wordpress plugins: Guide to WordPress plugins


  • Auto-lightboxing of links to images. This can be disabled on the admin options page.
  • Auto-resizing of large images to fit smaller screens. This can be enabled on the admin options page.
  • Grabs the title from the img title or the alt if there is no anchor title.
  • Faster, cleaner implementations of javascripts via wp_enqueue_script. This also prevents clobbering of other plugins using prototype and scriptaculous javascripts.
  • You can choose the lightbox colours on your WordPress Options page. Black, White and Grey themes included.
  • No longer conflicts with any WordPress themes! This means it looks right, every time. Unless you are using a theme called stimuli_lightbox… ;)
  • Now hosted on When an update is released, you’ll see it in your WordPress plugins page!
  • This version works when wordpress is installed in non-standard locations, ie: /wordpress/ instead of /, whereas other Lightbox plugins break.
  • Uses the arrow keys as well as P and N keys to navigate between images. X and Escape keys close the Lightbox window, as does clicking anywhere outside the image.
  • Minor cosmetic changes from the standard scripts by Lokesh.

Of course, this plugin works very well with the popular Slickr Gallery plugin for WordPress.

3) We will show you a how to use Lightbox in WordPress with ANOTHER  video

A complete video tutorial on how to add Lightbox 2 functionality to your wordpress blog. Get the links by visiting my blog.

4) For people who want to learn how to program in WordPress we will show you:

3) Professional WordPress (Wrox Programmer to Programmer)







  • ISBN13: 9780470560549

An in-depth look at the internals of the WordPress system. As the most popular blogging and content management platform available today, WordPress is a powerful tool. This exciting book goes beyond the basics and delves into the heart of the WordPress system, offering overviews of the functional aspects of WordPress as well as plug-in and theme development.

What is covered in this book?

  • WordPress as a Content Management System
  • Hosting Options
  • Installing WordPress Files
  • Database Configuration
  • Dashboard Widgets
  • Customizing the Dashboard
  • Creating and Managing Content
  • Categorizing Your Content
  • Working with Media
  • Comments and Discussion
  • Working with Users
  • Managing, Adding, Upgrading, and Using the Theme Editor
  • Working with Widgets
  • Adding and Managing New Plugins
  • Configuring WordPress
  • Exploring the Code
  • Configuring Key Files
  • wp-config.php file
  • Advanced wp-config Options
  • What’s in the Core?
  • WordPress Codex and Resources
  • Understanding and customizing the Loop
  • Building A Custom Query
  • Complex Database Operations
  • Dealing With Errors
  • Direct Database Manipulation
  • Building Your Own Taxonomies
  • Plugin Packaging
  • Create a Dashboard Widget
  • Creating a Plugin Example
  • Publish to the Plugin Directory
  • Installing a Theme
  • Creating Your Own Theme
  • How and When to Use Custom Page Templates
  • How to Use Custom Page Templates
  • Pushing Content from WordPress to Other Sites
  • Usability and Usability Testing
  • Getting Your Site Found
  • How Web Standards Get Your Data Discovered
  • Load Balancing Your WordPress Site
  • Securing Your WordPress Site
  • Using WordPress in the Enterprise
  • Is WordPress Right for Your Enterprise?
  • and much more!

Note: CD-ROM/DVD and other supplementary materials are not included as part of eBook file.

List Price: $ 44.99

Recent Amazon Price: $ 24.12

2) Also if you are struggling with SEO or don’t know SEO at all check out this WordPress SEO plugin:

SEOPressor analyses your WordPress website and tells you specifically how to improve its SEO and even keeps a score of the SEO for your pages that you can track as you make the changes SEOPressor tells you to:

You can click here to get the plugin now

What I like about SEO Pressor:

1) It is a wordpress plugin that works while you work on your blog.

2) That means no jumping back and forth between an off page tool and your blog post.

3) It automatically performs some of the tasks and the rest it keeps a running list on to the right of your blog.

4) It keeps an SEO score for the article your writing, the goal is to get the   SEO to 100% and it tracks your progress.

5) It tells you exactly what problems that remain that you need to fix.

6) Everyone knows that on page SEO is half the battle and this solves it for you

7) SeoPressor offers a 60 day money back guarantee.

8) You get to use it for 60 days. Optimize your sites pages. If their positions in Google don’t improve you get a 100% refund right away. Cool. No risk.

OK, thats it for our how to use lightbox in wordpress Article!

Subscribe / Share

Article by admin

Authors bio is coming up shortly.
admin tagged this post with: , , , , , , , , Read 122 articles by


  1. MoeBedard says:

    Great tutorial! wanna learn more about WordPress, check out my videos on my channel like What is a WordPress Plugin?, How To Create An Author Box In WordPress, and WordPress: A Designer’s First Step. I’d like to take the time to give more help to people out there who are looking for it. I use WordPress daily to advertise, blog, and design for my website.

  2. PDRsnook says:

    i have a problem, my lightbox opens up behind my text. do you know how to fix this?

  3. TheWealthyPromoter says:

    Ok after over a week of debating over this program called SocialBlaster, I made my decision today purchase it and its been the next best decision I have made in a long time.

    Simple, plus very effective…traffic to my wordpress blog from over 40 + networks!
    NO MORE iMACROS bullchyt for me…THANK GOD!!

  4. Seano71 says:

    nevermind, solved it. The jp links were wrong

  5. Seano71 says:

    thanks for the tutorial. I tried what you said and still no joy for some reason. I even changed the jp src location to where it’d be online and still doesn’t work

  6. skl1cent says:

    woo thank you! i was able to make it work on my website!!!! wooo im so happy! and u made it perfect cuz i wanted to use a image too like you did :) thank you!

  7. muzzamario says:

    thank you so much, this helped me so much :)

  8. mlaso says:

    would this also work for Blogger? Can you do a tutorial for that… or link me please?

  9. xtokkra says:

    Useful,thank you for sharing this :)

  10. moviecrewz says:

    works fine, even without all the coding. :D

  11. jomacbub says:

    Thanks man,

  12. Heya i’m for the first time here. I came across this board and I to find It really useful & it helped me out a lot. I’m hoping to give one thing again and aid others like you aided me.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>