Have you noticed that when you click on a thumbnail image link in WordPress, it opens the full size image in the same window of your web site? Are you wondering how hard it is to implement an Easy Modal Box Popup Box for images on your site? Its actually quite easy thanks to a wonderful plugin called Easy Fancybox. This tutorial will be for the implementation of Fancybox with images in an article and I will use the an article on this site to show you the steps involved.
Install and Configure
Easy Fancybox uses the Fancybox jQuery extension to display images, movies, iframe content, etc. To get started the first step is to install and activate the Easy Fancybox plug-in. The configuration is pretty simple, and is accessible from Settings -> Media where you will find a new section for Fancybox configuration. In the Media section, select what types you want to use Fancybox for but for this tutorial we are going to use Images and Inline Content.
Plan Your Article
You will need to create your images for your article. I would recommend being consistent, make most of your images either the same width so the modal box stays the same width. After you have them ready upload them to your media library. You will want several images throughout the article to keep your readers interested. You will need to space them throughout, and as I have written tutorials I like to alternate alignment so they will display on both side of the content area.
Insert your first image from the Media Library. Remember to use a thumbnail size, usually a size that is setup by your theme, that is consistent throughout the article.If you are using multiple images in your article indicate a caption like Screenshot so you can easliy refer to the image in the article text. You will want to want to make sure you use the “Alt Text” to help with SEO.
This does not complete your configuration, there is one more step. In your editor, select the image you have inserted and select edit. In the configuration box scroll to Advanced Options. In the Link Rel box enter a name, it can be anything but use the name in ALL your images. This groups your images into a gallery. This will allow the reader to scroll through the images using a navigation arrow. Lastly, enter “fancybox” in the Link CSS Class to use fancybox’s CSS class instead of your themes. You are all done … Easy Peasy.