From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
Here’s a jQuery Image Gallery script with a multi file Uploader, that was implemented using three resources that I found on the web:
click on the image to see a demo
It’s easy to find a lot of good image galleries out there, a lot of upload scripts and thumbnail generators. But I found it hard to find one script that includes them all, so I decided to try to integrate them in one, which is actually what is interesting to have in a site. I basically put them together and added one or two functions to the whole thing, and added some Ajax script to load the pictures.
So now, besides being able to see the gallery, which is pretty cool by the way, you can upload multiple image files (for this demo just jpg and gif, although you can configure what you want) next to it and have them added to the gallery on the fly, after the upload is finished (you can click on “last uploads” in the demo to see the last images). If you don’t want that the images are loaded immediatly after you upload them, then just remove the onAllComplete option in the innitialization of the uploadify plugin, in index.html.
Because this is a demo I limited the pictures size that you can upload to 500kb, and you can just upload 5 at a time. Of course then you can configure this as you like.
For the thumbs and images generator, I use the class.upload.php script (very nice work), and I call it in the file uploadify.php. There you can configure the way you want your pictures to be generated, both original and thumbnail (for example the sizes, the filenames, the maximum size, if you want that pictures with the same name are replaced …). For this script I generate a hash for the name of the files, which will be always different. You can change that if you want… Remember that the folder where the pictures are stored (images and images/thumbs) should have the right permissions in order for you to upload your files.
I would suggest that you take a look at the possible configurations for each one of the scripts that I used:
see the DEMO
download source code here
You can find more jQuery Image Galleries here
If you have any suggestions for this script, or if you find some bugs please let me know.