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
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
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”
<script src="assets/js/jquery-1.9.1.min.js"></script> <script src="assets/prettyPhoto/js/jquery.prettyPhoto.js"></script>
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.
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.
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