Dynamic jQuery Image Gallery with Uploader

Here’s a jQuery Image Gallery script with a multi file Uploader, that was implemented using three resources that I found on the web: uploadify ad-gallery class.upload.php 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 […]

Here’s a jQuery Image Gallery script with a multi file Uploader, that was implemented using three resources that I found on the web:

  1. uploadify
  2. ad-gallery
  3. class.upload.php

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:

  • for the class.upload.php here
  • for the uploadify here
  • for the ad-gallery here

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.





Previous:
Next:

Tagged with:

Chadking is an absolute geek that rarely leaves the comfort of his 3-screen desk. He is a self taught programmer and is addicted to all possible legal drugs.

View all contributions by

Website: http://tympanus.net/codrops/author/chadking/

Related Articles

Feedback 44

Comments are closed.
  1. 1

    i can run the gallery, but when i try to upload the picture, nothing happen.
    the progress bar not moving at all.
    any parameter i should change?

  2. 2

    Hey guys.

    I’m having the same issues with the uploader as the user above.

    I click on Browse, choose my image, the uploader will show the progress of the image being uploaded, complete it, but then the image isn’t being added to the Gallery.

    No images are actually being uploaded to my images or thumbs folder. I have changed my permissions to 777 and nothing.

    Any help would be greatly appreciated.

  3. 3

    Hi, thanks for this excellent gallery, It works great! But I hove a problem, all of the images came with the same description, how can I configure the description of each image?

  4. 4

    It is a great script, thanks for sharing.

    I am wondering if it possible to build in a delete option if you would like to delete uploaded pictures without using ftp account.

  5. 5

    Hi…Uploading a gif does not work in your demo, nor in my code. Anyone know a fix?

    its not working in local system also please suggest me

  6. 6

    is it possible to configure this script so the images are stored in a database? if so please show how

  7. 7

    can anyone guide me to change uploding image file name using custome text box..

  8. 9

    hi cody,

    Could you please show a way to add image title and description along with images.

    Thanks.

  9. 10

    I Wish You Fix It, Coz It Looks Bad !! Like Show 6 Images And Other In 1.2.3….. Pages ..

  10. 12

    hi,
    i tried to use your code but it do not display image on firefox 6. it only shows thumbnails… it works fine in ie8.
    suggest me, how to make it work on firefox 6.
    hoping to get reply soon.
    thanks in advance

  11. 13

    Awesome code!!

    I also am having issues with the loader. The progress bar does not show progress.

    Please let me know what file generates the loader progress bar or how to resolve this!

  12. 16

    Two things – in Safari on a Mac 10.6 the browse button does not show – however in Firefox it does (there may be a css issue there)

    also

    How does the user edit the description of the image they upload? I don’t see when they can do that – have I missed something?

  13. 18

    Thanks for script..

    i was just looking for jquery image uploader but now i also found gallery with it..

    thanks

    Vasim Padhiyar

  14. 19

    Great script simple install, really excellent.. but as said an option to add a description is really a must! Challenge is out there guys, who’s gonna solve it…..? An option to add a description before Christmas??? anyone

Comments are closed.