Introduction
Now available, DuraCloud has a easily deployable "app" for viewing images stored within DuraCloud from the convenience of you browser (desktop or mobile browser). The image viewer allows you to organize your images into multiple "collections" within a DuraCloud space. The role based access controls of DuraCloud will also be applied to viewing images within spaces. The image viewer will automatically display thumbnails of a image collection in a grid view. Each image in the thumbnail display will have its name presented with it. When a thumbnail is clicked an enlarged version of the thumbnail will be shown in the foreground with navigation controls for viewing the previous and next image in the collection (swipe navigation for mobile devices). When viewing the large image the viewer provides the ability to zoom the image in and out simply by scrolling and panning around the image simply by moving your mouse.
The image gallery is comprised of only html, javascript, and css files. It is completely browser based and self contained. It uses some of the latest web development technologies including HTML5, hardware accelerated CSS3 transitions and animations, responsive design to recognize the screen resolution being displayed on and adjust the layout of the components accordingly (desktop and mobile friendly using Bootstrap), and jQuery javascript library.
Download
Download the Image Gallery from the Downloads page.
Alternatively, the Image Gallery code is available from GitHub
Installing the Image Gallery
After downloading the image gallery files, simply copy them into a new space within your DuraCloud account. It makes sense to name this space something similar to "image-gallery", but the name you choose is up to you.
That's it! The DuraCloud image gallery is now installed and ready to use. If you copied the files into a space named "image-gallery" simply open up your browser and load the page:
https://myaccount.duracloud.org/durastore/image-gallery/index.html (replace "myaccount" with the subdomain for your DuraCloud account)
Initial Setup
Your first visit to your newly installed image gallery will require that you setup which of your DuraCloud spaces contain image collections that you will want to view through the image gallery (your "Space" dropdown menu will be empty). To setup your image gallery spaces and collections simply click the "Edit" button at the top of the screen next to the "Collection" dropdown menu. You will be presented with a window containing controls for adding/removing spaces to your "Space" dropdown menu. When you select a space from this window you will be shown the image collection names setup for that space in the textarea below the "Space" dropdown menu. First add a space and then simply type the image collection names in that space into the textarea, one collection per line.
This however requires that you already have your images organized in DuraCloud using the below predefined naming structure (the collection and image names can be anything, but you must use "thumbs" prefix for your thumbnails, "previews" prefix for your enlarged images, and if storing your original high resolution images use the "highres" prefix):
- collectionA/thumbs/img1.jpg
- collectionA/thumbs/img2.jpg
- collectionA/previews/img1.jpg
- collectionA/previews/img2.jpg
- collectionA/highres/img1.jpg
- collectionA/highres/img2.jpg
- collectionB/thumbs/img1.jpg
- collectionB/thumbs/img2.jpg
- collectionB/previews/img1.jpg
- collectionB/previews/img2.jpg
- collectionB/highres/img1.jpg
- collectionB/highres/img2.jpg
- collectionC/thumbs/img1.jpg
- collectionC/thumbs/img2.jpg
- collectionC/previews/img1.jpg
- collectionC/previews/img2.jpg
- collectionC/highres/img1.jpg
- collectionC/highres/img2.jpg
So, if the above images were organized into "collectionA", "collectionB", and "collectionC" then your setup window would look something like this:
Using the Image Gallery
Image Gallery FAQ
Q: I like the Image Gallery, but I'd like to make a small change, how can I do that?
A: The Image Gallery functionality is completely managed by the JavaScript and CSS files that you added to your space. Simply update those files, and the UI will change.
Q: I made some cool changes, and would like to contribute them back, can I do that?
A: Absolutely! The best way to do this is to add a pull request with your code changes through the Github project.
