Introduction
Now available, DuraCloud has a The Image Gallery is an easily deployable "app" for viewing images stored within DuraCloud from the convenience of you your browser (desktop or mobile browser). The image viewer gallery 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 and will then 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 role-based access controls of DuraCloud are applied to viewing images within spaces, to ensure images are only viewed by authorized users. Spaces which are set to public access will be available for viewing through the image gallery without the need to provide credentials.
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.
...
| Info |
|---|
...
Please note that the Image Gallery is still considered to be in Beta. Please help us to improve this feature by providing feedback and reporting any issues that you may come across. Thanks for helping to make DuraCloud better! |
Download
The Image from the Downloads page.Alternatively, the Image Gallery code is available from GitHub
...
- 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
*Note: The images in a collection can have any name, but each image stored at different resolutions (thumbs, previews, and highres) must have the same name. Also, the two required resolutions are "thumbs" and "previews". It is optional if you want to store the original full resolution "highres" version of your images.
So, if the above images were organized into "collectionA", "collectionB", and "collectionC" within a DuraCloud space named "space1" then your setup window would look something like this:
...
The thumbnails are displayed in a grid with the name of each image underneath its thumbnail. Clicking a thumbnail will load a larger version of the image in the foreground.
When viewing a blownup an enlarged thumbnail:
- The blownup enlarged image can be zoomed in and out by scrolling on it (mousewheel or trackpad).
- A zoomed in image can be panned around by moving the mouse around.
- Navigating to the next/previous image can be done by clicking the left or right arrows on either side of the screen or by pressing the left or right arrow keys on the keyboard.
- You can exit from viewing the blownup enlarged image display by clicking the 'X' at the top-right corner of the screen or by pressing the "Esc" or "x" key on the keyboard.
- Clicking the content ID link below the blown up image loads the high-res jpg in a new browser tab/window.
On a mobile device just swipe left/right to navigate to the previous/next image when viewing the blownup enlarged images.
Image Gallery FAQ
Q: I like the Image Gallery, but I'd like to make a small change, how can I do that?
...