Ресайз картинок на jQuery

Список разделов phpBBex 1.x (поддерживается) Поддержка 1.x

Описание: У вас проблемы с phpBBex 1.x и вам необходима помощь? Спрашивайте здесь!
Правила раздела: Одна тема — один вопрос или группа связанных вопросов. Обязательно формируйте внятный заголовок, максимально отражающий суть вопроса. Подробно описывайте проблему. Не забудьте указать версию phpBBex и какие моды установлены, по возможности добавьте скриншоты проблемы или ссылку на страницу с проблемой.
Модератор: Поддержка

Сообщение #1 factotum » 12.10.2012, 14:31

Попытался написать скрипт, работающий с картинками.
цель - найти картинки без гиперссылки и размерами, больше заданного.
получилось так:
Код: Выделить всё
$(document).ready(function() {
   $("img").filter(function() {
      return (this.parentNode.tagName !== 'A');
   }).each(function() {
            $(this).attr("height", this.height)
            $(this).attr("width",600)
            $(this).attr("title","Click for full size")
        });

})
со ссылками работает корректно (не уверен, что изящно). А вот размеры картинки выдает 0. Очень нужна помощь.
Последний раз редактировалось factotum 12.10.2012, 16:03, всего редактировалось 1 раз.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #2 VEG » 12.10.2012, 14:51

Размеры элементов определяются функцией $(...).width(). Справка по теме: http://jqapi.com/#p=width
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #3 factotum » 12.10.2012, 15:00

VEG, уже докопался. заработало. помогла замена .ready на .load

Добавлено спустя 1 час 18 секунд:
PHP не определяет размеры картинок с внешних ресурсов.
Немного обмыслив, решил, что лучшим решением будет динамически обрезать большие картинки скриптом.
Не знаю, насколько красиво получилось:
Код: Выделить всё
$(window).load(function() {
   var maxWidth = 600;
   $("img").filter(function() {
      return (this.width > maxWidth);
   }).each(function() {
         var ratio = this.height / this.width;
         $(this).attr("height",this.height/this.width*maxWidth)
         $(this).attr("width",maxWidth)
         if(this.parentNode.tagName !== 'A') {
            var a = $('<a/>').attr('href', this.src);
            $(this).wrap(a);
         }
        });
})
На локалке работает. Скрипт проверяет размеры подгружаемой картинки, и если ширина больше заданного значения (600px), то устанавливает пропорциональные размеры с шириной 600px и добавляет ссылку на полноразмерную картинку. Машина клиента все равно загрузит всю тяжесть большой картинки, но хотя бы можно контролировать размеры. + без проблем добавить открытие во фрейме.

В таком виде есть "минус". Скрипт хватает все картинки подряд с вытекающими. Тоесть может схватить и логотип, например.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев


Вернуться в Поддержка 1.x



cron