can anyone fix this code with the message shows in the large box when i click the small picture ?
<!DOCTYPE html>
<html lang="en" dir="ltr" id="top">
<head>
<meta charset="utf-8">
<title> zoo Gallery </title>
<link rel="stylesheet" href="zoo.css">
<header id="top">
<h1> Z O O </h1>
<h3 id="ZOO">this is zoo</h3>
</header>
<nav>
<header>
<ul style="list-style-type:none">
<li><a href="#elephantSection">elephant</a></li>
<li><a href="#bearSection">bear</a></li>
<li><a href="#lionSection">lion</a></li>
<li><a href="#monkeySection">monkey</a></li>
<li><a href="#pandaSection">panda</a></li>
</ul>
</header>
</nav>
<article class="article-body">
<h6> </h6>
<p>Use <b>UP Arrow</b> or <b>Down Arrows keys or Just Click on small image to view in presentatio Box</b> </p>
<section id="galleryturn" class=" mainDiv"> <!-- Opening section.mainDiv tag-->
<h4> look at the zoo </h4>
<section class=" leftdiv"> <!-- Opening section.leftdiv tag-->
<ul id="Ulist">
<li>
<img src="1.jpg" onclick="show(this);" class="thumbnail" id="1" style="border:1px solid orange;"/>
<!-- <span class="img1 imgtext">IMAGE 1 this is image 1 need show the -->
</li>
<li>
<img src="2.jpg" onclick="show(this);" class="thumbnail" id="2"/>
</li>
<li>
<img src="3.jpg" onclick="show(this);" class="thumbnail" id="3"/>
</li>
<li>
<img src="4.jpg" onclick="show(this);" class="thumbnail" id="4"/>
</li>
<li>
<img src="5.jpg" onclick="show(this);" class="thumbnail" id="5"/>
</li>
<li>
<img src="2.jpg" onclick="show(this);" class="thumbnail" id="6"/>
</li>
</ul>
</section> <!-- Closing section.leftdiv tag-->
</section> <!-- Closing section.leftdiv tag-->
<section class="presentationBox"> <!-- Opening section.presentationBox tag-->
<img src="img/1.jpg" id="imgBox">
</section> <!-- Closing section#presentationBox tag -->
</section> <!-- Closing section.mainDiv tag -->
</section> <!-- Closing section#container tag -->
</body> <!-- Closing body tag -->
</html> <!-- Closing html tag -->
<articleclass="article-body">
<h6> </h6>
<!--1 photo-->
<sectionid="elephantSection">
<h4style="text-align:left">
<imgid="elephant"class="photo-left"src="x.jpg"alt="Image not found"width="550"><br><br>elephant
</h4>
<divid="myModal"class="modal">
<spanclass="close">×</span>
<imgclass="modal-content"id="img01">
<divid="caption"></div>
</div>
<p>this is a elephant </p>
<brstyle="clear: both">
<ahref="#up"title="Move up"><imgclass="arrow"src="cn.jpg"alt="Image not found"width="40"></a>
<ahref="#bearSection"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"
width="40"></a>
<ahref="#top"title="Move to top"><imgclass="arrow"src="tp.jpg"alt="Image not found"width="40"></a>
</section>
<!--2 photo-->
<sectionid="bearSection">
<h4style="text-align:right">
<imgid="bear"class="photo-right"src="xl.png"alt="Image not found"width="550">
<br>bear
</h4>
<pstyle="text-align:right">
<em> this is bear </em>
<brstyle="clear: both">
<ahref="#elephantSection"title="up"><imgclass="arrow"src="cn.jpg"alt="Image not found"
width="40"></a>
<ahref="#lionSection"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"
width="40"></a>
<ahref="#top"title="Move to top"><imgclass="arrow"src="tp.jpg"alt="Image not found"width="40"></a>
</section>
<!--3 photo-->
<sectionid="lionSection">
<h4style="text-align:left">
<imgid="lion"class="photo-left"src="xs.png"alt="Image not found"width="550">
<br>lion
</h4>
<pstyle="text-align:left">
<em> this is lion </em>
<brstyle="clear: both">
<ahref="#bearSection"title="up"><imgclass="arrow"src="cn.jpg"alt="Image not found"
width="40"></a>
<ahref="#pandaSection"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"
width="40"></a>
<ahref="#top"title="Move to top"><imgclass="arrow"src="tp.jpg"alt="Image not found"width="40"></a>
</section>
<!-- 4 photo-->
<sectionid="pandaSection">
<h4style="text-align:right">
<imgid="panda"class="photo-right"src="xm.jpg"alt="Image not found"width="550">
<br><br>panda
</h4>
<pstyle="text-align:right">
<em>this is a panda </em>
<brstyle="clear: both">
<ahref="#lionSection"title="up"><imgclass="arrow"src="cn.jpg"alt="Image not found"
width="40"></a>
<ahref="#monkeySection"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"
width="40"></a>
<ahref="#top"title="Move to top"><imgclass="arrow"src="tp.jpg"alt="Image not found"width="40"></a>
</section>
<!--5 photo-->
<sectionid="monkeySection">
<h4style="text-align:left">
<imgid="monkey"class="photo-left"src="xx.jpg"alt="Image not found"width="550">
<br><br>monkey
</h4>
<em>this is a monkey ，its an animal live on the tree </em>
<brstyle="clear: both">
<ahref="#pandaSection"title="up"><imgclass="arrow"src="cn.jpg"alt="Image not found"
width="40"></a>
<ahref="#bottom"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"width="40"></a>
<ahref="#top"title="Move to top"><imgclass="arrow"src="tp.jpg"alt="Image not found"width="40"></a>
</section>
Phone: (111)-123-4567</p>
<ahref="#top"title="Move to top"><imgclass="arrow"src="tp.jpg"alt="Image not found"width="40"></a>
</section>
</article>
</body>
</html>
