Pretty Photo Gallery

Hi guys, its been a while since my last article and I have the perfect excuse for y’all. That’s right, you’ve guessed it right! I have an awesome presentation for you and its titled

Pretty Photo Gallery

Introduction

Pretty photo is a jquery/javascript library similar to the all too common lightbox library. But the good thing about the lightbox jquery library is that it is better, or so they say. See more info here: PrettyPhoto.

I, on the other hand have been trying for the past few days to get this to work and its giving me a headache. I have successfully and without any hustle, gone ahead and used lightbox in my gallery. But I want to just test this out to see if its really comparable to lightbox. I have seen a few examples but I haven’t been able to build one up myself. So here goes nothing.

Download and install

Although download and install may sound a bit more complicated, it is not. You are basically downloading a zipped file containing the files shown in the image below. So basically, that is installing it. To install it into your website, you just move/copy the js and css files into your site’s assets folder, and then call them up into your webpage using

prettyPhoto.zip
extracted file contents - prettyPhoto
picture showing all files inside the extracted zip folder

 

 

The main files that we should be concerned about are found inside the ‘js‘ and the ‘css‘ folder. These are the files that make the library function as expected.

To download the latest version of prettyPhoto jquery library, go to this link http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ and click on “Production Version” to download.

Include file link in web page

Once all the downloading and installing is done, then comes the HARD code part :). The hard work is not in linking the image files but it is in setting up the background mechanisms to load the files in a light-box presentation format. And these are the basic steps to guide you through this:

1. Link CSS File
<link rel="stylesheet" href="assets/prettyPhoto/css/prettyPhoto.css" />

Insert a link to the prettyPhoto’s css file location into the head of your web-page. The code above is mine. It shows that my css file is located in the css sub-subfolder of the prettyPhoto subfolder of the assets main folder. The css file’s filename is “prettyPhoto.css

2. Link JavaScript Files
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/prettyPhoto/js/jquery.prettyPhoto.js"></script>

Insert a link to the latest jquery file and another link to the prettyPhoto javascript file at the bottom of your webpage. Insert these codes right before the body tag is closed as shown by the image below.

links to js files
links to js files

Making it work!

Yep! That’s right! We have reached the end of our journey. This is the part where everything is connected and you get to see your hard work at work ;). To view your image in the prettyPhoto viewer you simply define a block using div to keep all your images inside. It is as shown below:

<div class="class-name">
   <ul>
      <li><a href="your/image-file/location-large.jpg" rel="prettyPhoto" ><img src="your/image-file/location-thumbnail.jpg" /></a></li>
      <!-- the li list can go up to as many as you want to include -->
   </ul>
</div>

In the codes, you will notice that I have used ‘… rel=”prettyPhoto”…’, this is the main thing that makes everything work. Any link that has a relative attribute value equal to “prettyPhoto” will always be opened by the prettyPhoto photo viewer.

Finally! ~customizåtion

Inorder to make it work to your own needs, I will refer you to this link. It is quite helpful once you’ve understood the basics in installing and setting up the gallery.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Please take time to read through and if you have questions please do not hesitate to contact me. My next project will be focussed on creating a photo gallery using prettyPhoto. Follow my blog to get more ~ http://www.slyvestery.wordpress.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s