Javascript/html: Trying to make a multiple gallery with multiple scroll

228

26 ноября 2016, 19:48

Good day, im having trouble with a multiple gallery. I dont know if its problem with id or maybe its not possible at all. So i have DIV wich has a gallery in it. It scrolls just fine. But when im having more then one buttons for scrolling change images only in one gallery and others dont change. What im trying to achive is having all galleries idependent. For about 2 weeks i cant figure out how to make scroll buttons be responsible for their own gallery. For DIV i understand there is ID. But i cant find how to make buttons scroll their own images. Thanks you for any information.

page.php

<div class="item_box"> 
<div class="item_image" id="i1"> 
			 
<script type="text/javascript" src="../js/item_1.js"></script> 
<script type="text/javascript" src="../js/funct.js"></script> 
 
<center><p id="ih_1"></p></center> 
<center><span id="i1" onclick="image(0)">Back</span>  
<span id="i1"  onclick="image(1)">Next</span></center> 
 
</div><!--class="item_image"--> 
</div><!--class="item_box"--> 
 
 
<div class="item_box"> 
<div class="item_image" id="i2"> 
			 
<script type="text/javascript" src="../js/item_2.js"></script> 
<script type="text/javascript" src="../js/funct.js"></script> 
 
<center><p id="ih_2"></p></center> 
<center><span id="i2" onclick="image(0)">Back</span>  
<span id="i2"  onclick="image(1)">Next</span></center> 
 
</div><!--class="item_image"--> 
</div><!--class="item_box"-->

function.js

this.number = number; 
var imageCount = imageArray.length; 
	function image(num){	 
		if(num == 1){       
            if(number < imageCount - 1){ 
              
        		number++; 
 				document.getElementById(id).style.backgroundImage =  imageArray[number]; 
            } 
        }                       
	   	else{   
        	if(number > 0){ 
				number--; 
				document.getElementById(id).style.backgroundImage= imageArray[number]; 
            } 
        } 
    } 
      
document.getElementById(id).style.backgroundImage =  imageArray[0];

item_1.js

id = 'i1'; 
number = 0; 
var imageArray = [    	        
        "url(../images/../1s.jpg",       
       	"url(../images/../2s.jpg)",       
        "url(../images/../3s.jpg)",                 
    ];

item_2.js

id = 'i2'; 
    number = 0; 
    var imageArray = [    	        
            "url(../images/../1s.jpg",       
           	"url(../images/../2s.jpg)",       
            "url(../images/../3s.jpg)",                 
        ];