Есть некоторое кол-во изображений, приблизительно 400 на 600 px, но размер точный их заранее не известен. Надо в одном div разместить маленькие превьюшки, при клике на которые , в другом div будет выводится изображение картинки на которой кликнули в натуральную величину.
function getImages()
{
var I = [];
for ( var i = 0; i < 10; i++ )
{
var myImage = new Image();
myImage.src = "../img/pict" + (i+1) + ".jpg";
myImage.ind = i+1;
I.push(myImage);
}
return I;
}
function onPhotoClick()
{
var photo = document.getElementById("photo");
photo.src = "../img/pict" + this.ind + ".jpg";
}
window.onload = function()
{
var phContainer = document.getElementById('photoContainer');
var Images = getImages();
for (var i =0; i < 10; i++)
{
var newImg = document.createElement('newImg')
newImg = Images[i];
newImg.width = Images[i].width / 5;
newImg.height = Images[i].height / 5;
phContainer.appendChild(newImg);
newImg.onclick = onPhotoClick;
}
}
<body>
<h1 align = "center"> Фотоальбом </h1>
<div align = "center" id = "photoContainer">
</div><br/>
<div align = "center">
<img src = "../img/pict1.jpg" id = "photo">
</div>
</body>
В Firefox и Chrome при первом запуске выводится маленькая картинка фотографии с номером один ну и соответственно в реальном размере в другом div. И на этом все заканчивается. Если страницу перезагрузить , то все начинает работать. В IE наоборот , с начала работает, но криво, превьюшки не все создает. А если перезагрузить страницу , то выводится маленькая картинка первой фотки и ее большая копия и все дальше никаких реакций. Помогите разобраться. Javascript еще только осваиваю .