Форум

bakmaks · #1 (**permalink**) 17.03.2013, 21:29

Есть некоторое кол-во изображений, приблизительно 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 еще только осваиваю .

рони · #2 (**permalink**) 17.03.2013, 22:14

bakmaks,
странная конструкция ...

Сообщение от bakmaks

var newImg = document.createElement('newImg')25 newImg = Images[i];

....
может так попробовать

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;
		}
	}

bakmaks · #3 (**permalink**) 17.03.2013, 23:53

Моя ошибка. Менял имена переменных, что бы удобнее было код читать, и случайно заменил и название элемента. Должно было быть так

var newImg = document.createElement('img')

bakmaks · #4 (**permalink**) 17.03.2013, 23:56

Но результат от этого не изменился.

danik.js · #5 (**permalink**) 18.03.2013, 05:08

Сообщение от bakmaks

Но результат от этого не изменился.

Само собой. На следующей же строке переменной присваивается иное значение

bakmaks · #6 (**permalink**) 18.03.2013, 09:48

Проблема обнаружилась на стадии создания массива изображений 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 всё происходит с точностью до наоборот. При первой загрузке выдается массив с правильными значениями (и то не всегда все значения не нулевые) и превьюшки с ненулевыми значениями видны и при клике по ним появляется большая картинка, а при перезагрузке первое значение нормальное , остальные по нулям. Ну и соответственно одна превьюшка. Остальных не видно. После последующих перезагрузок ничего не меняется.

рони · #7 (**permalink**) 18.03.2013, 10:00

bakmaks,
пока картинка незагрузилась откуда взять ширину ?

bakmaks · #8 (**permalink**) 18.03.2013, 10:39

Первая картинка как-то загружается и у нее появляется и ширина и высота. Почему у последующих нет? И почему в 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

рони · #9 (**permalink**) 18.03.2013, 10:46

bakmaks,
выкиньте строки 7, 8 - сделайте как я вам показал -- а строки 9, 10 поставьте в функцию в onload превью.
попробуйте написать такой код.

рони · #10 (**permalink**) 18.03.2013, 11:08

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>

Форум

Справочник

Discord чат

Курсы javascript