Scroll page back to the top

Gallery with Image Tagging

Gallery with Image Tagging

Have you ever wanted to learn how to create image tagging similar to the one used on Facebook?

In this tutorial you will learn how to upload, resize and crop images.
How to create tags for the image and how to search for images by tag.

How to display uploaded images and how to create a Paging class to allow images being spread over a number of pages.

All this using PHP, MySQL, jQuery, jQuery UI and ImageMagick.

Time: 189:33 min / Price: £54.00

Sebastian Sulinski on 23rd Aug 2011

Add to the basket
 

Introduction

Watch now!

What's in the package (02:20 min)

 

Framework

Watch now!

Header, footer and navigation (04:52 min)

 
Watch now!

Autoloader and config (07:58 min)

 
Watch now!

Include path (04:18 min)

 
Watch now!

Core class (04:32 min)

 

Upload

Watch now!

Upload form (05:50 min)

 
Watch now!

Upload class (04:58 min)

 
Watch now!

Validation (05:34 min)

 
Watch now!

Validate extension (03:17 min)

 
Watch now!

File size and file name (03:52 min)

 
Watch now!

Helper sanitise method (03:10 min)

 
Watch now!

Upload and get error (02:38 min)

 
Watch now!

Upload file (04:54 min)

 

Image class

Watch now!

Crop method (06:28 min)

 
Watch now!

Resize method (02:25 min)

 
Watch now!

Upload, resize and crop (02:33 min)

 

PDO wrapper class

Watch now!

Database connect method (04:59 min)

 
Watch now!

Query method (05:02 min)

 
Watch now!

PDOException output (03:25 min)

 
Watch now!

Last id, get all, execute and insert methods (03:50 min)

 
Watch now!

Import database (01:36 min)

 
Watch now!

Insert record (04:30 min)

 
Watch now!

Testing upload (03:16 min)

 

Tagging

Watch now!

Get image size (05:11 min)

 
Watch now!

Display image and associated tags (05:40 min)

 
Watch now!

List of tags (02:14 min)

 
Watch now!

New javascript object (04:06 min)

 
Watch now!

Create dialog method (04:51 min)

 
Watch now!

Make dialog draggable (04:04 min)

 
Watch now!

Remove dialog (01:49 min)

 
Watch now!

Save tag (04:53 min)

 
Watch now!

Save record (03:37 min)

 
Watch now!

Add tag file (04:40 min)

 
Watch now!

New outline and tooltip (05:22 min)

 
Watch now!

Trigger dialog removal (03:57 min)

 
Watch now!

Show outline (02:33 min)

 
Watch now!

Show tooltip (02:43 min)

 
Watch now!

Remove tag (02:12 min)

 
Watch now!

Remove tag file (03:05 min)

 
Watch now!

Cancel button (00:52 min)

 

Displaying images

Watch now!

Search form (05:03 min)

 
Watch now!

List of images (06:13 min)

 
Watch now!

Paging class (03:24 min)

 
Watch now!

Render links (05:27 min)

 
Watch now!

Generate url (02:53 min)

 
Watch now!

Get links (03:28 min)

 
Watch now!

Set link and set span (01:20 min)

 
Watch now!

Apply pagination (05:00 min)

 
Watch now!

Remove image method (01:43 min)

 
Watch now!

Remove image file (03:32 min)

 
Watch now!

Trigger image removal (02:34 min)

 
Watch now!

Fixing IE compatibility (01:30 min)

 
 
 
 

Discussion (2 comments)

  • Lars inge Holen

    Lars inge Holen on Thursday, 27th October 2011

    On premium-tutorials, would it be an idea to add a note/memo on what to do when installing on remote server - a sort of 'what to do list' ...

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Thursday, 27th October 2011

    Hi Lars,
    I agree - I'll make sure I mention next time what needs to be done when uploading to the server. In case of this specific tutorial we need to make sure that we have ImageMagick, PHP 5+ and MySQL installed on the server.

    Reply

 
 
Add a comment
Add Comment