Использование JQuery / javascript для создания динамического изображения: что я делаю не так? - PullRequest
Новая
       4

Использование JQuery / javascript для создания динамического изображения: что я делаю не так?

2 голосов
/ 23 июля 2011

пожалуйста, взгляните на следующий код: (я удалил все типы документов и т. Д. Для удобства чтения).

Я полагаю, код довольно понятен: код JavaScript извлекает высоту и ширину из изображения нижеи создает две новые переменные (newHeight и newWidth), которые сокращаются на 80% от исходных значений.Когда документ загружается, эти две новые переменные (newHeight и newWidth) должны быть назначены атрибуту высоты и ширины изображения, но этого не происходит.

Может кто-нибудь мне помочь? 

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

<script type="text/javascript">
var width = $("#fluidimage").width();
var height = $("#fluidimage").height();

var imageresize = 80;
var newHeight = Math.round(height/100)*imageresize);
var newWidth = Math.round(width/100)*imageresize);
</script>

</head>
<body onload="document.getElementById('#fluidimage').style.width=newWidth; document.getElementById('#fluidimage').style.height=newHeight;"> 
    <img src="images/1.jpg" id="fluidimage" height="" width=""  />
</body>
</html>

Ответы [ 3 ]

3 голосов
/ 23 июля 2011

Вам нужно дождаться загрузки всего документа (фотографии загружаются в последнюю очередь), чтобы изображения имели определяемый размер.

Этот код должен работать: 

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

<script type="text/javascript">
    $(window).load ( function () {
        var width   = $("#fluidimage").width();
        var height  = $("#fluidimage").height();

        var imageresize = 80;
        var newHeight = Math.round(height*imageresize/100);
        var newWidth = Math.round(width*imageresize/100);

        $("#fluidimage").width (newWidth).height (newHeight);
    } );
</script>

</head>
<body> 
    <img src="images/1.jpg" id="fluidimage" />
</body>
</html>


Смотрите это в действии на jsFiddle.

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

Кроме того, jQuery позволяет вам «упростить» JS до: 

$(window).load ( function () {

    function resizer (index, measurement) {
        var imageresize = 80;
        this.wCall = (typeof this.wCall == "null") ? true : this.wCall ^ true;
        return this.wCall ? Math.round (measurement * imageresize / 100) : measurement;
    }
    $("#fluidimage").width (resizer).height (resizer);
} );


Смотрите это в действии на jsFiddle.

1 голос
/ 23 июля 2011

Похоже, что первые два ответа пропустили открывающую скобку на Math.Round
Попробуйте это. 

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

        <script type="text/javascript">
            $(document).ready(function() {
                var imageresize = 0.8;
                var $image = $("#fluidimage");
                $image.css({
                    "width": Math.round($image.width() * imageresize),
                    "height": Math.round($image.height() * imageresize)
                });
            });
        </script>
    </head>
    <body> 
        <img id="fluidimage" src="images/1.jpg" />
    </body>
</html>

Рабочая демонстрация: http://jsfiddle.net/naveen/58GBd/

Используйте screen.width для изменения размерасогласно экрану. 

$(document).ready(function() {
    var imageresize = 0.0;
    var $image = $("#fluidimage");
    switch (screen.width) {
        case 1680:
            imageresize = 0.5;
            break;
        case 1280:
            imageresize = 0.4;
            break;
        case 1024:
            imageresize = 0.3;
            break;
        default:
            imageresize = 0.8;
            break;
    }
    $image.css({
        "width": Math.round($image.width() * imageresize),
        "height": Math.round($image.height() * imageresize)
    });
});

Рабочая демонстрация: http://jsfiddle.net/naveen/Xbe4v/

0 голосов
/ 23 июля 2011

Вам следует подождать, пока страница загрузится, прежде чем вычислять значение / высоту.Попробуйте это 

  <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

    <script type="text/javascript">
    function() setImageDimensions{

      var width = $("#fluidimage").width();
      var height = $("#fluidimage").height();

      var imageresize = 80;
      document.getElementById('#fluidimage').style.width= Math.round(width/100)*imageresize);       
      document.getElementById('#fluidimage').style.height=Math.round(height/100)*imageresize;

    }
    </script>

    </head>
    <body onload="setImageDimenstions();"> 
        <img src="images/1.jpg" id="fluidimage" height="" width=""  />
    </body>

</html>
...