image selection tool

The purpose of this tool is to facilitate the selection and presentation of sets and subsets of images.

I put this together because I wanted a way to access drawings to use for reference when making new work. It might just as well be used in making a presentation to a client, or audience. It uses standard HTML, CSS, and JavaScript, and so has the advantage of being portable in that it will run in any web browser.

On open, the page displays images that then may be selected by mouse click and then enlarged by pressing the keyboard Enter key. The images will scale-up to best accommodate the number of images selected and the width of the browser window. Use the F11 key to view fullscreen, and F5 to refresh the page and return to the opening state. Sample page.

image sample a, 1 x 1.25Images are scaled to fit the browser window. A percentage of the window width is allocated for the display of images, and divided by the number of images selected to determine their widths. The width is multiplied by 1.25 to set the height. To display correctly your images must be prepared with an aspect ratio of 1:1.25. With the browser open to the full width of your monitor screen, the single image display will be at maximum size and guide you in setting your template file to full resolution. Images must be placed within an “images” folder at the same level as the .html file, and named “1.jpg, 2.jpg . . . 18.jpg”. The download includes a Photoshop .psd template file and a folder with placeholder .jpg files. Ideally, I would have liked to be able to load files directly from a directory folder, but for security reasons Javascript cannot access local file information.

Portrait mode best fits my needs, and so I’ve put this first version together with that in mind. If there were interest, I would put together a landscape version as well. Future versions might include an option to load additional sets of images, controls for use on mobile, etc. The .zip file includes the .html page, a copy of jquery-3.3.1.min.js, the .psd template, and “images” folder with .jpg files. I offer this as is, without warranty. Feel free to use or change to suit your needs. If you have thoughts about how this might be improved, I’d be happy to hear your ideas.

Download here image selection tool