Проблема с выводом изображений из массива
Есть некоторое кол-во изображений, приблизительно 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 еще только осваиваю . |
bakmaks,
странная конструкция ... Цитата:
может так попробовать
function getImages()
{
var I = [];
for ( var i = 0; i < 10; i++ )
{
var myImage = new Image();
myImage.src = "../img/pict" + (i+1) + ".jpg";
I.push(myImage);
}
return I;
}
function onPhotoClick()
{
var photo = document.getElementById("photo");
photo.src = this.src;
}
window.onload = function()
{
var phContainer = document.getElementById('photoContainer');
var Images = getImages();
for (var i =0; i < 10; i++)
{
var newImg = new image()
newImg.src = Images[i].src;
newImg.width = Images[i].width / 5;
newImg.height = Images[i].height / 5;
phContainer.appendChild(newImg);
newImg.onclick = onPhotoClick;
}
}
|
Моя ошибка. Менял имена переменных, что бы удобнее было код читать, и случайно заменил и название элемента. Должно было быть так
var newImg = document.createElement('img')
|
Но результат от этого не изменился.
|
Цитата:
|
Проблема обнаружилась на стадии создания массива изображений I[]. Вставил console.log
function getImages()
{
var I = [];
for ( var i = 0; i < 10; i++ )
{
var myImage = new Image();
myImage.src = "../img/pict" + (i+1) + ".jpg";
console.log('myImage['+(i+1)+'].width =' + myImage.width);
myImage.ind = i+1;
I.push(myImage);
}
return I;
}
вот что пишет myImage[1].width =426 myImage[2].width =0 myImage[3].width =0 myImage[4].width =0 и т. д. вплоть до десятого элемента. После перезагрузки страницы в браузере в ручную, выдает все что положено. myImage[1].width =426 myImage[2].width =425 myImage[3].width =425 myImage[4].width =432 myImage[5].width =513 и т. д. Все начинает работать. Это в Лисе и в Хроме и после последующих перезагрузок тоже все работает. В IE всё происходит с точностью до наоборот. При первой загрузке выдается массив с правильными значениями (и то не всегда все значения не нулевые) и превьюшки с ненулевыми значениями видны и при клике по ним появляется большая картинка, а при перезагрузке первое значение нормальное , остальные по нулям. Ну и соответственно одна превьюшка. Остальных не видно. После последующих перезагрузок ничего не меняется. |
bakmaks,
пока картинка незагрузилась откуда взять ширину ? |
Первая картинка как-то загружается и у нее появляется и ширина и высота. Почему у последующих нет? И почему в IE происходит все наоборот. Если в функции windows.onload() убрать
newImg.width = Images[i].width / 5; newImg.height = Images[i].height / 5; то все начинает работать во всех браузерах. Только вместо превью, картинки соответственно появляются в полный размер.
window.onload = function()
{
var phContainer = document.getElementById('photoContainer');
var Images = getImages();
for (var i =0; i < 10; i++)
{
var newImg = document.createElement('img')
newImg = Images[i];
//newImg.width = Images[i].width / 5;
//newImg.height = Images[i].height / 5;
phContainer.appendChild(newImg);
newImg.onclick = onPhotoClick;
}
}
А вот это так и не меняется. myImage[1].width =426 myImage[2].width =0 myImage[3].width =0 myImage[4].width =0 и т. д. вплоть до десятого элемента. После перезагрузки страницы в браузере в ручную, выдает все что положено. myImage[1].width =426 myImage[2].width =425 myImage[3].width =425 myImage[4].width =432 myImage[5].width =513 |
bakmaks,
выкиньте строки 7, 8 - сделайте как я вам показал -- а строки 9, 10 поставьте в функцию в onload превью. попробуйте написать такой код. |
bakmaks,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script>
function getImages()
{
var I = [];
for ( var i = 0; i < 5; i++ )
{
var myImage = new Image();
myImage.src = "http://ru.lookatcode.com/show/9648057958996398/img" + (i+1) + "-lg.jpg";
I.push(myImage);
}
return I;
}
function onPhotoClick()
{
var photo = document.getElementById("photo");
photo.src = this.src;
}
window.onload = function()
{
var phContainer = document.getElementById('photoContainer');
var Images = getImages();
for (var i =0; i < 5; i++)
{
var newImg = new Image()
newImg.onload = function(){
this.width = this.width / 5;
this.height = 50;
}
newImg.src = Images[i].src;
newImg.onclick = onPhotoClick;
phContainer.appendChild(newImg);
}
}
</script>
</head>
<body>
<div id="photoContainer"></div>
<img id="photo" src="http://ru.lookatcode.com/show/9648057958996398/img1-lg.jpg"></img>
</body>
</html>
|
Все вроде бы заработало, но довольно странно. Попробуйте открыть эту ссылку http://learn.javascript.ru/play/zv2gLb в IE и в Лисе. Какие-то непонятные искажения пропорций. Вставил console.log в newImg.onload, что бы посмотреть
newImg.onload = function()
{
console.log('newImg['+(i+1)+'].width =' + newImg.width);
console.log('newImg['+(i+1)+'].height =' + newImg.height);
this.width = this.width / 5;
this.width = this.height / 5;
}
размеры картинок совсем не такие. |
нашел ошибку одну ошибку
this.width = this.height / 5; уже исправил |
теперь в IE работает нормально , а в Лисе и Хроме искажения
http://learn.javascript.ru/play/arWXC посмотреть можно здесь |
Цитата:
|
bakmaks, вариант с одинаковой высотой превью
http://learn.javascript.ru/play/VnfIT |
рони, в учебники есть было такое задание http://learn.javascript.ru/task/galereya-izobrazhenij
|
Цитата:
|
рони, и большие картинки изначально лучше скрывать, а то ужасно смотрится когда они до загрузки находятся на странице
|
большое спасибо!!!! всю голову себе сломал уже :) Правда остался вопрос. Почему до нормализации картинок по высоте были такие искажения в Лисе и в Хроме, а в IE нет?
|
Цитата:
|
Цитата:
|
понятно. еще раз спасибо.
|
| Часовой пояс GMT +3, время: 13:52. |