Making jQuery-based galleries with Wordpress without a plugin?

Question

I've been racking my brains for the best way to create a simple gallery in Wordpress without relying on a plugin like NextGen gallery, and was thinking a shortcode would be a good way combined with the in-built method of 'attaching' images to a post. That way, the user would 'attach' images they've uploaded and the description for the image could be used as a caption.

That was, until I realised that there's no easy way to 'unattach' an image from a post unless you delete the image itself (meaning it disappears from other posts/pages you've inserted it into). Plus, it doesn't let you link the images to different parts of your site.

So I'm now thinking Custom Fields or some other method involving a shortcode or hardcoding an area in my template might be a good way to do it, but the problem is how to associate the various parts of the gallery for each image:

• the image url
• the image dimensions
• the link wrapping the image
• the order of the images

The HTML I'd need to output for each image would be this:

<a href="-LINK_TO_PAGE_HERE-" title="caption" alt="description">
  <img src="-URL_TO_IMAGE-" width="x" height="y" />
</a>

And then I'd wrap that in a div like <div id="osu-gallery">...</div> so I could do what I wish with it in jQuery.

Is that possible in Wordpress without the use of a plugin? I want to do this on a post-by-post basis and without going into the HTML editor and manually writing the code. My clients tend not to be too computer-savvy...

Thanks for any pointers,

Osu

Answer 1

You won't be able to do it purely with Javascript (with or without jQuery) as the images are hosted server-side, and there'd be no way for a Javascript function to scan to see what's available.

What you could do is write a function to do it in functions.php and tie it to a shortcode, but then you're starting to get into the territory of where a plugin would be easier.