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?
How does it work?
How To Add a Lightbox Modal Dialog To Your WordPress Blog
- 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
- 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.