The Tutorial Blog » thetutorialblog

PHP gallery with no page reloads using jQuery

Wez Pyke — Wed, 23 Dec 2009 18:02:09 +0000

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.




	
	TheTutorialBlog.com | Photo Gallery

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 '', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t\n", '
', "\n\n";
 
// Display images and directories
echo $gallery->browse();
 
// Display navigation
echo '', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '
', "\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">, $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:




	
	TheTutorialBlog.com | Photo Gallery
	
	
	
	
	
 
	



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 '', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t\n", '
', "\n\n";
 
// Display images and directories
echo $gallery->browse();
 
// Display navigation
echo '', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '
', "\n\n";
?>

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.

PHP News System Part 4

Wez Pyke — Sun, 17 Aug 2008 23:15:05 +0000

If you haven't checked out the previous tutorials then click on the names to view them. Part 1, Part 2, Part3.

In Part 4 of this tutorial you are going to learn how to edit and delete your posts from the admin page.

Connect to the database

The first thing that we need to do is go to index.php under the admin folder and to the after the first add this:

include("../dbconnect.php");

Display The Posts

After this line in index.php

echo "New Post";

add below it

echo "
";
echo "
";
echo "Edit Posts
";

$query = mysql_query("SELECT * FROM news_system ORDER BY id DESC");
while ( $row = mysql_fetch_array( $query ) ) {
$id = $row['id'];
$author = $row['author'];
$title = $row['title'];

echo ''.$title.' - By '.$author.'
';
}
}

What we're doing here is querying the database to display all the posts in the table news_system from the newest post to the oldest post. We then use a while loop to loop through and display each post. You will see that each post links to editpost.php so what we will do now is create an editpost.php file.

Creating editpost.php

After you have created your editpost.php file add the following code to it

include("../dbconnect.php");

$id = $_GET['id'];

?>

What we're doing here is opening the php tags then including dbconnect.php that connects to the database. $_GET['id'] gets the id from the URL and stores it in a variable called $id. Then we close the php tags with ?>.

Before the ?> insert the following code.

$query = mysql_query("SELECT * FROM news_system WHERE id='$id'");
$row = mysql_fetch_array($query);

$author = $row['author'];
$date = $row['date'];
$title = $row['title'];
$post = $row['post'];

What this code will do is find the row in the table news_system with the id that is stored in $id. Then we retrieve the author, date, title and post information.

Below this we're going to create a html form and display the information that we have retrieved from the database within it so that we can edit it.

if( !$_POST['submit'] ) {
echo '
';
echo 'Author:
';
echo 'Date:
';
echo 'Title:
';
echo 'Post:
'.$post.'&lt'/textarea> '; echo '<input type="hidden" name="id" value="'.$id.'">'; echo '<input type="submit" name="submit" value="Edit Post"> '; echo '<a href="deletepost.php?id='.$id.'">Delete Post</a>'; } </div> What happens in this piece of code is if the post hasn't been submitted then include the form. Within all the form elements you'll see that they all have value and that value is the variables. We also include the id in a hidden element so that we can carry it over for when the submit button is pressed. Under the submit button there is a link to a page that we will create in a minute that will delete that post. In the next lot of code we're going to make it retrieve all of the values from the form and store them in variables that will then be used to update the row within the table. <div id="code_div">else { $id = $_POST['id']; $author = $_POST['post']; $date = $_POST['date']; $title = $_POST['title']; $post = $_POST['post']; $query = mysql_query("UPDATE news_system SET author='$author', date='$date', title='$title', post='$post' WHERE id='$id'"); echo 'Post was updated, <a href="index.php">return home</a>'; }</div> Here you can see we are retrieving all the information from the form and storing the information into variables. Then we query the database to update the new values and lastly return a message to the user to know that it has been updated. All the code together should look like this: <div id="code_div"> <?php include("../dbconnect.php"); $id = $_GET['id']; $query = mysql_query("SELECT * FROM news_system WHERE id='$id'"); $row = mysql_fetch_array($query); $author = $row['author']; $date = $row['date']; $title = $row['title']; $post = $row['post']; if( !$_POST['submit'] ) { echo '<form method="POST">'; echo 'Author: <input type="text" name="author" value="'.$author.'"> '; echo 'Date: <input type="text" name="date" value="'.$date.'"> '; echo 'Title: <input type="text" name="title" value="'.$title.'"> '; echo 'Post: <textarea name="post" cols="30" rows="5">'.$post.'&lt'/textarea> '; echo '<input type="hidden" name="id" value="'.$id.'">'; echo '<input type="submit" name="submit" value="Edit Post"> '; echo '<a href="deletepost.php?id='.$id.'">Delete Post</a>'; } else { $id = $_POST['id']; $author = $_POST['post']; $date = $_POST['date']; $title = $_POST['title']; $post = $_POST['post']; $query = mysql_query("UPDATE news_system SET author='$author', date='$date', title='$title', post='$post' WHERE id='$id'"); echo 'Post was updated, <a href="index.php">return home</a>'; } ?> </div> Now that we have created the editpost.php file its time to create deletepost.php. <h2>Delete a post</h2> In this delete file I haven't added any confirmation to ask the user if they're certain that they want to delete the post. It might be a good idea to add it using submit buttons or javascript. <div id="code_div"><?php include("../dbconnect.php"); $id = $_GET['id']; $query = mysql_query("DELETE FROM news_system WHERE id='$id'"); echo 'The post was deleted, <a href="index.php">return home</a>'; ?></div> As usual we include the php tag and the database file as we're going to be querying the database. We then get the id from the URL and store it in $id. Then we query the database and delete the post and last of all we display a message to the user saying the post has been deleted. <h2>Thank you</h2> Thanks for taking the time to read this tutorial. I hope that you have learnt something and that you keep returning to check out our latest tutorials. If there is anything that you need help with then please post a comment and I'll write a tutorial on it or get back to you. No related posts. Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>. </article> <article> <h1>Basic Actionscript 3 Game Part 1</h1> Wez Pyke — Sun, 06 Apr 2008 19:16:20 +0000 <style> #code_div { border: 1px solid #DFF4B5; background-color: #F0FFD2; padding-left: 50px; padding:10px;} </style> <style> #code_div { border: 1px solid #DFF4B5; background-color: #F0FFD2; padding-left: 50px; padding:10px;} </style> <div class="tweetmeme_button" style="float: right; margin-left: 10px;"> <a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.thetutorialblog.com%2Fflash-actionscript%2Fbasic-actionscript-3-game%2F"> </a> </div> A video tutorial showing how to create a basic game using Actionscript 3. <param name="Movie" value="http://flash.revver.com/player/1.0/player.swf?mediaId=794233&affiliateId=42154"></param><param name="FlashVars" value="allowFullScreen=true&backColor=#000000&frontColor=#ffffff&gradColor=#000000"></param><param name="AllowFullScreen" value="true"></param><param name="AllowScriptAccess" value="always"></param></object> The first thing which we do is create two movieclips, one called player and one called bullet then we remove them from our stage by pressing the delete key on your keyboard. Comment 1 var Player:player = new player(); This creates a new instance of the movieclip which we made called player. Player.x = mouseX; This sets the X position of Player to the X position of the mouse. Player.y = mouseY; This sets the Y position of Player to the Y position of the mouse. addChild(Player); This adds the Player instance that we have just created to the stage. Comment 2 stage.addEventListener(MouseEvent.MOUSE_MOVE, mousemove); An event listener listens out for an event which has been defined within the paranthesis. Here when the mouse moves on the stage then the function mousemove is called. stage.addEventListener(MouseEvent.MOUSE_DOWN, shoot); When the left mouse button is pressed then the shoot function is called. Comment 3 function mousemove(e:MouseEvent):void{, This creates the function mousemove and looks for mouse events. Player.x = mouseX; Update the Player X position to the mouses X when the mouse is moved. Player.y = mouseY; Update the Player Y position to the mouses Y when the mouse is moved. } Close the function. Comment 4 function shoot(e:Event):void{ create a function called shoot. var Bullet:bullet = new bullet(); This creates a new instance of the bullet movieclip. Bullet.x = Player.x; The Bullet X position is set to the same as the Player X position. Bullet.y = Player.y; The Bullet Y position is set to the same as the Player Y position. addChild(Bullet); Add the instance Bullet to the stage. Bullet.addEventListener(Event.ENTER_FRAME, moveBullet); Add an event listener to Bullet for when it enters the frame and when it does call the function moveBullet. } Now we close the function. Comment 5 function moveBullet(e:Event):void{ create a function called moveBullet. e.target.y -= 5; When the function is called the targets Y position will be subract by 5 pixels every frame, this makes the movieclip move up. The target is the Bullet movieclip. if(e.target.y <= -10){ If the Y of Bullet is less than or equal to minus 10 then the event listener will be removed and so will the movieclip. e.target.removeEventListener(Event.ENTER_FRAME, moveBullet); removeChild(MovieClip(e.target)); } Close the function Thanks for watching the tutorial and reading through the notes. If there is anything that you don’t understand then please post a omment and I will try to explain your problem as best as I can. Related posts:<ol><li><a href='http://www.thetutorialblog.com/cocoa-objective-c/creating-a-basic-ipad-application/' rel='bookmark' title='Permanent Link: Creating a basic iPad application'>Creating a basic iPad application</a> Because of the recent announcement of the iPad 2 more...</li> </ol> Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>. </article> </main></body></html>