logo

Gravl: Funky Image Preview and Inplace Editing

logo

I’ve been having fun implementing my first cut at Image/File management for Gravl, and along the way I’ve learnt about LightBox and the Scriptaculous InPlaceEditor stuff.

First up, I needed a way of doing an image preview, so I could see what all of those PNGs really meant. Lightbox gives you a great way of “overlaying” the preview image as a popup without the need to refresh the page. Very snazzy. I followed the instructions and I was up and running in a few minutes.

Gravl Image Preview with Lightbox

Everything will make more sense with a little screencast (1.5mb)

Next stop was handling image renaming. I was really after a way to edit the actual filename inplace. Enter InPlaceEditor. This call lets you specify the id of the object you want to edit inplace, along with the url to do the ajax call against (which will get passed the user’s updated value in a params.value). If all is well, you return the changed value and life continues.

Gravl Inplace Rename with Scriptaculous

Well that was quite a lunch hour. I have a basic image management solution to keep me going so I can now upload the images for this blog entry without needing an SCP client!

Happy Previewing in Grails!

3 Responses to “Gravl: Funky Image Preview and Inplace Editing”

  1. Wolfgang says:

    Hi Glen!

    Thanks again for this little snippet! Keep going, you’ll be closely watched! :-)

  2. Brian says:

    Hi Glen,

    The source code on googlecode is still gravl 0.1. Where can I see the 0.3 code?
    Thanks and keep up with the excellent work!

  3. Glen Smith says:

    Brian,

    I try and keep my deployed copies in sync with SVN, so you‘ve got the current code. In this case I just failed to commit one file, the application.properties file, so it‘s still reading with the old version.

    Good luck.

    Glen.

Leave a Reply

Your email address will not be published. Required fields are marked *

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

logo
logo
Powered by WordPress | Designed by Elegant Themes