Подскажите по скрипту, кто в JS шарит

Я в пхп относительно соображаю, а вот JS совсем никак.


Всандаливаю в страничку чужой кусок кода, который должен заниматься ресайзом картинки по клику. В шапке прописывается следующий скрипт:

Код: [развернуть]

<script> function SetPhotoSize() {   // first do the big image   if (!document.getElementById("mainPhoto")) // in case a resize happens before the photo element exists    return;   var newHeight=высота оригинального изображения, newWidth= ширина оригинального изображения;   if ( window.innerHeight ) { newHeight = window.innerHeight; newWidth = window.innerWidth; }   else if ( document.body.clientHeight ) { newHeight = document.body.clientHeight; newWidth = document.body.clientWidth; }   newWidth -= 270; // remove nav column //  newHeight -= 70; if (newHeight == 0 || newWidth == 0)    return;   // sanity bounds   var orig_height = высота оригинального изображения;   var orig_width = ширина оригинального изображения;   if (newWidth < 200) { newWidth = 200; }   if (newHeight < 200) { newHeight = 200; }   if (newWidth > orig_width) { newWidth = orig_width; }   if (newHeight > orig_height) { newHeight = orig_height; }   // pick the smaller ratio   var ratio = 1;   var alt = "Click to enable ";   if (document.getElementById("resizeCheck").checked)   {         alt = "Click to disable ";         ratio = newWidth / orig_width;         if (newHeight / orig_height < ratio)                 ratio = newHeight / orig_height;   }   alt += "automatic resizing";   document.getElementById("mainPhoto").title=alt;   document.getElementById("mainPhoto").width = orig_width * ratio;   document.getElementById("mainPhoto").height= orig_height * ratio; } function ToggleResizeCheck() { var checked = "false"; if (document.getElementById("resizeCheck").checked) {   checked = "true"; } // update the image SetPhotoSize(); }

Ну и как ему суке найти и подставить размеры оригиналного изображения?
document.getElementById("mainPhoto").width - не пашет, если подставить document.body.clientHeight - изображение корячиться совсем не так, как нужно.

Вобщем подскажите, кому не влом, плз.

Если средствами JS, то использовать свойства .width и .height объекта Image :

Код:

image1 = new Image(); image1.src = "/images/sample.jpg"; image1.onload = function() {   newHeight=image1.height;   newWidth=image1.width; }

src будет сформирован php скриптом на странице, ну и как это пояснить JS?

пхп скрипт сформирует вызов картинки, потом вызывается вот этот скрипт в шапке:

Код: [развернуть]

<script> SetPhotoSize(); </script>

Может передавать эти данные как параметры функции?
ну тоесть вычислить их при вызове скрипта и передать?

Ну если решение не ограничивается средствами JS, то очевидно проще получить размеры изображения из php и передать их либо как аргумент к js-функции (если планируется использовать ее для нескольких изображений на странице):

Код:

echo "<script>\nSetPhotoSize($imgHeight,$imgWidth);\n</script>\n";

либо прямо в коде самой функции

Код:

echo <<<EOjscode . . . var newHeight=$imgHeight, // высота оригинального изображения   newWidth=$imgWidth; // ширина оригинального изображения . . . EOjscode;

Цитата:

src будет сформирован php скриптом на странице, ну и как это пояснить JS?

Не совсем понял, в чем проблема.
Если в html идет что-то вроде

Код:

<img id="mainPhoto" src="$Variable" />

то очевидно, что этот src можно получить по
document.getElementById("mainPhoto").src
если есть .src, но нет .width, например, можно повесить на
.onload функцию, которая получит размеры изображения по окончанию его загрузки.

Если на странице одна картинка для ресайза, то присвоить ей уникальный id и получать размеры "как обычно":

Код:

var s=getElementById("id картинки"); var w=s.width; var h=s.height;

Если картинок много, то в onclick картинки "вычислять" размеры и передавать их функции ресайза.

Yacc писал:

Если на странице одна картинка для ресайза, то присвоить ей уникальный id и получать размеры "как обычно": Код: var s=getElementById("id картинки"); var w=s.width; var h=s.height; Если картинок много, то в onclick картинки "вычислять" размеры и передавать их функции ресайза.

не пашет. Ставил w=s.naturalWidth; - нифига.
Ставил alert (w); - тишина, значит эта часть кода не выполняется.
Если РУКАМИ вбить реальные размеры картинки - скрипт работает отлично.
по логике, если цифры заменить на
naturalHeight
naturalWidth
должно быть тож самое, ведь их значения, равны этим цифрам, но нет (((

2EllGree - чуть позже ещё твой вариант покручу.

зы. Походу, не могу я это допилить, с моими познаними, нужно другой скрипт ресайза по клику поискать

Проверил, работает в ослах и лисе:

Код:

<html> <head>    <script>    function foo(){       var s=document.getElementById("1");       alert(s.width+"x"+s.height);    }    </script> </head>    <body>       <img id="1" src="" onload="foo();" />    </body> </html>

cyberdream3 писал:

по логике, если цифры заменить на naturalHeight naturalWidth должно быть тож самое, ведь их значения, равны этим цифрам, но нет (((

Поковырял эти св-ва, они прописаваются не во всех браузерах, ну и нашел простое решение прописывать их через фейковый Image. Получилось.
У меня работает во всех браузерах одинаково. По клику на картинке триггерно меняет ее ширину и высоту на натуральные и наоборот.
http://yaklyushin.com/naturalwidth.php
или код:

Код: [развернуть]

<html> <head> <script> function FixNaturalSize(img) {    if(typeof(img.naturalWidth)!='undefined') { return logtxt('Natural size is already defined:'+img.naturalWidth+' x '+img.naturalHeight); }    tempImg = new Image(); // naturalWidth & naturalHeight for MSIE    tempImg.src = img.src;    img.naturalWidth=tempImg.width; img.naturalHeight=tempImg.height;    logtxt('Got the Natural size:'+img.naturalWidth+' x '+img.naturalHeight); } function SwitchSize(img) {    if(parseInt(img.style.width)!=img.naturalWidth) {       img.style.width = img.naturalWidth+'px';       img.style.height = img.naturalHeight+'px';    } else {       img.style.width='1080px';       img.style.height='456px';    } } function logtxt(txt) {    document.getElementById("log").innerHTML+='<br />\n'+txt; // Comment this line when stop debugging } </script> </head> <body> <h1>Click on the image to switch size:</h1> <img src="http://yaklyushin.com/images/friday.gif" width="200" onload="FixNaturalSize(this)" onclick="SwitchSize(this)" /><br /> <div id="log">Log:</div> </body> </html>

Может этот пример поможет с решением?

Такс, уже теплее. Сделал не onload= а onclick, при первом проходе скрипт честно считывает значение с картинки, после чего делает ресайз, картинка становиться меньше, чтоб влезла в экран. Но при втором клике скрипт пробегает второй раз, получает уменьшенный размер, тоесть который получился после ресайза, и ничего уже не ресайзит, тоесть не возвращает к оригинальному разрешению
А со вбитыми цифрами всё работает нормально, там же значение не меняется

1. Работай с размерами картинки через css, а не напрямую меняй свойства картинки, т.е. вместо document.getElementById("mainPhoto").width = значение;
используй
document.getElementById("mainPhoto").style.width=значение+'px';
2. Сохраняй значения оригинального размера в naturalWidth/naturalHeight, как в примере, который я кидал, прописывая в HTML на <img ... onload="FixNaturalSize(this)" />

>http://yaklyushin.com/naturalwidth.php
Пример кода посмотрел, покрутил - ну опять таки имеем дело с чистыми цифрами -

Код:

img.style.width='1080px'; img.style.height='456px';

скриптом бы их, скриптом, а не руками под каждую картинку

ну и поиграюсь ещё с советами из последнего поста твоего )
В любом случае спасибо за помощь, новые знания то обретаются в любом случае )

cyberdream3 писал:

скриптом бы их, скриптом, а не руками под каждую картинку

Да легко, дай знать, какую ширину высоту нужно получить
Там можно хоть '100%' написать, чем и удобнее работать со стилем объекта, чем его свойствами.
Т.е., например, нужно втрое увеличить, ставим вместо 1080px и 456px
img.naturalWidth*3+'px' и img.naturalHeight*3+'px' соответственно.

Ширина 980 пикселей, высота пропорциональная, чтоб не искажалось изображение.
Могу за помощь на пиво вебманей скинуть ;)

Простенький скрипт ресайзит картинку под размер окна.

Код:

<html> <head>    <script>       function Fit(img){          var maxW=window.innerWidth-25;          var maxH=window.innerHeight-25;                    if (typeof(img.naturalHeight)=='undefined'){             i=new Image();             i.src=img.src;             img.naturalHeight=i.height;             img.naturalWidth=i.width;          }          img.width=img.naturalWidth;          img.height=img.naturalHeight;                                      if(img.width>img.height){             if (img.width>maxW){                img.height=Math.round((maxW/img.width)*img.height);                img.width=maxW;             }             else if (img.width < img.naturalWidth) {                img.height = img.naturalHeight;                img.width  = img.naturalWidth;             }          }          else{             if (img.height > maxH) {                img.width = Math.round((maxH/img.height)*img.width);                img.height  = maxH;             }             else if (img.height < img.naturalHeight) {                img.height = img.naturalHeight;                img.width  = img.naturalWidth;             }          }       }    </script> </head>    <body>    <img src="" onload="Fit(this);" />    </body> </html>

мож кому и пригодиться, но мне лично нужно по клику туда-сюда, а не просто ресайз под окно

cyberdream3 писал:

Ширина 980 пикселей, высота пропорциональная, чтоб не искажалось изображение.

Обнови http://yaklyushin.com/naturalwidth.php
или

Код: [развернуть]

<html> <head> <script> function FixNaturalSize(img) {    if(typeof(img.naturalWidth)=='undefined') {       tempImg = new Image();       tempImg.src = img.src;       img.naturalWidth=tempImg.width; img.naturalHeight=tempImg.height;    }    img.style.width=img.naturalWidth+'px'; } function SwitchSize(img) {    var MaxWidth = 980;    if(parseInt(img.style.width)==img.naturalWidth) {       img.style.width=MaxWidth+'px';       img.style.height=Math.round(MaxWidth/img.naturalWidth*img.naturalHeight)+'px';       return;    }    img.style.width = img.naturalWidth+'px';    img.style.height = img.naturalHeight+'px'; } </script> </head> <body> <h1>Click on the image to switch size:</h1> <img src="http://yaklyushin.com/images/fail.png" onload="FixNaturalSize(this)" onclick="SwitchSize(this)" /><br /> </body> </html>

cyberdream3 писал:

Могу за помощь на пиво вебманей скинуть ;)

Спасибо, не нужно

cyberdream3 писал:

мож кому и пригодиться, но мне лично нужно по клику туда-сюда, а не просто ресайз под окно

Код:

<html> <head>    <script>       function Fit(img){          if(img.width==img.naturalWidth){             var maxW=window.innerWidth-25;             var maxH=window.innerHeight-25;                          if (typeof(img.naturalHeight)=='undefined'){                i=new Image();                i.src=img.src;                img.naturalHeight=i.height;                img.naturalWidth=i.width;             }             img.width=img.naturalWidth;             img.height=img.naturalHeight;                                            if(img.width>img.height){                if (img.width>maxW){                   img.height=Math.round((maxW/img.width)*img.height);                   img.width=maxW;                }                else if (img.width < img.naturalWidth) {                   img.height = img.naturalHeight;                   img.width  = img.naturalWidth;                }             }             else{                if (img.height > maxH) {                   img.width = Math.round((maxH/img.height)*img.width);                   img.height  = maxH;                }                else if (img.height < img.naturalHeight) {                   img.height = img.naturalHeight;                   img.width  = img.naturalWidth;                }             }          }          else{             img.width=img.naturalWidth;             img.height=img.naturalHeight;          }       }    </script> </head>    <body>    <img src="" onclick="Fit(this);" />    </body> </html>

2EllGree
уф, блеать, ну наконец то, что нужно.
Держи рейт, добрый человек ) А за вебмани извини, если обидел, я искренне, ты не обязан мне помогать.

одно не вкуриваю - http://yaklyushin.com/naturalwidth.php - грузиться маленькая картинка, а по клику большая. А у меня наоборот - сначала большая, а потом маленькая


2Yacc
И тебе спасибо за участие, щас посмотрю и это
UPD. не, не пашет, картинка пропадает совсем по клику

cyberdream3 писал:

UPD. не, не пашет, картинка пропадает совсем по клику

Да, в осле. Если сделать чтоб работало, то получится ровно то, что написал EllGree. За что ему спасибо.

cyberdream3 писал:

А за вебмани извини, если обидел

Почему обидел? Наоборот, спасибо за предложение

cyberdream3 писал:

одно не вкуриваю - http://yaklyushin.com/naturalwidth.php - грузиться маленькая картинка, а по клику большая. А у меня наоборот - сначала большая, а потом маленькая

Потому, что у меня в оригинале маленькая (меньше заданной ширины), а у тебя, вероятно больше.