resize изображения и аналог getimagesize()

[Vdomah]

не знаю зачем Вы мне эти ссылки кинули, но я допер в чем проблема. Просто надо при задании параметров

if (is.width > is.height) largeImg.width = '500';
    else largeImg.height = '500';

удалять заданный ранее, а то получается квадрат. спасибо всем за помощь!

#largeImg {
09 /*width: 500px;*/
10 /* height: 400px;*/
11 display: block;
12 margin: auto;

закомментил - ничего не поменялось

[Vdomah]

function showThumbnail(href, title) {
  var is = getImageSize( 'largeImg');
  largeImg.src = href;
  largeImg.alt = title;
  if (is.width > is.height) {
  largeImg.width = '500';
  largeImg.removeAttribute('height');
  }
	else {
	largeImg.height = '500';
	largeImg.removeAttribute('width');
	}
}

Типа того.

А может всётаки сравнивать размеры нужно приходящего изображения ,после его полного получения.

Это да, а то сейчас правильный размер ставится только после второго нажатия по thumb.

[dmitriymar]

не знаю зачем Вы мне эти ссылки кинули, но я допер в чем проблема. Просто надо при задании параметров

удалять заданный ранее, а то получается квадрат. спасибо всем за помощь!

странно -у вас вышло? я удивлён

-не нужно высоту или ширину предварительно задавать у тега вообще.

а в этих ссылках разве нет как работают атрибуты ширина и высота?
а по ссылкам нужно всётаки ознакомиться

но я допер в чем проблема.

Не доперли вы в чём проблема . Вобще ни капли не доперли

Это да, а то сейчас правильный размер ставится только после второго нажатия по thumb.

это типо одолжение?
а изображения нужно готовить на сервере , при их загрузке на сервер

[Deff]

if(Math.round(largeImg.height)/Math.round(largeImg.width) > 550/550) {largeImg.height='550px';largeImg.width="auto"}

[Vdomah]

function showThumbnail(href, title) {
  var is = getImageSize( 'largeImg');
  largeImg.src = href;
  largeImg.alt = title;
  if (is.width > is.height) {
  largeImg.width = '500';
  largeImg.removeAttribute('height');
  }
	else {
	largeImg.height = '500';
	largeImg.removeAttribute('width');
	}
}

dmitriymar, никакого сарказма. Вы здесь правильную идею дали. Надо было просто строчку

var is = getImageSize( 'largeImg');

поставить после загрузки изображения, т.е.

largeImg.src = href;

function showThumbnail(href, title) {
  largeImg.src = href;
  largeImg.alt = title;
  var is = getImageSize( 'largeImg');
  if (is.width > is.height) {
  largeImg.width = '500';
  largeImg.removeAttribute('height');
  }
	else {
	largeImg.height = '500';
	largeImg.removeAttribute('width');
	}
}

И все красиво.

[dmitriymar]

поставить после загрузки изображения, т.е.
largeImg.src = href;

это не загрузка изображения -это указание адреса изображения.
и "работает" это только потому что изображения закешировались.
а при полной загрузке изображения возникает событие onload

[Vdomah]

По-моему, для этого галерее изначально была эта функция:

/* предзагрузка */
var imgs = thumbs.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
  var url = imgs[i].parentNode.href;
  var img = document.createElement('img');
  img.src = url;
}

Удалил кэш - все по прежнему работает.

Я бы остановился, но просто интересно как надо бы с onload правильно сделать?

[dmitriymar]

img.src = url;
img.onload=function(){alert('загрузилось')}
alert('меняем размеры')

Я бы остановился, но просто интересно как надо бы с onload правильно сделать?

а вообще для подобного есть гугл. а скрипт -на свалку-без вариантов

[Vdomah]

как onload работает я знаю. интересовала конкретная реализация.
последний совет конечно ок. только заработало - на свалку. а предложения по делу...

[devote]

Нашел аналог getimagesize для js: http://www.rsdn.ru/forum/web/987244.1

аналог то говно, размер он не покажет если браузер не успел загрузить картинку.

Вот так нужно примерно:

function getImageSize(src, callback) {
    var img = new Image();
    img.onload = img.onerror = function() {
        callback(img.width, img.height);
    }
    img.src = src;
}

getImageSize('http://javascript.ru/forum/image.php?u=25460&dateline=1356854759', function(w, h){
    alert([w, h]);
});