| clampson | 17.08.2013 16:52 |
Цитата:
|
Сообщение от danik.js
(Сообщение 267926)
не используй атрибут. Используй свойство:
imgs[i].onclick = function() { openImageWindow(this.src) }
|
или я чего то не понимаю?
Получение размера изображения
Привет народ, написал небольшой скриптик, который добавляет 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>
|
Цитата:
imgs[i].onclick = function() { openImageWindow(this.src) }
А зачем в окне открывать изображение тех же самых размеров что на странице? В чем профит то? Ладно бы увеличенное открывать, но тут таже картинка.. |
Цитата:
или я чего то не понимаю? |
Кстати сказать, сейчас эмпирическим путем было вычислено что проблема есть только в chrome, firefox отдаёт правильный размер каритнки при каждом клике
|
Я знаю что делаю что то не так, подскажите как написать грамотно
|
Для начала нужно создавать превьюшки а не ужимать картинки через css. Кто ж так делает то, а?
|
clampson, onload поставьте.
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
alert( [image.width, image.height] );
}
|
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>
|
Ruslan_xDD,
на всякий случай сначала onload потом src |
Цитата:
|
Цитата:
ваш код с this http://clampson.ru/test/index2.html мой: http://clampson.ru/test/ видите разницу? |
кажется придумал как сделать что бы работало как я хочу, сейчас попробую ...
|
Сделал вот так, коряво наверно, зато работает
<!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++) {
var image = new Image();
image.src = imgs[i].src;
imgs[i].setAttribute("onclick", "openImageWindow(this.src,"+image.width+","+image.height+");");
};
};
function openImageWindow(src, width, 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="100" height="100" />
<img src="12345.png" width="100" height="100" />
<img src="oboi.jpg" width="100" height="100" />
</BODY>
</HTML>
Спасибо, всем кто откликнулся :) |
Цитата:
|
Цитата:
|
Есть плагины же готовые для cms-ок или wysiwyg-редакторов. Сами делают превьюшки при загрузке картинок. А про безлимитки у сотовых операторов я впервые слышу. Вайфай опять же не везде есть. Еще говорят гугл бот замеряет объем страницы и это сказывается на ранжировании (хотя я сомневаюсь в этом)
|
| Часовой пояс GMT +3, время: 20:16. |