Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2010, 01:35
Новичок на форуме
Отправить личное сообщение для big_jump Посмотреть профиль Найти все сообщения от big_jump
 
Регистрация: 13.12.2010
Сообщений: 7

Авто размер всех картинок на странице
Можно ли сделать так чтобы все картинки внутри тэга img автоматический изменяли свой размер до нужного, если они большего него.
Ответить с цитированием
  #2 (permalink)  
Старый 13.12.2010, 02:10
Аватар для kadabrik
Кандидат Javascript-наук
Отправить личное сообщение для kadabrik Посмотреть профиль Найти все сообщения от kadabrik
 
Регистрация: 10.12.2010
Сообщений: 114

Решение на коленке с помощью jquery:
$(function(){
$('img').live('load',function(){
  needWidth = 200;
  needHeight = 200;
  obj = $(this);
  imageOrientation = ((obj.height()>obj.width())?'vertical':'horizontal');
  if (imageOrientation == 'vertical')
     if (obj.height()>needHeight) obj.css('height',needHeight);
  else
     if (obj.width()>needWidth) obj.css('width',needWidth);
});
});

Последний раз редактировалось kadabrik, 13.12.2010 в 02:15.
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2010, 12:43
Новичок на форуме
Отправить личное сообщение для big_jump Посмотреть профиль Найти все сообщения от big_jump
 
Регистрация: 13.12.2010
Сообщений: 7

Мне кажется я что то не так делаю. Если не трудно, не могли бы вы сделать простой пример. Просто я нуб.
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2010, 12:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от big_jump
не могли бы вы сделать простой пример
У нас нет ни исходных данных... Ни нормального описания/иллюстрации того, что тебе нужно получить в итоге...
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2010, 13:15
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

function fitSize(image, h, w) {
	var nh = image.offsetHeight,
	nw = image.offsetWidth;
	image.style.height = (h > w ? h : nh * ( w / nw )) + "px";
	image.style.width = (h > w ? nw * ( h / nh ) : w) + "px";
}


Уменьшает (а может и увеличивать) размеры изображения, сохраняя пропорции.

Пример использования:

<img src='image.png' id='foo' />
<script type='text/javascript'>
	fitSize(document.getElementById("foo"), 100, 150);
	/*
		foo — ID нужного изображения
		100 — нужная высота
		150 — нужная ширина
	*/
</script>

Последний раз редактировалось exec, 13.12.2010 в 13:20.
Ответить с цитированием
  #6 (permalink)  
Старый 13.12.2010, 16:35
Новичок на форуме
Отправить личное сообщение для big_jump Посмотреть профиль Найти все сообщения от big_jump
 
Регистрация: 13.12.2010
Сообщений: 7

спасибо откликнувшимся, но пока ничё не получается
залил сайт на скорую руку http://art-aggr.appspot.com/
контент заполняется питоном
вобщем злые картинки упрямятся и не хотят помещаться в колонку
Ответить с цитированием
  #7 (permalink)  
Старый 15.12.2010, 11:56
жажду знаний
Отправить личное сообщение для bushstas Посмотреть профиль Найти все сообщения от bushstas
 
Регистрация: 17.07.2009
Сообщений: 202

для начала каждой картинке присвой class
<img src="" class="oneSizeImages">


imgW=100 // требуемая единая ширина картинок
imgH=100  // требуемая единая высота картинок

window.onload=function(){
var IMAGES=document.getElementsByClassName('oneSizeImages') // находим все картинки для которых нужно изменить размеры
for (var i=0; i<IMAGES.length; i++){
IMAGES[i].style.width=imgW+"px"
IMAGES[i].style.height=imgH+"px"
}
}


вот вроде и все
а если нужно привести например к одной ширине сохраняя пропорции то
imgW=100 // требуемая единая ширина картинок


window.onload=function(){
var IMAGES=document.getElementsByClassName('oneSizeImages') // находим все картинки для которых нужно изменить размеры
var w,h
for (var i=0; i<IMAGES.length; i++){
var w=IMAGES[i].offsetWidth
var h=IMAGES[i].offsetHeight
var o=imgW/w
var imgH=h*o
IMAGES[i].style.width=imgW+"px"
IMAGES[i].style.height=imgH+"px"
}
}

Последний раз редактировалось bushstas, 15.12.2010 в 12:08.
Ответить с цитированием
  #8 (permalink)  
Старый 15.12.2010, 12:45
Аватар для kadabrik
Кандидат Javascript-наук
Отправить личное сообщение для kadabrik Посмотреть профиль Найти все сообщения от kadabrik
 
Регистрация: 10.12.2010
Сообщений: 114

Проверил, небыли поставлены скобки
$(function(){
$('img').live('load',function(){
  needWidth = 200;
  needHeight = 200;
  obj = $(this);
  imageOrientation = ((obj.height()>obj.width())?'vertical':'horizontal');
  if (imageOrientation == 'vertical')
    {
      if (obj.height()>needHeight) obj.css('height',needHeight);
    }
  else
     if (obj.width()>needWidth) obj.css('width',needWidth);
});
});


Так работает. Скрипт можно запихнуть в любое место, картинки будут ресайзиться сразу после загрузки. В место img можно указать более подробный селектор.
Ответить с цитированием
  #9 (permalink)  
Старый 15.12.2010, 20:55
Новичок на форуме
Отправить личное сообщение для big_jump Посмотреть профиль Найти все сообщения от big_jump
 
Регистрация: 13.12.2010
Сообщений: 7

2 kadabrik
блин не работает скрипт у меня, видимо у меня руки не оттуда растут(
и глупый вопрос, кроме того чтобы вставить скрипт, ничего больше делать не надо?
2 bushstas
а ваш скрипт работает, но вот в чём проблема, контент заполняется автоматически и присвоить класс всем картинкам не получится, а если использовать класс от колонки, то ничего не выравнивается. Может есть какой-нибудь способ автоматически назначит всем картинкам класс или типа того. Я уже и не знаю что придумать.

ещё раз спасибо всем.
Ответить с цитированием
  #10 (permalink)  
Старый 15.12.2010, 21:01
жажду знаний
Отправить личное сообщение для bushstas Посмотреть профиль Найти все сообщения от bushstas
 
Регистрация: 17.07.2009
Сообщений: 202

a что там за "автомат"? и почему он не может присвоить им класс??
я не знаю ничего о "питоне", что это? python? и чем он отличается принципиально от php?
тогда нужно найти параметр например src в котором у них есть чтото общее у всех, например в src они загружаются из одной папки, просто если брать их все по имени тега, так ведь на сайте еще много всяких картинок
хотя нет, нужно знать id родителя где они все распологаются
тогда можео будет и по имени тега
просто нужно понять каким образом наполняется контент

Последний раз редактировалось bushstas, 15.12.2010 в 21:07.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отключение картинок на странице AgRy Events/DOM/Window 13 18.01.2021 08:37
Получить адреса всех ссылок на странице monya-or jQuery 6 13.05.2010 12:55