Simple jQuery gallery and sortable: one last missing piece...

Question

Hey there,

So, I've built-up a little gallery using a few plug-ins and some custom code. This is for a few photography website portfolios. So far, I've got the thumbnails in a UL on the left, and the larger image on the right. I've got some hover effects on the thumbnails, and onClick they fadeOut the larger image, swap SRC, load, then fadeIn again. It's neat. :)

I've also got an admin login that allows you to crop the thumbnail previews, upload new photos, and delete existing ones. The thumbnails are automatically generated using some PHP and readdir to echo the LIs.

So, that's the scenario, now here's my problem: I've got the .sortable() jQuery UI plug-in applied to my thumbnail UL, and I can drag them around, but I can't figure out for the life of me what would be a good way to go about capturing the new location of the thumbnails, and more importantly saving this! It's not a user preference, it's an admin control so cookies for each user wont work, I'd like it to actually edit how the site is displayed.

Should I have some PHP that takes the directory listing into an array and reorders it in some custom order? Should I have write some PHP to change the name of the image so PHP can automatically sort it on the next page load? MYSQL database for sort order? I really have no idea how this should be done! Ideas?

Thanks in advance for any advice! I know many others out there are wondering the same thing!

Answer 1

I'd use the jQuery.ajax() method to pass the file names and sort order to a PHP file that updates a table in MySQL. All you need in the table are two columns - one for filename and one for sort order.