Pikachoose is a lightweight jQuery image plugin, it comes with easy to use API and simple design.
In this tutorial, we are building a dynamic jQuery image gallery. Which means users will upload images dynamically from a script and the front page will automatically show an image powered by Pikachoose. However there is no database required, images are scanned from a particular folder.
Let us get started.

Table Of Content

  1. Preparation
  2. Building the upload page
  3. Building the front page
  4. The end

Content


1.Preparation
  • Download Pikachoose from this URL. We are using version 4.5.0 by the time of writing this tutorial.
    Extract "lib" and "styles" folder from downloaded zip file. And in this tutorial we are using the "bottom.css" for stylesheet.
  • Create a folder "uploads", this is for storing uploaded files.
  • Create a file "index.php", this is for the gallery's page.
  • Create a file "upload.php", this is for uploading images to "uploads" folder.

Your folder&file structure should look like this after the preparation:

2.Building the upload page

Open file "upload.php" and copy content below:

This is a very simple upload page, what it basically does is to upload your chosen files to folder "uploads" folder. For tutorial purpose, we made it simple and insecure, because everyone will be able to come to this page and upload files.
To make it production ready, you should put "upload.php" to your password protected admin section.

The part, which handles the uploading work is the PHP block at the beginning of the script. It firstly checks if there is any file sent and then move it to "uploads" folder.

The upload page should look like below after you have completed this section. And you should be able to upload files to "uploads" via the form.
Pikachoose with PHP

3.Building the upload page

Open file "index.php" and copy content below. We will go though the codes after.

  • block 1: Firstly let us take a look at the first block of code. It is simply include required JavaScript libraries and Stylesheet files.
    And at last creating a Pikachoose object by calling:
  • block 2: This part of code is a bit tricky. It scans folder "uploads" by using function scandir.
    Please note scandir will return '.' and '..' as results, that is why we need to filter them out in the loop.
    Lastly we used DIRECTORY_SEPARATOR as path separator, so that it works both on Windows and Linux systems.

After this section, you should be able to view images uploaded from section 2, from a pretty Pikachoose gallery.
Pikachoose with PHP

4.The end

Hopefully this simple tutorial helped you with your development.
If you like our post, please follow us on Twitter and help spread the word. We need your support to continue.
If you have questions or find our mistakes in above tutorial, do leave a comment below to let us know.

You might also want to check out course Uploading Files Securely with PHP from lynda.com.