Master-X
Форум | Новости | Статьи
Главная » Форум » Программинг, Скрипты, Софт, Сервисы » 
Тема: Подскажите по скрипту, кто в JS шарит
цитата
06/12/10 в 16:34
 cyberdream3
Я в пхп относительно соображаю, а вот 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 - изображение корячиться совсем не так, как нужно.

Вобщем подскажите, кому не влом, плз. icon_rolleyes.gif
цитата
06/12/10 в 17:05
 EllGree
Если средствами JS, то использовать свойства .width и .height объекта Image :
Код:

image1 = new Image();
image1.src = "/images/sample.jpg";
image1.onload = function() {
  newHeight=image1.height;
  newWidth=image1.width;
}
цитата
06/12/10 в 17:36
 cyberdream3
src будет сформирован php скриптом на странице, ну и как это пояснить JS?

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

<script>

SetPhotoSize();

</script>

Может передавать эти данные как параметры функции?
ну тоесть вычислить их при вызове скрипта и передать?
цитата
06/12/10 в 17:51
 EllGree
Ну если решение не ограничивается средствами 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 функцию, которая получит размеры изображения по окончанию его загрузки.
цитата
06/12/10 в 18:01
 Yacc
Если на странице одна картинка для ресайза, то присвоить ей уникальный id и получать размеры "как обычно":

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

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

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


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

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

зы. Походу, не могу я это допилить, с моими познаними, нужно другой скрипт ресайза по клику поискать
цитата
06/12/10 в 19:30
 Yacc
Проверил, работает в ослах и лисе:

Код:
<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>
цитата
06/12/10 в 20:55
 EllGree
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>
Может этот пример поможет с решением?
цитата
06/12/10 в 21:17
 cyberdream3
Такс, уже теплее. Сделал не onload= а onclick, при первом проходе скрипт честно считывает значение с картинки, после чего делает ресайз, картинка становиться меньше, чтоб влезла в экран. Но при втором клике скрипт пробегает второй раз, получает уменьшенный размер, тоесть который получился после ресайза, и ничего уже не ресайзит, тоесть не возвращает к оригинальному разрешению icon_confused.gif
А со вбитыми цифрами всё работает нормально, там же значение не меняется icon_rolleyes.gif
цитата
06/12/10 в 21:34
 EllGree
1. Работай с размерами картинки через css, а не напрямую меняй свойства картинки, т.е. вместо document.getElementById("mainPhoto").width = значение;
используй
document.getElementById("mainPhoto").style.width=значение+'px';
2. Сохраняй значения оригинального размера в naturalWidth/naturalHeight, как в примере, который я кидал, прописывая в HTML на <img ... onload="FixNaturalSize(this)" />
цитата
06/12/10 в 22:08
 cyberdream3
>http://yaklyushin.com/naturalwidth.php
Пример кода посмотрел, покрутил - ну опять таки имеем дело с чистыми цифрами -
Код:

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


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

ну и поиграюсь ещё с советами из последнего поста твоего )
В любом случае спасибо за помощь, новые знания то обретаются в любом случае )
цитата
06/12/10 в 22:13
 EllGree
cyberdream3 писал:
скриптом бы их, скриптом, а не руками под каждую картинку icon_sad.gif

Да легко, дай знать, какую ширину высоту нужно получить icon_smile.gif
Там можно хоть '100%' написать, чем и удобнее работать со стилем объекта, чем его свойствами.
Т.е., например, нужно втрое увеличить, ставим вместо 1080px и 456px
img.naturalWidth*3+'px' и img.naturalHeight*3+'px' соответственно.
цитата
06/12/10 в 22:23
 cyberdream3
Ширина 980 пикселей, высота пропорциональная, чтоб не искажалось изображение.
Могу за помощь на пиво вебманей скинуть ;)
цитата
06/12/10 в 22:36
 Yacc
Простенький скрипт ресайзит картинку под размер окна.

Код:
<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>
цитата
06/12/10 в 22:42
 cyberdream3
мож кому и пригодиться, но мне лично нужно по клику туда-сюда, а не просто ресайз под окно icon_neutral.gif
цитата
06/12/10 в 22:46
 EllGree
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 писал:
Могу за помощь на пиво вебманей скинуть ;)

Спасибо, не нужно icon_smile.gif
цитата
06/12/10 в 23:04
 Yacc
cyberdream3 писал:
мож кому и пригодиться, но мне лично нужно по клику туда-сюда, а не просто ресайз под окно icon_neutral.gif

Код:
<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>

icon_smile.gif
цитата
06/12/10 в 23:08
 cyberdream3
2EllGree
уф, блеать, ну наконец то, что нужно.
Держи рейт, добрый человек ) А за вебмани извини, если обидел, я искренне, ты не обязан мне помогать.

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


2Yacc
И тебе спасибо за участие, щас посмотрю и это
UPD. не, не пашет, картинка пропадает совсем по клику
цитата
06/12/10 в 23:25
 Yacc
cyberdream3 писал:
UPD. не, не пашет, картинка пропадает совсем по клику

Да, в осле. Если сделать чтоб работало, то получится ровно то, что написал EllGree. icon_smile.gif За что ему спасибо.
цитата
06/12/10 в 23:26
 EllGree
cyberdream3 писал:
А за вебмани извини, если обидел

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

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

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


Эта страница в полной версии