Use the Native WordPress Gallery with a Lightbox Effect

new-wp-page

Right before we jump into this tutorial, we’d like to mention an alternative method that you might find both faster and easier. As you know WordPress as a CMS relies on plugins to extend its core functionality, and one such plugin for this use case is Modula. Modula is an easy-to-use WordPress gallery plugin that makes adding flexible photo and video galleries to your website easier than ever. You can learn more about Modula by clicking here or get started right away by downloading the free plugin from the WordPress plugin repository by clicking here.

There are tens of thousands of plugins on WordPress.org, but it’s amazing how much you can get done with the WordPress core and just a plugin or two.

In this tutorial we’re going to show you how to create a sleek photo gallery with elegant pop-ups, all using just a default WordPress site plus only one plugin.

Step 1. Add a new post or new page

  • Click Add New for either a post or a page.
  • Click the Upload/Insert icon.
new-wp-page

Step 2. Add a list of images to that page or post

  • Open your file explorer and drag and drop a group of photos to the ” Drop files here” Box.
tutuploadsmedia_1335828611138.png
  • If you are successful, the image files will be listed and you will see progress bars to show you they’re uploading.
uploading
  • When every one is uploaded, click Save all changes at the bottom of the list. Scroll down to see it if it’s not visible.
  • There will now be gallery tab at the top of the window. This tab is specific to this page or post. If you add a new page or post, you won’t see this tab until you have uploaded pictures.

gallery-tab

Step 3. Adjust settings and add the gallery

  • Scroll to the bottom of the window.
  • Choose your Gallery Settings.
  • Click Insert gallery.
tutuploadsmedia_1335829048310.png

Step 4. Customize the page

  • Now you will see a gallery icon in the center of the area where you inserted your gallery.
  • You can insert text or images above or below this section to customize the page.
tutuploadsmedia_1335829508852.png

Step 5. View the page to see the gallery

  • The thumbnails will show based on the settings you chose.
tree-gallery

So far so good. However, if you click on the individual images, all you see are the images flat on the page. To get a really nice pop-up effect, we’ll need to add a plugin.

Step 6. Add the lightbox effect

  • Go to Plugins > Add New.
  • Search for “jQuery Lightbox For Native Galleries”.
  • Install Now.
  • Activate the Plugin.
  • Go to Settings > jQuery Lightbox.
  • Choose your theme.
  • View your gallery and click a thumbnail. Your images will pop up on a light box with navigation control and image count.

tree-popup

You now have a photo gallery with a lightbox effect installed. You can make further enhancements with additional plugins. For example you can create Multiple Galleries with this extension http://wordpress.org/extend/plugins/multiple-galleries/.

Author

0 0 votes
Article Rating
Subscribe
Notify of
6 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Chris Curtis
Chris Curtis
11 years ago

This is so cool! I have no clue that I could create a photo gallery so easily.

ganesh
ganesh
11 years ago

Nice one…….

lizardwijanarko
lizardwijanarko
11 years ago

Hi Ed Andrea, could you post article to create gallery such “view as one” similar to mashable post using nextgen. Or another plugin gallery to create those feature. thanks

James Harrison
James Harrison
11 years ago

Excellent. Simple and does just what I want – everything else is too overloaded with features, this is perfect.

Oh, and it actually works!

AJ
AJ
10 years ago

I need help with this.. the Lightbox does not pop up —

thanks so much!

Asp77
Asp77
9 years ago

thanks so much, actually works great!

6
0
Would love your thoughts, please comment.x
()
x