13.03.2014 19:35:12 Как в галерее на javascript сделать просмотр фотографий начиная с той на которую кликнул пользовател Сообщение #1
tobi
Новичок
Дата регистрации:
13.03.2014 19:31:11
Сообщений: 2
Делаю галерею на javascript там куча маленьких фотографий и когда тыкаешь на одну из них появляется блок в котором можно на стрелочки листать картинки. Но открывается в блоке первая картинка, а не та на которую кликнул, что делать? Вот скрипт:
<table border="0px;" id="table">
<tr height="200px">
<td width="260px">
<img src="photos/photo_1.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td style="padding: 0;">
<td width="260px">
<img src="photos/photo_2.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_3.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_4.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_5.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
</tr>
<tr height="200px">
<td width="260px">
<img src="photos/photo_6.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_7.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_8.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_9.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_10.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
</tr>
<tr height="200px">
<td width="260px">
<img src="photos/photo_11.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_12.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_13.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_14.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
<td width="260px">
<img src="photos/photo_15.jpg" onClick="document.getElementById('image').style.display='block';" width="260px" height="200px"/>
</td>
</tr>
</table>
<div onMouseOver="btn_show()" onMouseOut="btn_noshow()" id="image">
<script type="text/javascript">
var imageArray = [
"photos/photo_1.jpg",
"photos/photo_2.jpg",
"photos/photo_3.jpg",
"photos/photo_4.jpg",
"photos/photo_5.jpg",
"photos/photo_6.jpg",
"photos/photo_7.jpg",
"photos/photo_8.jpg",
"photos/photo_9.jpg",
"photos/photo_10.jpg",
"photos/photo_11.jpg",
"photos/photo_12.jpg",
"photos/photo_13.jpg",
"photos/photo_14.jpg",
"photos/photo_15.jpg",
];
window.number = '0';
var imageCount = imageArray.length;
function image(num){
if(num == 1){
if(number < imageCount - 1){
number++;
document.getElementById('images').src = imageArray[number];
}
}
else{
if(number > 0){
number--;
document.getElementById('images').src = imageArray[number];
}
}
}
function btn_show(){
if(number != 0) document.getElementById('left').style.display='block';
if(number != imageCount - 1) document.getElementById('right').style.display='block';
}
function btn_noshow(){
document.getElementById('left').style.display='none';
document.getElementById('right').style.display='none';
}
document.write('<img id="images" src="' + imageArray[0] + '">');
</script>
<div id="left" onclick="image(0)" class="left_right"><img src="images/left.png"></div>
<div id="right" onclick="image(1)" class="left_right"><img src="images/right.png"></div>
<div id="close" onclick="document.getElementById('image').style.display='none';" class="left_right"><img src="images/close.png"></div>
</div>
</body>
