Greetings to all “geeks” alike across the Globe reading this post at this very minute. Recently I stumbled upon a really cool feature effect that seems to be heating up the search index in Google and wanted to share the wealth with all others. The Modal Dialog Box has peaked some interest and heavy attention over the course of the last couple of years. Due to its simplicity and elegance it makes an essential addition to just about any website. Obviously WordPress is no exception to that and I’m here to show you how you can install, configure, & use a modal dialog box for your images or anything else for that matter on your WordPress Blog.
What is a Lightbox Modal Dialog Box?
The Lightbox Modal Dialog Box is a JavaScript application that helps display larger size images using a modal box style. Its structure consists in usage of popular JavaScript libraries such as the Prototype JavaScript Framework. After the official release of the Lightbox developers around the World began to explore with other similar products recently come to be known as Thickbox or Slimbox.
How does it work?
The JavaScript portion of the script usually sits in the Header section of a default page or internal pages of a website within the <head></head> tags. Frankly speaking the JS code does most of the work and display of the actual image upon click of a user from the frontend of a page. The execution of the actual Lightbox consists of the inclusion of the rel=”lightbox” element within the <a></a> element tag of your HTML.
If all of the above was all Greek to you then don’t worry because I’m going to show you how to exactly install and configure a Lightbox for your WordPress installation. Basic knowledge of HTML, CSS, or even JavaScript will definitely help expedite the installation and configuration process although is not required.
How To Add a Lightbox Modal Dialog To Your WordPress Blog
The moment you’ve been waiting for! Let’s get to working on this then. Below you’ll find a step-by-step instructional guidelines that will help you get this knocked out fairly quickly. The estimated timeframe for installing this particular effect on your WordPress blog should take around 10 – 15 minutes given that you have no prior knowledge of HTML, CSS, & JavaScript.
- Download the latest copy of WordPress jQuery Lightbox Plugin and save it on your Desktop.
- Log in to your WordPress Administration area via http://www.yourwebsite.com/wp-admin
- Click on Plugins – Add New from the left-side menu and choose the Upload link uptop. Select the downloaded zip file package from your Desktop and install it within your WordPress installation. Choose Activate Plugin and make sure that it installs properly. ATTENTION: Before going any further you will need to make some structural code changes to the existing JavaScript files that came with the plugin in order to clean it up a little. For this part you will need a text editor such as NotePad, NotePad ++, or DreamWeaver (if you already have it). Any other text editor not mentioned will work just fine as well.
- Choose Plugins – Editor from the left-side menu inside your WordPress Administration area. Select the jQuery Lightbox option from the drop-down menu in the upper-right hand side of your screen. Click on the Select button to opt-in to that particular section of the code.
- Click on the file path jquery-lightbox-balupton-edition/jquery-lighbox.php in the righ-hand side column area. Notice that the code window just changed. Select the text inside that area and past it into your favorite text editor. Go to line 25 and change the text jquery.lightbox.min.js to jquery.lightbox.js This removes the usage of the minimal version of the JS script and enables the full version. Next, Go To line 26 and change the text jquery.lightbox.plugin.min.js to jquery.lightbox.plugin.js Remove the text you selected in the original file inside your Plugin Editor and replace it with the text you modified in your text editor.
- Click on the Update File button at the bottom of your screen to save your changes. Make sure that you remain in the jQuery Lightbox plugin section as you will need to edit 1 more file.
- Select the jquery-lightbox-balupton-edition/scripts/jquery-lightbox.js file from the right-hand side column. Copy the code from inside the window into your favorite text editor. Go to lines 634 & 635 and change the words ‘true’ to ‘null’ on both instances. Then, go to lines 636 & 637 and replace the text ‘auto’ with ‘true’. Copy the code from your text editor and replace the old code inside the actual file in your WordPress area. Make sure that you click on Update File to save the new code changes.
- You’re done! Move onto the customization.
How To Use Your Lightbox Modal Dialog for WordPress
Now that you have installed the necessary plugin and modified some of the code you are ready to begin using your new Modal Dialog Box. Although before getting too excited you need to take some baby steps in order to familiarize yourself with the usage process. In order for the Lightbox Modal Dialog to work you need to include a rel=”lightbox” element tag to the <a> tag of each individual image. Here’s how you can do this quickly.
- Open up one of your favorite Posts in the administration area of your WordPress Blog as if you were going to edit its content. Click on the HTML tab located next to the Visual tab of your WYSIWYG editor.
- Locate the path of the actual image that you want to have show up in a Modal Box when clicked on by a user. This will usually look something like this <img src=”path-to-your-image-here”> and may or may not have a preceding <a href=”path-to-your-image-here”> element tag. If your image is hyperlinked then you will see the <a href=””> tag. If not, please switch back to the Visual tab on your editor and hyperlink the image to its path using the hyperlink button. Then, go back to the HTML tab and look for the image path. You should now see something something along these lines in the code <a href=”path-to-your-image-here”><img src=”path-to-your-image-here”></a> These two element tags provide a hyperlink for your image.
- Add rel=”lightbox” inside the <a href=””> element tag that’s associate with your image. This gives a relation of the link to the lightbox by defining its relationship to the image using a hyperlink.
- Save your post and view it on the frontend of your website. Click on your image and see the cool effect appear.
- You’re done! In order to utilize the Modal Dialog Box you need to follow steps 1-4 above and add a rel=”lightbox” element tag to each image within your posts manually.
How To Add a ‘Title’ to Your Image Modal Box
An additional option of the Modal Dialog Box consists of the ability to add a ‘Title’ to the actual image that appears inside the box. In order to do this simply add an additional title=”Title Of Your Image” element tag inside the <a href=””> tag associated with your image. This is explained in Steps 1 – 3 above.
If you have any problems with the installation process please contact me for further assistance. Hopefully this short tutorial has helped you add a cool new feature to your WordPress blog.