Flash-based photo gallery

[03 Feb 2006]

The gallery

Updated Jun 2011: Unfortunately, something changed in Flash and this gallery is now broken. If I was doing it again now, I’d use a jQuery-based front end for the gallery.

Background

I have been using Coppermine photo gallery on this site for a while now (see the Coppermine version of the gallery: Travel Pix). I have always found Coppermine to be clunky – that is, each new photo requires a new page load and as the photos are loading, the screen jumps all over the place. This is because the pages are based on tables (within tables, within tables). It is not an elegant solution.

There is a “slide show” feature in Coppermine, but the fade-in/fade-out feature only works in IE, not Firefox. The slideshow gives a better user experience than the normal pages, but you can’t see photo titles or photo descriptions as it proceeds.

One possibility I considered was to upload all the photos to Flickr (which has an excellent Flash photo viewer), but this would be time-consuming, tedious and I’m not sure that’s where I want them. And anyway, I enjoy challenges.

I have been toying with the idea of developing my own Flash-based gallery for a while. I looked at several open-source solutions, but I found none of them did what I wanted them to do. In particular, they were not robust for a large number of photos. Also, most of the ones I found did not pre-load images (you would choose an image, then you had to wait – looking at an empty screen – for the image to load before it would appear).

So over Chinese New Year holiday break I got started on a Flash-based photo viewer.

(For comparison with the Coppermine photo gallery, go to Taiwan Photos (Coppermine version).)

How it works

I am using the Coppermine’s mySQL database for the titles and descriptions of each photo. (This was another reason I didn’t want to completely change galleries – all the pix and info are already in there.) The Flash SWF is triggering a PHP file which in turn queries the database. The info is returned in the form:

&filename0="taiwan1.jpg"&title0="This is Taiwan"
&description0="It was great"&filename1=...

This is then read by the Flash file and the images with descriptions are displayed.

I did also work on an XML-based solution, but this was not satisfactory for this application since each time there was an update to the Coppermine gallery, I would need to re-generate the XML file. With the current solution, any updates in Coppermine are immediately reflected in the Flash-based gallery. (Update: I realise now I could regenerate the XML on the fly, but too late now…)

Future Development

Things I will be doing in the Flash version:

  • Tidy up the interface Done – 12 Feb 2006
  • Fix some timing issues Done – 12 Feb 2006
  • Add an option to see full-size images (1000×750 pixels) Done – 4 Jun 2006
  • Add clickable thumbnails Done – 4 Jun 2006
  • Add an option to view other albums within the Coppermine gallery Done – 4 Jun 2006
  • Attempt more efficient loading from the PHP file (This appears to be working fine – no need for further action)

It should keep me out of trouble… It did keep me out of trouble!

Update (4 Jun 2006): Finally this is finished! The clickable thumbnails were not that hard to do, but added a lot of complexity to the button behaviour. The buttons need to be ‘inactive’ when fadein.fadeouts are occuring, else loading errors would occur.

Moving the thumbnails was another interesting exercise. I wanted to have a smooth movement (which I achieved) but I had to abandon it when it was all put together – it just had too many possible user inputs and getting one thing to work meant 3 other things would break. Anyway, I feel the overall effect is still much more pleasing than Coppermine.

I decided on a PHP-based solution for choosing albums by clickable thumbnails. A Flash-based solution for this would have taken a lot longer, and not been any better, I felt. My gallery chooser also allows for restricted view galleries, also based on Coppermine’s restrictive view system. That bit was fun – the login info is passed to the Flash file via a GET so that when the user clicks to go back to the PHP album choice page, they are still logged in.

[It's a shame it's broken now! One day if I have time, I'll fix it...]

Share this page

50 Comments on “Flash-based photo gallery”

  1. squareCircleZ » Photo gallery - finally finished says:

    [...] For the background and more technical details, see the original post on this: Flash-based photo gallery [...]

  2. alex says:

    Love your gallery.. anyways you can email me the script.. very clean design…

    i need flash version for myspace.

  3. Hans says:

    Just what I was looking for. I also hate the page refreshings of Coppermine.
    What if you upgrade Coppermine, will it still work?

  4. Murray says:

    Hi Hans. I can send you the Flash SWF and PHP files if you would like to try it out.

    If the developers upgrade Coppermine it should be fine, since my gallery is just reading from the Coppermine database and is otherwise independent. One potential problem is that they may add another field to the database and then I would need to make a small change.

  5. Trig says:

    Hi,

    absolutely brilliant, I’ve been trying to dig through what coppermine creates in mysql to try and achieve something like this. Do you have any plans to make the swf and php files available ? or create some kind of tutorial ?

    Trig

  6. Murray says:

    Hi Trig – As I mentioned in the mail to you, I am happy to supply the files for anyone to try it out. I am looking for feedback before I make it available for download. It’s best to fix things early…

  7. Lars says:

    NICE!

    Could you e-mail me this script ?

  8. Murray says:

    Hi Lars – Glad you like it. I have sent the files. I’m looking forward to seeing how your Coppermine site looks using the Flash gallery.

  9. scott says:

    i was also thinking of trying to develop a flash gui for coppermine, do you think i could take a look at the source files.

  10. Murray says:

    Hi Scott – I have sent them via email. Let me know how it goes.

  11. Matt says:

    Wow! this is exactly what I have been looking for! In many respects I hate coppermine and I would love to try your solution to give it more of a clean cut and professional edge.
    Any chance that I could have a play with it for our site ToastMonkey.co.uk?

    Cheers,

    Matt

  12. Murray says:

    Hi Matt I have sent you the files in a mail. Let me know how it goes.

    Regards.

  13. sounes says:

    Simply stunning, and what I have looked for in a long time. Could you email me the files, please? – is it easy to set up?

  14. Murray says:

    Hi Sounes – I have sent the files to you via email. Looking forward to your feedback.

  15. Mike Z says:

    Hey there I would like to take a look at this if it is ok to download :)

  16. VinVen says:

    Simply Brilliant. Very clean and elagant interface. Can’t wait to create my own Family photo albums using this approach. Can you please send me the necessary files. Thank you for your time.

  17. Murray says:

    Hi VinVen. I have sent you the script via email. Glad you like it.

  18. Jason says:

    Great job! Can you send me the script also?
    Thanks

  19. Murray says:

    Hi Jason. I sent you the script via mail.

    Please respond here once you have set it up – all feedback helps.

  20. Charlie says:

    Hi,
    You’ve created a perfect slideshow… two questions, do you need the Flash program (the program, not the viewer) to build your slideshow? And if you don’t need Flash, would it be possible for you to send me the script? If I can get it to work, I’ll be happy to send you the results with all credit.
    Many thanks,
    Charlie

  21. Murray says:

    Hi Charlie

    You don’t need Flash program to build your own gallery.

    The files I send you are ready to connect to a Coppermine gallery.

    Regards

  22. SteveW says:

    This looks just awesome… any chance I can have a copy please?
    Thanks Steve

  23. Murray says:

    Sure Steve – I’ll send it to your email.

    Please come back here and comment (and share your gallery, if you are game!) when you get it working.

  24. SteveW says:

    works well… great support from the author… I think you need to seriously think about selling this!

  25. Murray says:

    Thanks for the feedback, Steve.

    I’m glad that it suited your purpose.

  26. Jay says:

    Would love to use this as front end to my photo site. Can you send code??

  27. Murray says:

    Hi Jay

    I have sent you the files by email. Good luck with it and tell me how it goes.

  28. Jay says:

    This is a great way to utilize flash slideshows in coppermine. Can you please send me the code.

  29. stalt says:

    Have you try free image slideshow?
    Like some flash gallery

  30. Murray says:

    Jay I have sent you the files via email. Let me know how it goes.

    Stalt Thanks for the recommendation – I like your gallery. It does not appear to have any connection with Coppermine, however.

  31. Christian says:

    Hi, I am interested in your coppermine flash gallery. I would like to try it on my website as I am quite frustrated with joomla and the gallery. I would be glad if you could send it to my mail address. Thank you.
    Best regards
    Christian from Germany

  32. Murray says:

    Hi Christian

    I have sent you the files by email. Hope it goes well.

  33. Jonathan says:

    I would like a copy of this script as well…please email me. THANKS FOR YOUR HARD WORK!

  34. Murray says:

    Hi Jonathan

    I’ve sent the files to you. Good luck with it.

  35. Reality Software says:

    I would also recommend Flash Gallery.

  36. Murray says:

    Thanks, “Reality” – your gallery looks nice, and it is one of many free offerings out there.

    The point of my Flash gallery is that if you already have a Coppermine gallery, then you will have a nicer viewing interface. Coppermine is good for organizing the photos into categories and albums and for writing notes on the photos. My gallery takes all that information and makes it look nicer.

    Your gallery serves a different purpose – display photos in a folder.

  37. Kausik says:

    Hi Zac,

    I stumbled upon your gallery and am impressed by the Coppermine-Flash interface that you have created. Can I have the files for my personal use? Although I like Coppermine for the photo management tasks, I hate the display interface. It will be good to use the Coppermine back-end and a Flash based front-end.

  38. Dea says:

    Uh… I’m sorry. I just wanna know how do you use Coppermine Gallery on werdpress? How did u made it together?

  39. Murray says:

    Dea: I searched for Coppermine plugins for WordPress for you, but there doesn’t seem to be anything out there that is current and works.

    The “Travel Pix” images that appear on the top right of each page in squareCircleZ are drawn from Coppermine. It’s not a plugin – I just wrote some code to grab random thumbnails and drop them there.

    Is that what you are looking for?

  40. chris says:

    hi!

    i been looking of “databased flash image gallery” for some time now, and i really impressed by your solution.

    is it maybe possible you can mail me all the necessary files as well?

    you would me my life safer!

    thanks
    chris

  41. Murray says:

    Hi again Chris (aka VinVen). I sent you these files back in October 2007.

    But I notice your email bounced just now.

  42. Matt says:

    I am in the same position as a lot of others on this board, looking for a good Coppermine interface. I was wondering if I could also have a look at your script? Thanks a lot!

  43. Murray says:

    Hi Matt

    Your email address bounced – comment again here and I can send you the files.

  44. Joly says:

    Zac,

    This is amazing! Could you please send me your script? It would be awesome to have a look at it, since I’m trying to integrate flash into coppermine for flash-based private galleries. I am trying to make an interface where a user can login and view their private coppermine galleries — all within the one flash file.

    Thanks so much for you hard work

  45. JC says:

    I’ve come to the conclusion that Coppermine is also clunky… like the idea of your flash script, would you mind sending to me? Many thanks!

  46. Murray says:

    Hi JC. The files are in your inbox. Let me know how it works out.

  47. Gene says:

    I’ve have been looking for/working on for a better frontend for my coppermine photosite… like the idea of your flash script, would you mind sending to me? Many thanks!

    Gene

  48. Smith says:

    great looking flash gallery. I would love to take a look at the source to see if I could add some features.

    Thanks for all the hard work!

  49. Peter says:

    Could you send me the script, I’m working on similar flash – carousel gallery based on coppermine . It would be nice to see what is already done. Thanks and it’s great job.

  50. Andyj says:

    I love your solution.. I working on a coppermine gallery and would like to do the same… Please send me your script..

    Much Appreciated.

    Andy

Leave a comment


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>