For this tutorial we will be using the ImgBrowz0r class for the backend of the gallery, we will then write a jQuery script so that we can browse through the gallery created by ImgBrowz0r without no page reloads and a nice effect between page requests so the user knows the page has changed. We will also be using the prettyPhoto plugin for jQuery to open up the actual images.
Getting ImgBrowz0r and prettyPhoto to work
The first thing I done was create a folder called jquery_gallery inside here is where all the files and folders are gonna be stored. I then created 4 folders inside jquery_gallery, the folders are called css, images, inc and js.
When you have downloaded the ImgBrowz0r class, copy the file into the inc folder.
Now inside the images folder create 2 folders cache and gallery. After you have unzipped prettyPhoto goto the images folder and inside the images folder copy the folder named prettyPhoto to our image folder. There should now be 3 folders inside our images folder cache, gallery and prettyPhoto.
Inside our css folder that we have created we will copy the css file from the prettyPhoto css folder named prettyPhoto.css.
The last thing to do for prettyPhoto is to copy the javascript file from the prettyPhoto js folder to our js folder.
So now we should have a file structure like so:
|css
|--prettyPhoto.css
|images
|--cache
|--gallery
|--prettyPhoto
|inc
|--imgbrowz0r.php
|js
|--jquery.prettyPhoto.js
We need to also create a css file for our imgBrowz0r class, create a css file inside our css folder and name it gallery.css. Copy the code into this file that is below:
strong { font-weight: bold } /* This is some example CSS. You can change this to your own liking. */ .img-description, .imgbrowz0r-navigation, #imgbrowz0r { margin: 0 auto;width: 970px;text-align: left } .imgbrowz0r-navigation { padding: 1.5em 0 0.5em } .imgbrowz0r-navigation .img-statistics { margin-top: 1.5em } .img-description { margin: 1.5em auto 0 } #imgbrowz0r .img-row { padding: 0 1em } #imgbrowz0r .img-directory a:link, #imgbrowz0r .img-directory a:visited { font-family: Georgia, "Times New Roman", Times, serif;text-decoration: none } #imgbrowz0r .img-thumbnail a:link img, #imgbrowz0r .img-thumbnail a:visited img { border: 1px solid #000 } #imgbrowz0r .img-thumbnail a:hover img, #imgbrowz0r .img-thumbnail a:active img { border-color: #fff } #imgbrowz0r .img-directory a:link, #imgbrowz0r .img-directory a:visited { background-color: #000;border: 1px solid #000;font-size: 1.5em;color: #ccc } #imgbrowz0r .img-directory a:hover, #imgbrowz0r .img-directory a:active { border-color: #fff;color: #fff } #imgbrowz0r .img-directory span.img-dir-name, #imgbrowz0r .img-directory span.img-thumb-date { display: block } #imgbrowz0r .img-directory span.img-dir-name { font-weight: bold;font-size: 1.2em } #imgbrowz0r .img-thumbnail a, #imgbrowz0r .img-directory a { display: block;margin: 0 auto;width: 200px } #imgbrowz0r .img-thumbnail, #imgbrowz0r .img-directory { float: left;padding: 1.5em 0;width: 25%;text-align: center } #imgbrowz0r .img-column-1 { clear: left } #imgbrowz0r .img-directory a:link, #imgbrowz0r .img-directory a:visited { height: 160px;line-height: 150px; background-repeat: no-repeat;background-position: 50% 50% } /* http://sonspring.com/journal/clearing-floats */ html body div.clear, html body span.clear { background: none;border: 0;clear: both;display: block;float: none;font-size: 0;list-style: none; margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0 }
Create a file called index.php in the root of our folder and copy in the basic html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TheTutorialBlog.com | Photo Gallery</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="js/jquery.prettyPhoto.js"></script>
<script>
$(document).ready(function(){
// prettyPhoto
$("a[rel^='prettyPhoto']").prettyPhoto({
showTitle: false
});
</script>
</head>
<body>
<div id="content_main">
</div>
</body>
</html>Inside the div called content_main is where our the ImgBrowz0r class code will go.
<? require('inc/imgbrowz0r.php'); // These are all settings (set to default). The settings are not validated since you have to configure everything. // There is a chance that ImgBrowz0r stops working if you enter the wrong values. $config = array( // Directory settings. These are required. Without trailing slash. (required) 'images_dir' => 'images/gallery', 'cache_dir' => 'images/cache', // Url settings. These are required. Without trailing slash. (required) // %PATH% is replaced with the directory location and page number 'main_url' => 'http://localhost:8888/tutorials/jquery_gallery/index.php?q=%PATH%', 'images_url' => 'http:///localhost:8888/tutorials/jquery_gallery/images/gallery', 'cache_url' => 'http:///localhost:8888/tutorials/jquery_gallery/images/cache', // Sorting settings (optional) 'sort_by' => 3, // 1 = filename, 2 = extension (png, gif, etc.), 3 = inode change time of file 'sort_order' => false, // true = ascending, false = descending // Thumbnail settings (optional) 'thumbs_per_page' => 12, // Amount of thumbnails per page 'max_thumb_row' => 4, // Amount of thumbnails on a row 'max_thumb_width' => 200, // Maximum width of thumbnail 'max_thumb_height' => 200, // Maximum height of thumbnail // Time settings (optional) 'time_format' => 'F jS, Y', // Date formatting. Look at the PHP date() for help: http://nl3.php.net/manual/en/function.date.php 'time_zone' => 0, // Timezone. Example: 1 'enable_dst' => false, // Daylight saving time (DST). Set this to true to enable it. // Misc settings (optional) 'ignore_port' => false, // Ignore port in url. Set this to true to ignore the port. 'dir_thumbs' => true, // Show a thumbnail in a category box. Default is false. 'random_thumbs' => false, // Use random thumbnails for categories. Default is false. 'read_thumb_limit' => 0 // See README for information about this setting. ); // Start the class $gallery = new imgbrowz0r($config); // Prepare everything. This function must be called before you call other functions. $gallery->init(); // Generate navigation and statistics $gallery_breadcrumbs = $gallery->breadcrumbs(); $gallery_pagination = $gallery->pagination(); // Display navigation echo '<div class="imgbrowz0r-navigation">', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t\n", '</div>', "\n\n"; // Display images and directories echo $gallery->browse(); // Display navigation echo '<div class="imgbrowz0r-navigation">', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '</div>', "\n\n"; ?>
Fill in the information for the main_url, images_url and cache_url or it will not work.
In the imgBrowz0r.php file located in inc find line number 205 and add a rel called prettyPhoto:
'/', $this->cur_directory, $file[1], '" title="', $file[1], '" rel="prettyPhoto"><img src="', $this->config['cache_url'],
If we do not do this then the jQuery prettyPhoto plugin will not work.
Navigating through the gallery without page reloads
To do this we need to write our own jQuery code so that when a hyperlink inside the gallery div then we will do an ajax call that will then replace the content in the content_main div.
$('.img-directory a').click(function(){ $.get($(this).attr("href"), function(data){ $("#content_main").slideUp("slow", function(){ $("#content_main").html(data)}), $("#content_main").slideDown() }); return false; })
So when a hyperlink inside the a div with the class called img-directory is clicked we will get the href from the hyperlink and retrieve that page using $.get(). We will then slide up the element until the content has loaded and then the elemnt will slide back down and contain the content we requested. We also return false so that the page does not reload.
We do the same for the breadcrumbs so we can navigate between them without the page refreshing also:
$('.img-breadcrumbs').click(function(){ $.get($(this).attr("href"), function(data){ $("#content_main").slideUp("slow", function(){ $("#content_main").html(data)}), $("#content_main").slideDown() }); return false; });
The entire index.php page should look like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TheTutorialBlog.com | Photo Gallery</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="js/jquery.prettyPhoto.js"></script>
<script>
$(document).ready(function(){
// prettyPhoto
$("a[rel^='prettyPhoto']").prettyPhoto({
showTitle: false
});
$('.img-directory a').click(function(){
$.get($(this).attr("href"), function(data){
$("#content_main").slideUp("slow", function(){
$("#content_main").html(data)}), $("#content_main").slideDown()
});
return false;
})
$('.img-breadcrumbs').click(function(){
$.get($(this).attr("href"), function(data){
$("#content_main").slideUp("slow", function(){
$("#content_main").html(data)}), $("#content_main").slideDown()
});
return false;
});
});
</script>
</head>
<body>
<?
require('inc/imgbrowz0r.php');
// These are all settings (set to default). The settings are not validated since you have to configure everything.
// There is a chance that ImgBrowz0r stops working if you enter the wrong values.
$config = array(
// Directory settings. These are required. Without trailing slash. (required)
'images_dir' => 'images/gallery',
'cache_dir' => 'images/cache',
// Url settings. These are required. Without trailing slash. (required)
// %PATH% is replaced with the directory location and page number
'main_url' => 'http://localhost:8888/tutorials/jquery_gallery/index.php?q=%PATH%',
'images_url' => 'http:///localhost:8888/tutorials/jquery_gallery/images/gallery',
'cache_url' => 'http:///localhost:8888/tutorials/jquery_gallery/images/cache',
// Sorting settings (optional)
'sort_by' => 3, // 1 = filename, 2 = extension (png, gif, etc.), 3 = inode change time of file
'sort_order' => false, // true = ascending, false = descending
// Thumbnail settings (optional)
'thumbs_per_page' => 12, // Amount of thumbnails per page
'max_thumb_row' => 4, // Amount of thumbnails on a row
'max_thumb_width' => 200, // Maximum width of thumbnail
'max_thumb_height' => 200, // Maximum height of thumbnail
// Time settings (optional)
'time_format' => 'F jS, Y', // Date formatting. Look at the PHP date() for help: http://nl3.php.net/manual/en/function.date.php
'time_zone' => 0, // Timezone. Example: 1
'enable_dst' => false, // Daylight saving time (DST). Set this to true to enable it.
// Misc settings (optional)
'ignore_port' => false, // Ignore port in url. Set this to true to ignore the port.
'dir_thumbs' => true, // Show a thumbnail in a category box. Default is false.
'random_thumbs' => false, // Use random thumbnails for categories. Default is false.
'read_thumb_limit' => 0 // See README for information about this setting.
);
// Start the class
$gallery = new imgbrowz0r($config);
// Prepare everything. This function must be called before you call other functions.
$gallery->init();
// Generate navigation and statistics
$gallery_breadcrumbs = $gallery->breadcrumbs();
$gallery_pagination = $gallery->pagination();
?>
<div id="content_main">
<?php
// Display navigation
echo '<div class="imgbrowz0r-navigation">', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t\n", '</div>', "\n\n";
// Display images and directories
echo $gallery->browse();
// Display navigation
echo '<div class="imgbrowz0r-navigation">', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '</div>', "\n\n";
?>
</div><!--content_main-->
</body>
</html>Download
You can download the files used in this tutorial here
Final words
I hope this tutorial has been useful for you and that you can take something you have learnt from it and use it in future projects.
Please feel free to leave a comment.
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.