Component Library 1 (Gallery)

Gallery

Just a simple gallery viewer with zoom and drag

The gallery stores the server path to the images in a constant and the filenames of each image in an array. Simply alter these in the code as shown in the instructions (README.md).

The gallery displays the images on a HTML canvas. The controls are displayed during mouse or pointer (touch) activity over the canvas and will fade out after about 3 seconds of inactivity. Once mouse / pointer movement is detected, the controls will re-appear. This feature allows for unobstructed view of the images.

Towards the top of the screen, the current image number and the total number of images within the gallery are displayed (eg: Image 1 of 3)

The Left and right arrows displayed to the left and the right of the popup window respectively allow navigation between multiple images.

Towards the bottom of the popup, a control for magnification is provided too. Additionally, zoom will respond to a mouse wheel.

The image can be dragged within the popup window using the mouse (or finger with touch).

Whilst an image is loading, so the user does not get confused, a 'spinner' is displayed. you will see in the source code that I utilised someone else's spinner component for this. Find it at Loading.io. It's by PlotDB Ltd and is licensed under CC0 creative commons and can therefore be used without attribution. Check the page out, there's much more useful stuff on there and they deserve a visit!

I have not extensively tested this gallery component, in particular the 'touch' features. Be sure to let me know if you find any bugs or have suggestions.

The code can be found in my GitHub repository HERE

Implementation

Copy the gallery folder into your project, you cam leave out the README.md and galleryss.png files if you like.

Add the CSS and JavaScript sources in the <head> like so:


    <link rel="stylesheet" href="popup/popup.css">
    <link rel="stylesheet" href="menu/menu.css">
    <link rel="stylesheet" href="gallery/gallery.css">
    <script src="popup/popup.js" defer></script>
    <script src="gallery/gallery.js" defer></script>

Now add the following code into the <body> of the web page:


    <div class="popUp" id="popUp">
        <div class="popUpTitleContainer"></div>
        <div id="galleryCanvasContainer"></div>
        <span id="spinnerContainer"><?php include 'gallery/spinner.php' ?></span> 
        <img id="closeBtn" src="popup/closebtn.png"> 
    </div>

Edit *gallery.js* to add the correct folder and add your source images into the array here:


    const imageRoot = "./images/"; //place the subdirectory your images are in here
    const imageList = ["image1.png", "image2.png", "image3.png"]; //place your image names in this array

To trigger the gallery, you can add a button like this:


    <button type="button" onclick="activatePopup('Gallery Title Here', 'override')">GALLERY</button>

You can choose whatever title you like here. The override string tells the popup not to try and load an external html file, be sure to add it as above!

Note the comments to help guide you.

What next?

I am thinking about some animated transitions between image changes. A feature to load a lower resolution image initially and / or a 'loading image' banner when using large image file sizes seems like a good idea too. I think there is room for improvement on the 'error handling' aspect of the image loading.

Component Library 1

By Mark Foyster

Gallery

Implementation

What next?