JQuery изменить размер эскиза изображения - PullRequest
Новая
       13

JQuery изменить размер эскиза изображения

0 голосов
/ 18 сентября 2011

Я пытаюсь создать скрипт JQuery, чтобы изменить размер некоторых изображений в портфолио. Некоторые изображения имеют больший размер по горизонтали, а некоторые - по вертикали, поэтому моя идея - просто отобразить центральную часть в виде эскиза. И если вы нажмете на него, вы увидите реальное изображение (с внешним ползунком в порядке?)

Итак, маленький скрипт, который я сделал, выглядит следующим образом: 

$(document).ready(function(){

    var w_div = $('#portfolio div').width();
    var h_div = $('#portfolio div').height();

    $('#portfolio div a img').each(function() {

        /* Correction estimate: div.width - photo.width / 2 */
        var posLeft = -(w_div - $(this).width())  / 2;
        var posTop  = -(h_div - $(this).height()) / 2;

        /* Assignment of new measures to the current image */
        $(this).css({left: posLeft+'px', top: posTop+'px'});

    });

});

В цикле я пытаюсь взять группу img и перебрать ее, чтобы вычислить правильную центральную позицию. Но я не знаю, почему это работает только для первого изображения. Я имею в виду, что этот скрипт изменяет CSS всех изображений с правильными размерами только для первого изображения. Почему назначения posLeft и posTop не меняются? Я не понимаю этого ...

(Я забыл сказать, что у каждого изображения есть предложение 'position :lative' в файле css, хорошо?

Спасибо!

edit: Может быть проще и лучше использовать PHP и выполнить эту задачу на стороне сервера?

1 Ответ

3 голосов
/ 18 сентября 2011

Я читаю это слишком быстро. Поэтому я сильно редактирую свой ответ.

  1. $ (document) .ready () запускается сразу после отображения DOM. Изображения еще не загружены, и единственная информация, которую DOM имеет о них, - это то, что находится в атрибутах img. Это также относится к контейнеру div, который еще не увеличил свою высоту для размещения изображений. Вероятно, поэтому вы получаете одинаковые размеры каждый раз. В идеале вы должны вручную установить ширину и высоту изображений, а также контейнер div. Если вы не хотите этого делать, вы можете использовать $ (window) .load (), который будет ожидать загрузки всех изображений и повторного рендеринга DOM, но это очень очевидно.

  2. 'left' и 'top' работают только с элементами 'position: absolute;' и внутри контейнера с 'position: относительным;'. Таким образом, изображения должны быть абсолютными, а div над ними относительными для работы слева и сверху.

  3. Я не уверен, почему вы используете левую и верхнюю части вместо ширины и высоты, так как вы пытаетесь сделать эскиз. Другой способ - рассчитать максимум ширины и высоты и уменьшить его до желаемой ширины или высоты. 

    var max_width = 20; var max_height = 20;
$('#portfolio div a img').each(function() {
    var w = $(this).width();
    var h = $(this).height();
    var scale = null;
    if (w >= h) { if (w > max_width) { scale = 1 / (w / max_width); } } 
    else { if (h > max_height) { scale = 1 / (h / max_height); } }
    if (scale) {
        $(this).width(w * scale);
        $(this).height(h * scale);
    }
});

Я надеюсь, что кое-что из этого прояснится достаточно, чтобы позволить вам выработать правильное решение.

...