Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.08.2013, 03:51
Интересующийся
Отправить личное сообщение для clampson Посмотреть профиль Найти все сообщения от clampson
 
Регистрация: 01.07.2013
Сообщений: 27

Получение размера изображения
Привет народ, написал небольшой скриптик, который добавляет onclick
с функцией открытия в новом окне ко всем изображениям. По первому клику всё работает как положено, но стоит закрыть всплывающее окно
и повторно клацнуть по тому же изображению и image.width вместо размера оригинальной картинки отдаёт нуль ... Почему так происходит и как с этим бороться?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
    <HEAD>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <TITLE>HTML  документ</TITLE>


<script type="text/javascript">

window.onload = function () {
	var imgs = document.getElementsByTagName('img');
    	var length = imgs.length;
 
	for (var i = 0; i < length; i++) {
        imgs[i].setAttribute("onclick", "openImageWindow(this.src);"); 
	};
};

  function openImageWindow(src) {
    var image = new Image();
    image.src = src;
    var width = image.width;
    var height = image.height;
 
     alert(width);
    if (width>600){
        width =width/2;
        height =height/2 ;
   }
    window.open(src,"Image","width=" + width + ",height=" + height + + 
 "toolbar=no,status=no,scrollbars=no,menubar=no,resizable=no"+',left=' + ((window.innerWidth - width)/2) + ',top=' + ((window.innerHeight - height)/2));
  }
</script>

    </HEAD>
<BODY>


<img src="123.jpg" width="500"  height="400"  />
<img src="12345.png"  />
</BODY>
</HTML>

Последний раз редактировалось clampson, 17.08.2013 в 03:54.
Ответить с цитированием
  #2 (permalink)  
Старый 17.08.2013, 11:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от clampson
        imgs[i].setAttribute("onclick", "openImageWindow(this.src);");
не используй атрибут. Используй свойство:
imgs[i].onclick = function() { openImageWindow(this.src) }


А зачем в окне открывать изображение тех же самых размеров что на странице? В чем профит то? Ладно бы увеличенное открывать, но тут таже картинка..
Ответить с цитированием
  #3 (permalink)  
Старый 17.08.2013, 16:52
Интересующийся
Отправить личное сообщение для clampson Посмотреть профиль Найти все сообщения от clampson
 
Регистрация: 01.07.2013
Сообщений: 27

Сообщение от danik.js Посмотреть сообщение
не используй атрибут. Используй свойство:
imgs[i].onclick = function() { openImageWindow(this.src) }
спасибо буду знать, но как это решает проблему? Как по второму клику на той же картинке в width передавался нуль так и передаётся. И да, изображение открывается не как на странице, а как раз оригинального размера (попробуй запустить ), просто если оно больше 600 пикселей в ширину, размеры делятся пополам ... или я чего то не понимаю?

Последний раз редактировалось clampson, 17.08.2013 в 17:08.
Ответить с цитированием
  #4 (permalink)  
Старый 17.08.2013, 17:14
Интересующийся
Отправить личное сообщение для clampson Посмотреть профиль Найти все сообщения от clampson
 
Регистрация: 01.07.2013
Сообщений: 27

Кстати сказать, сейчас эмпирическим путем было вычислено что проблема есть только в chrome, firefox отдаёт правильный размер каритнки при каждом клике

Последний раз редактировалось clampson, 17.08.2013 в 17:17.
Ответить с цитированием
  #5 (permalink)  
Старый 17.08.2013, 17:15
Интересующийся
Отправить личное сообщение для clampson Посмотреть профиль Найти все сообщения от clampson
 
Регистрация: 01.07.2013
Сообщений: 27

Я знаю что делаю что то не так, подскажите как написать грамотно
Ответить с цитированием
  #6 (permalink)  
Старый 17.08.2013, 17:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Для начала нужно создавать превьюшки а не ужимать картинки через css. Кто ж так делает то, а?
Ответить с цитированием
  #7 (permalink)  
Старый 17.08.2013, 18:23
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

clampson, onload поставьте.

var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
   alert( [image.width, image.height] );
}
Ответить с цитированием
  #8 (permalink)  
Старый 17.08.2013, 18:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

clampson,
проблемы в chrome необнаружил ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type="text/javascript">

window.onload = function () {
	var imgs = document.getElementsByTagName('img');
    	var length = imgs.length;

	for (var i = 0; i < length; i++) {
        imgs[i].onclick=function ()
{
  openImageWindow(this);
}
	};
};

  function openImageWindow(img) {

    var src = img.src;
    var width = img.width;
    var height = img.height;

     alert(width);
    if (width>600){
        width =width/2;
        height =height/2 ;
   }
    window.open(src,"Image","width=" + width + ",height=" + height + "toolbar=no,status=no,scrollbars=no,menubar=no,resizable=no"+',left=' + ((window.innerWidth - width)/2) + ',top=' + ((window.innerHeight - height)/2));
  }
</script>

</head>

<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="500"  height="400"  />
<img src="http://clampson.ru/img/123.png"  />
</body>

</html>
Ответить с цитированием
  #9 (permalink)  
Старый 17.08.2013, 18:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Ruslan_xDD,
на всякий случай сначала onload потом src
Ответить с цитированием
  #10 (permalink)  
Старый 17.08.2013, 19:14
Интересующийся
Отправить личное сообщение для clampson Посмотреть профиль Найти все сообщения от clampson
 
Регистрация: 01.07.2013
Сообщений: 27

Сообщение от danik.js Посмотреть сообщение
Для начала нужно создавать превьюшки а не ужимать картинки через css. Кто ж так делает то, а?
Так делают очень много людей, кто при создании статьи пользуется визуальными редакторами с возможностью вставки изображения, например WYSIWYG, CKEditor
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Определение видимого размера изображения в Chrome. mushtra Javascript под браузер 3 22.07.2013 19:47
изменение размера изображения - произвольно по 4-м вершинам dubsage Элементы интерфейса 6 11.10.2012 13:30
Получение изображения в Contenteditable tarya Events/DOM/Window 0 02.08.2011 02:13
Получение высоты изображения theo_ Javascript под браузер 2 21.06.2011 16:04
Проверка размера изображения Bizarre Общие вопросы Javascript 4 09.03.2011 18:02