A JavaScript Photo Viewer

October 25, 2017

It had been over a year since I brought up our website, themnmoores.net, and I had still not implemented the pictures section. Late last spring I spent some time looking for a JavaScript framework to implement a photo slideshow/viewer with. I was able to find a fairly lightweight viewer, Responsive Slides http://responsiveslides.com/. With a bit of effort I was able to get it running, but the lack of documentation made it frustrating and it seemed that I would have to spend a lot of time experimenting to get the very simple functionality I wanted. My past experience using HTML 5 canvas elements for image display made me wonder just how hard it would be to implement a simple photo viewer. As it turns out, not very hard at all. This blog entry describes how I implemented a slide viewer in pure Javascript. The resulting viewer is not fancy, it only allows you to go forward and backward through a collection of image files displaying a caption for each image with a title at the top of the viewer.

The first issue to solve was how to input a list of image files, their captions, and viewer options to the JavaScript code. It seemed that a JSON file would be the logical choice and I started to try and figure out how to read such a file into my JavaScript code. After fussing around with this for a few hours I came up with the idea of putting the JSON I wanted into a global string that can be accessed by the photo viewer code. To do this I create a JavaScript file with only the JSON string in it that could be included by the HTML for the web page. A small sample of such a file is:

var photoFileListJSONString = '{' +
'"displayWindow": {"width": 800,"height": 600,"title": "Sawtooths 2017"},' +
'"images": [' +
'{"src": "sawtooths2017.png","caption": ""},' +
'{"src": "1.jpg","caption": "Day 1: Iron Creek trailhead to Lake 8271 south of Sawtooth Lake."},' +
'{"src": "2.jpg","caption": "Day 1: The view as we approached Stanley from Boise on highway 21"},' +
'{"src": "3.jpg","caption": "Day 1: Into the wilderness."}' +
']}';

This file is “sourced” in the HTML before the photo viewer file (not sure it needs to be before but I did it that way).

<head>

The photoslideshow.js file is where the work is done for photo viewing. To initialize things the function initializePhotoSlideShow needs to be called with the ID’s of various HTML elements needed for the photo viewer functionality.

function initializePhotoSlideShow(canvasID, titleID, captionID, leftArrowID, rightArrowID)
{
photoSlideShow = JSON.parse(photoFileListJSONString);

theCanvas = document.getElementById(canvasID);
theCanvas.height=Number(photoSlideShow.displayWindow.height);
theCanvas.width=Number(photoSlideShow.displayWindow.width);
theCanvas.style.borderWidth="3px";
theCanvas.style.borderStyle = "solid";
theCanvas.style.borderColor="#000000";

caption = document.getElementById(captionID);
caption.style.width = theCanvas.width.toString() + "px";
leftArrow = document.getElementById(leftArrowID);
rightArrow = document.getElementById(rightArrowID);

theTitle = document.getElementById(titleID);
theTitle.innerHTML = '<b>' + photoSlideShow.displayWindow.title + '</b>';

currentImageNumberInSlideShow = 0;

setCurrentImage(photoSlideShow.images[currentImageNumberInSlideShow].src,

photoSlideShow.images[currentImageNumberInSlideShow].caption);
}

First the JSON information is parsed into the global variable photoSlideShow. The HTML5 canvas element is then configured based on the slide show information just parsed as is the title string. Finally some setup of the caption text area, left arrow and right arrow elements is done. Here is some sample HTML for creating the elements and calling the initializePhotoSlideShow function.

<div style="text-align:center;">
<div style="margin-left:auto;margin-right:auto;margin-top:40px">
<p id="themnmooresTitle" style="font-family:Arial, serif;font-size: 20px;margin-left:auto;margin-right:auto;text-align: center;margin-bottom:0">title</p>
<img id="themnmooresLeft" height="80px" src="../../pictures/leftArrow512.png" style="margin-bottom:260px" onclick="leftArrowPressed()">
<canvas id="themnmooresPhotoCanvas" ></canvas>
<img id="themnmooresRight" height="80px" src="../../pictures/rightArrow512.png" style="margin-bottom:260px" onclick="rightArrowPressed()">
<p id="themnmooresCaption" style=";margin-top:10px;font-family:Arial, serif;font-size: 18px;margin-left:auto;margin-right:auto;text-align: left;"></p>
<script>
initializePhotoSlideShow("themnmooresPhotoCanvas", "themnmooresTitle", "themnmooresCaption", "themnmooresLeft", "themnmooresRight");
</script>
</div>
</div>

As you can see the HTML required is very minimal. Finally the current image number is set to 0 and the setCurrentImage function is called to start the display process for image 0.

function setCurrentImage(imageFileName, captionText)
{
caption.innerHTML = captionText;
currentImage = new Image();
currentImage.onload = displayCurrentImage;
currentImage.src = imageFileName;
}

The setCurrentImage function simply creates a new Image object, sets the image file name to be read, and the onload callback is set to be the displayCurrentImage function. It then returns to allow the asynchronous process of loading image file data to start.

The displayCurrentImage function does the work of rendering the image data to the canvas element and updating the caption text.

We get a drawing context for the canvas element and clear the canvas so we can render the new image data. Based on the canvas size and image data dimensions the display size of the image data in the canvas is determined as to properly keep the image data aspect ratio. The image data is also properly centered horizontally and vertically based on the scaling factor. The drawing context drawImage function is used to render the photo.

When the left arrow element is pressed, the leftArrowPressed function is called.

I decided to implement a wrap around viewer that goes from the first photo to the last photo when the left arrow is pressed so the current image number is modified to reflect the proper position in the photo list and the setCurrentImage function is called.

Similarly when the right arrow element is pressed, the rightArrowPressed function is called.

As with the left arrow the right arrow wraps from the last image to the first image so we set up the proper index in the photo list and call the setCurrentImage function.

As you can see, it turned out to be fairly easy to implement a very basic photo viewer in stock JavaScript. In the future I might consider some performance enhancements to pre fetch and cache image data to make the viewing experience faster. Also, making the viewer a class/object might make sense. One thing that is bothersome to me is that the JavaScript does not seem to be releasing the Image object memory as the memory usage of the web page continues to increase as you go through the photos.

I put about 16 hours of work into implementing this, including a utility to resize image files, see resizePhotoZip. I will write up a blog entry about that code next.

Here is the first photo album, Sawtooths2017

keywords: JavaScript, HTML 5, Canvas, Photo Viewer, Photo Gallery, JSON

description: Implementing a simple photo viewer in JavaScript using HTML 5 and JSON