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
- 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:
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.
Open file "index.php" and copy content below. We will go though the codes after.