Use the Native WordPress Gallery with a Lightbox Effect

May 01, 2012 | Written by Ed Andrea

tree-intro There are nearly 20,000 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.

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.

If you are successful, the image files will be listed and you will see progress bars to show you they're 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.

Step 3. Adjust settings and add the gallery

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

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.

Step 5. View the page to see the gallery

The thumbnails will show based on the settings you chose.

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/.

Comments

#1 Chris Curtis 2012-05-03 15:30

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

#2 ganesh 2012-06-15 09:22

Nice one.......

#3 lizardwijanarko 2012-06-30 09:00

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

#4 James Harrison 2013-02-03 10:32

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

Oh, and it actually works!

#5 AJ 2013-04-13 02:16

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

thanks so much!

Add comment

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Blog Posts and Tutorials

Blog Categories

Latest Comments

How to Add Video or Audio to a Joomla Article
Comment by t1m1976
You don't need an extension to play YouTube videos. Simply copy the "embedded" script ...
JPrc Cronjobs Provides Cron for Joomla
Comment by Gosling Cools
If want to run on your 'local' website. Can you leave out www.domain.com/index/php?
10 Options for Multi-Vendor Shopping Carts
Comment by Dinesh
I just tried Magento before a year of time for one of my website and currently I was in ...
400 Joomla and Drupal Classes
Comment by shah kash
Hi Steve I'am beginner in drupal I make a simple quiz using webform and radio button but ...
10 Drupal Commercial Theme Companies
Comment by Christopher V
Grateful to see ThemeBrain in your list. We also have our themes price updated, not ...

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

You can re-use these tutorials.
You can modify these tutorials.
You must link back to our original tutorial.
You can't use these tutorials commercially.

Click here to read the full license.

WordPress Tutorials and Blog Posts