Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.03.2013, 19:29
Интересующийся
Отправить личное сообщение для bakmaks Посмотреть профиль Найти все сообщения от bakmaks
 
Регистрация: 17.03.2013
Сообщений: 10

Проблема с выводом изображений из массива
Есть некоторое кол-во изображений, приблизительно 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, 20:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

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;
		}
	}
Ответить с цитированием
  #3 (permalink)  
Старый 17.03.2013, 21:53
Интересующийся
Отправить личное сообщение для bakmaks Посмотреть профиль Найти все сообщения от bakmaks
 
Регистрация: 17.03.2013
Сообщений: 10

Моя ошибка. Менял имена переменных, что бы удобнее было код читать, и случайно заменил и название элемента. Должно было быть так
var newImg = document.createElement('img')
Ответить с цитированием
  #4 (permalink)  
Старый 17.03.2013, 21:56
Интересующийся
Отправить личное сообщение для bakmaks Посмотреть профиль Найти все сообщения от bakmaks
 
Регистрация: 17.03.2013
Сообщений: 10

Но результат от этого не изменился.
Ответить с цитированием
  #5 (permalink)  
Старый 18.03.2013, 03:08
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от bakmaks
Но результат от этого не изменился.
Само собой. На следующей же строке переменной присваивается иное значение
Ответить с цитированием
  #6 (permalink)  
Старый 18.03.2013, 07:48
Интересующийся
Отправить личное сообщение для bakmaks Посмотреть профиль Найти все сообщения от bakmaks
 
Регистрация: 17.03.2013
Сообщений: 10

Проблема обнаружилась на стадии создания массива изображений 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, 08:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

bakmaks,
пока картинка незагрузилась откуда взять ширину ?
Ответить с цитированием
  #8 (permalink)  
Старый 18.03.2013, 08:39
Интересующийся
Отправить личное сообщение для bakmaks Посмотреть профиль Найти все сообщения от bakmaks
 
Регистрация: 17.03.2013
Сообщений: 10

Первая картинка как-то загружается и у нее появляется и ширина и высота. Почему у последующих нет? И почему в 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, 08:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

bakmaks,
выкиньте строки 7, 8 - сделайте как я вам показал -- а строки 9, 10 поставьте в функцию в onload превью.
попробуйте написать такой код.
Ответить с цитированием
  #10 (permalink)  
Старый 18.03.2013, 09:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с выводом сообщений Visual Общие вопросы Javascript 0 01.02.2013 10:34
Проблема с выводом массива на консоль Vempel jQuery 1 06.08.2012 14:57
Проблема с передачей массива ajax-ом maximale AJAX и COMET 1 11.02.2012 00:20
Проблема с выводом контента в топ-панели Slavk0 Общие вопросы Javascript 0 28.03.2011 10:39
проблема со сменой изображений при наведение Jack Элементы интерфейса 0 19.03.2009 21:13