JavaScript - Onclick Mutliple Pages Without Leaving The Current Page

<script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];

var clientData = [
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2 
     "This is a place holder for the third set of text.",
     "This is a place holder for the fourth set of text.",
  "This is a place holder for the fifth set of text.",
 "This is a place holder for the sixth set of text.",
 "This is a place holder for the first seventh of text.",
];


var currentMain = 0;
var currentMainT = 0;

function Prev() 
{
    return ShowMain(currentMain-1);
				return ShowMainT(currentMainT-1);
}
function Next() 
{
    return ShowMain(currentMain+1);
			 return ShowMainT(currentMainT+1);
}


function ShowMain(which)
{
    currentMain = which;
				currentMainT = which;
    if ( currentMain < 0 ) currentMain = 0;
				if ( currentMainT < 0 ) currentMainT = 0;
    	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
					if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1; 
    					document.getElementById('mainImg').src = imgList[currentMain];
					    document.getElementById('mainText').innerHTML = clientData[currentMainT];
   						 var PD = document.getElementById('Pg');
										var PD2 = document.getElementById('Pg2');
   		 if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
				  if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
						document.getElementById("mainText").style.display = 'inline'
						document.getElementById("gallery").style.color="#ff0000";
						
    return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>
<script language="JavaScript">



function preloader() 

{


     // counter
     var i = 0;


     // create object
     imageObj = new Image();


     // set image list
     images = new Array();
     images[0]="../Assets/Images/pt_entry+hall2.jpg"
     images[1]="../Assets/Images/pt_stair+hall.jpg"
     images[2]="../Assets/Images_Revised/40_kitchen.jpg"
     images[3]="../Assets/Images_Revised/40_stair.jpg"
				 images[4]="../Assets/Images_Revised/C_front2.jpg"
				 images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
     images[7]="../Assets/Images_Revised/C_side.jpg"
     images[8]="../Assets/Images_Revised/Y_combo.jpg"
     images[9]="../Assets/Images_Revised/Y_window.jpg"
				 images[10]="../Assets/Images_Revised/V_stair.jpgg"


     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }



} 



</script>

<div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p>
      </td>
    <td id="cell5 images">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a
><a href="#" onclick="return Prev();" class="gallery"><</a
><a href="#" class="gallery" onclick="return Next();">></a></div>

 $(".nav").click(function(){
			$(".nav.a").toggle("fast");
			$(this).toggleClass("active");
					});

.nav {
text-align: center;
overflow: hidden;
margin: .3em ;
width: 500px;
position: fixed; 
padding: 0px 0px 0 830px;
}

.nav a {
position: relative;
float: left;
padding: 2.2em 0 3.1em;
width: 20%;
text-decoration: none;
color: #484848;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }

.nav a:hover {
color: #c6342e; }

.effect {
position: absolute;
left: 120%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }

.nav a:nth-child(1):hover ~ .effect {
left: 66.3%; }
.nav a:nth-child(2):hover ~ .effect {
left: 73.8%; }
.nav a:nth-child(3):hover ~ .effect {
left: 81.2%; }
.nav a:nth-child(4):hover ~ .effect {
left: 89%; }
.nav a:nth-child(5):hover ~ .effect {
left: 96.4%; }
	  


/* ----- dot effect -----*/

.ph-dot-nav:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #484848;
  bottom: 40px; 
  }

  .ph-dot-nav a:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  bottom: 38px;
  left: 50%;
  margin-left: 0px; 
  background: #484848;
  border-radius: 100%; }

  .ph-dot-nav .effect {
  width: 10px;
  height: 10px;
  bottom: 36px; 
  margin-left: -5px;
  background: #fff;
  border-radius: 100%; 
  z-index:999;}