Photo Viewer using JavaScript

HTML has a separate element for image display. This will display the image in a specific region of the page. If we want to add multiple pictures and view it one at a time, then HTML does not have any such tag. We need to build our own design for that. This is a JavaScript code which will facilitate a new design to display images in a web page.

We have navigation buttons namely back and next to view the various pictures and an exit button to exit this window and view the page.Let us first see how we need to use this java script functionality in the web browser.

<div id="imageViewer"></div>
<a href="#" onclick="showImage('Gallery/Mangalore',101)">Mangalore</a>
<br/>
<a href="#" onclick="showImage('Gallery/Sceneries',101)">Sceneries</a>

First step is that we need to create is a div element. This element must be named as imageViewer. Note that no other name shall be used here, as our script can identify only this name. To specify various links to be used, we can add anchor elements which would invoke the showImage script functions. Two parameters, namely the image folder path and the first image name must be passed. Note that the name of the image can be only numbers between 101 and 999. And the extension of the file must be JPG in caps. For example 104.JPG.

Once this is done, we are done for making our viewer. The photo viewer code looks as below.

<script type="text/javascript">
imageName=0;
folderName='empty';
arrows=true;

function showImage(folder,file) {
	imageName=file;
	folderName=folder;
	displayDivision();
	displayImage();
}

function changeImageNext() {
	imageName++;
	displayImage();
}

function changeImageBack() {
	imageName--;
	displayImage();
}

function displayDivision() {

	if(arrows) {
		arrows=false;

		//create a outer image division and set its style properties
		outerImageDiv = document.createElement('DIV');
		outerImageDiv.id='outerImageDiv';
		outerImageDiv.style.position='fixed';
		outerImageDiv.style.width='100%';
		outerImageDiv.style.height='100%';
		document.getElementById("imageViewer").appendChild(outerImageDiv);

		//create a table element and set its style properties
		table = document.createElement('table'); //table tab
		table.id='imageTable';
		table.align='center';
		table.frame='box';
		table.style.backgroundColor='#F0F0F0';

		//create a table body element
		tbody=document.createElement('tbody'); //tbody  tbo

		//create the first row of the table.
		firstRow=document.createElement('tr');  //row

		//create the first cell of first row and align it
		firstCellRow1=document.createElement('td');  // cell
		firstCellRow1.align='left';
		//populate the elements of the firstCellRow1
		backSpan = document.createElement("span");
		backSpan.id='backSpan';
		backSpan.style.border='1px solid #C8C8C8';
		backSpan.onclick=function() {changeImageBack();};
		backSpan.appendChild(document.createTextNode(' BACK '));
		firstCellRow1.appendChild(backSpan);
		firstRow.appendChild(firstCellRow1);

		//create the second cell of first row and align it
		secondCellRow1=document.createElement('td'); //cell
		secondCellRow1.align='center';
		//populate the elements of the secondCellRow1
		exitSpan = document.createElement("span");
		exitSpan.id='exitSpan';
		exitSpan.style.border='1px solid #C8C8C8';
		exitSpan.onclick=function() {removeDivision();};
		exitSpan.appendChild(document.createTextNode(' EXIT '));
		secondCellRow1.appendChild(exitSpan);
		firstRow.appendChild(secondCellRow1);

		//create the third cell of first row and align it
		thirdCellRow1=document.createElement('td');
		thirdCellRow1.align='right';
		//populate the elements of the thirdCellRow1
		nextSpan = document.createElement("span");
		nextSpan.id='nextSpan';
		nextSpan.style.border='1px solid #C8C8C8';
		nextSpan.onclick=function() {changeImageNext();};
		nextSpan.appendChild(document.createTextNode(' NEXT '));
		thirdCellRow1.appendChild(nextSpan);
		firstRow.appendChild(thirdCellRow1);

		//append the first row in the table body
		tbody.appendChild(firstRow);

		//create the second row of the table.
		secondRow=document.createElement('tr');

		//create the first cell of first row, align it and span
		firstCellRow2=document.createElement('td');
		firstCellRow2.align="center";
		firstCellRow2.colSpan='3';

		//populate the elements of the first cell in row 2

		//create and set style for the image division
		imageDiv = document.createElement('DIV');
		imageDiv.id='imageDiv';
		imageDiv.style.backgroundColor='#F0F0F0';
		imageDiv.style.width ='700px';
		imageDiv.style.height ='500px';

		//create and append an image element to the image division
		image = document.createElement("IMG");
		image.id='myImages';
		imageDiv.appendChild(image);

		firstCellRow2.appendChild(imageDiv);
		secondRow.appendChild(firstCellRow2);

		//append the second row in the table body
		tbody.appendChild(secondRow);

		//append the table body in the table
		table.appendChild(tbody);

		//append the table to the oter image division
		document.getElementById('outerImageDiv').appendChild(document.createElement('br'));
		document.getElementById('outerImageDiv').appendChild(document.createElement('br'));
		document.getElementById('outerImageDiv').appendChild(table);
	}

	document.getElementById('outerImageDiv').style.visibility='visible';
}

function displayImage() {
	//create a new image element and set the style for it
	newImage = document.createElement("IMG");
	newImage.src =folderName+"/"+imageName+".JPG";
	newImage.id='myImages';
	newImage.style.width = '700px';
	newImage.style.height ='500px';
	newImage.onerror=function() {noImagesToDisplay();};

	//replace the old image with the new image.
	oldImage = document.getElementById('myImages');
	document.getElementById('imageDiv').replaceChild(newImage, oldImage);
}

function removeDivision() {
	document.getElementById('outerImageDiv').style.visibility='hidden';
	alert('Thanks for viewing');
}

function noImagesToDisplay() {
	document.getElementById('outerImageDiv').style.visibility='hidden';
	alert('no images to display');
}
</script>

Some of the operations that this script supports are next navigation, which takes to the next picture in the folder. back navigation which takes to the previous photo in the folder. The exit will exit from the viewer into the html page. On exit an alert message specifying “thanks for viewing” shall be shown to the user. If there are no more pictures, then “no images to display” alert message shall be displayed to the user.

We are all set. Now try to open the web page in your browser and click on the links. You shall get an amazing new window open in which your image will be displayed. Moreover we also have some navigation features which make our photo viewing experience great.