Easy way to add Photo gallery using Wordpress

In this article I am going to show you how we can add Photo Galleries using WordPress without using any wordpress Plugin. The Photo gallery will include below 3 main features every gallery should have :

Fully customizable css
Open images using nice zoom effect
Add slideshow to scroll images

Let’s start with simple steps.

Step-1

Create a sample Page named My Gallery

Step-2

Add a shortcode to content as shown below & click on Publish button.

Step-3

Now you will see a box with photo icon in the middle in the page content. click on it. Now you will see a small image icon on top-left corner. click on that icon.

Step-4

Now Media manager box will pop-up. Start adding as many images you want for the gallery & click Save all changes.

Next you will see thumbnails of all the images you uploaded & below it, there will be some settings related to gallery as below.

1. Link thumbnail to – A.Image file B. Attachment
Here if we select Image file, it will make a link to the image file. so when we click on the image link, it will open that image directly
And if we select the second option which is Attachment, it will make a link to a separate page on the same site which will open the image in page

2.Order images by
This setting will be used to arrange the order of the images under the Gallery

3.Order
Based on the 2nd option, here in this option we will be able to set the Order to Ascending or Descending.

4.Gallery Columns
This will set the layout of the Gallery on site, it will show the images in the number of columns we set here.

Make the modifications in these settings as per your need & click on Update gallery settings

Step-5

Now check the page on your website, it will bring all images you uploaded but they must be not properly arranged. That is because we have not yet given any styles to the Gallery.
Below is a general style for gallery, add it to you style.css file code & refresh the page again. You will see all the images arranged with nice borders.


.gallery {
 margin: auto;
 }
 .gallery .gallery-item {
 float: left;
 margin-top: 10px;
 text-align: center;
 }
 .gallery img {
 border: 2px solid #CFCFCF;
 }
 .gallery .gallery-caption {
 margin-left: 0;
 }

Step-6

Till this step. We have achieved a simple Photo gallery using just default features of wordpress. Now the next step is to add the Zoom effect & the Slideshow. Let us first add Zoom effect.

We will need jquery prettyPhoto plugin for this. As it is one of the best jquery plugin for Image zooming. Get it from here & upload it into your wordpress theme folder and Add the below code into header.php file.


<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/prettyPhoto.css">
<script src="<?php bloginfo('template_url'); ?>/js/jquery.prettyPhoto.js"></script>

This will include the prettyPhoto support to your website. Now add the below code after the previous lines to make the zoom effect working on All linked images under the gallery on the website.


<script type="text/javascript">
 $(document).ready(function(){
// apply prettyPhoto zoom effect on all images
 $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
 animationSpeed: 'normal', /* fast/slow/normal */
 padding: 40, /* padding for each side of the picture */
 opacity: 0.35, /* Value betwee 0 and 1 */
 showTitle: false /* true/false */
 });
 });
</script>

Save the header.php file & check the effect on the Website by clicking on any Image on My Gallery page.

Step-7

Now in this step we will add the Slideshow feature to the gallery images. We do not need any other jQuery plugin here a prettyPhoto will take care of this too. Add the code below before the image zoom code under Step-6.


<script type="text/javascript">
 $(document).ready(function(){
//add rel attribute to all images
$(".gallery a[href$='.jpg'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif'], .gallery a[href$='.png']").attr('rel', 'prettyPhoto[pp_gal]');
});
</script>

Or if you get confused in Step-6 & Step-7 , then simply add the total combination of code below in your head tag.


<script type="text/javascript">
 $(document).ready(function(){
 //add rel attribute to all images
 $(".gallery a[href$='.jpg'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif'], .gallery a[href$='.png']").attr('rel', 'prettyPhoto[pp_gal]');

 // apply prettyPhoto zoom effect on all images
 $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
 animationSpeed: 'normal', /* fast/slow/normal */
 padding: 40, /* padding for each side of the picture */
 opacity: 0.35, /* Value betwee 0 and 1 */
 showTitle: false /* true/false */
 });
 });
</script>

Save the header.php file & check My Gallery page in your browser. Try to click on any image & you will see the Zoom effect on the image & also a nice set of of Slideshow options on the image.

And its done.

You can use these same steps on WordPress Posts.

I Hope you find these steps very easy to follow. Leave your comment if there is any confusion.