Thumbnail gallery image switching

Question

function init(){

   th=document.getElementById('divId').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
   swapImage(this.src);

   }
  }
 }

function swapImage(url){

   str=url.lastIndexOf(".");
   str1=url.substring(str-1);
   str2=url.substring(str);

   url=url.replace(str1,str2);

   document.getElementById('mainImage').src=url;

 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

I'm mainly new to JS here, my main issue is specifically the JS section please help, I've been going at this for 4 days now. What the code should do is display a top image, and 5 thumbnails at the bottom. When clicked the thumbnails should display on to by switching with the current image.

Here is the HTML section of the code:

<html>
<head>
<link href='gallery.css' type="text/css" rel ='stylesheet'/>
<title>Gallery</title>  
</head>
<body>
    <img id="mainImage" src="Images/alphamon.jpg"/>
    <br />
    <div align='center' id="divId" >
        <img class="imgStyle" src="Images/alphamon.jpg" />
        <img class="imgStyle" src="Images/gallantmon.jpg" />
        <img class="imgStyle" src="Images/omnimon.jpg" />
        <img class="imgStyle" src="Images/omnimon_2.jpg" />
        <img class="imgStyle" src="Images/royal_knights.jpg" />
    </div>
<script type='text/javascript' src='gallery.js'></script>
</body>
</html>

Answer 1

Everything is much easier.

function swapImage(url){
/* no need this code
   str=url.lastIndexOf(".");
   str1=url.substring(str-1);
   str2=url.substring(str);

   url=url.replace(str1,str2);
*/
   document.getElementById('mainImage').src=url;

 }

Thumbnail gallery image switching

Question

1 answers

solution1
0 2017-11-06 01:36:48

Thumbnail gallery image switching

Question

1 answers

solution1 0 2017-11-06 01:36:48

solution1
0 2017-11-06 01:36:48