Simple WordPress Photo Gallery without using any WordPress Plugin

Open Source 18 Sep , 2013  

Buffer

slideshow

Hi All, back to some wordpress topics today we are going to dive that  how we can add Photo Gallery using WordPress without using any wordpress Plugin. The Photo gallery will include below 3 main features every gallery should have :

1. Fully customizable css

2. Open images using nice zoom effect

3. 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 [ gallery ] to content (without spaces) & 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 – 

GALLERY SETTINGS

A.Media file   B. Attachment Page

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 and also Update page content .

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 pretty Photo 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.

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

 

Now what you need to do is that Save the header.php file & check My Gallery page in your browser. Now 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.

So guys hows that? I Hope you find these steps very easy to follow.  Click here for My Gallery for the demo.

Leave your comment if there is any question.

, ,