I'm using Wordpress and using their code, I'm outputting the gallery uploads to a specific page as an unordered list of images.
I'm wondering if there's a way to position these images absolutely within the container (which will be relative) using JS and without any overlapping? So, it must position them and then take note where that image is and make sure the next image doesn't overlap etc.
This should be a random generation each time, but I'm also wondering if it's possible to make the images and their position the same each time?
Thanks guys, look forward to some thoughts.
-R
EDIT: You can see the HTML and progress so far here: http://richgc.com/freelance/staton/furniture/
There are a few jquery plugins that do this.. Here is one:
Go with @lucuma's answer (I didn't know there were pre-existing plugins).
If you were going to implement such a plugin by hand, you could use a cutting algorithm, traditionally used for optimizing the cutting out of parts from sheet metal, to determine locations for your images that will not overlap.
If you select a deterministic algorithm, you should always get placeholders for images in the right place. Were images always of different sizes, that would ensure images always appear in the same place. Since many images will probably be the same size, you could assign images to the "cut out slots" in e.g. alphabetical order of the image file name.