Авто размер всех картинок на странице
Можно ли сделать так чтобы все картинки внутри тэга img автоматический изменяли свой размер до нужного, если они большего него.
|
Решение на коленке с помощью 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);
});
});
|
Мне кажется я что то не так делаю. Если не трудно, не могли бы вы сделать простой пример. Просто я нуб.
|
Цитата:
|
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>
|
спасибо откликнувшимся, но пока ничё не получается
залил сайт на скорую руку http://art-aggr.appspot.com/ контент заполняется питоном вобщем злые картинки упрямятся и не хотят помещаться в колонку |
для начала каждой картинке присвой 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"
}
}
|
Проверил, небыли поставлены скобки
$(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 можно указать более подробный селектор. |
2 kadabrik
блин не работает скрипт у меня, видимо у меня руки не оттуда растут( и глупый вопрос, кроме того чтобы вставить скрипт, ничего больше делать не надо? 2 bushstas а ваш скрипт работает, но вот в чём проблема, контент заполняется автоматически и присвоить класс всем картинкам не получится, а если использовать класс от колонки, то ничего не выравнивается. Может есть какой-нибудь способ автоматически назначит всем картинкам класс или типа того. Я уже и не знаю что придумать. ещё раз спасибо всем. |
a что там за "автомат"? и почему он не может присвоить им класс??
я не знаю ничего о "питоне", что это? python? и чем он отличается принципиально от php? тогда нужно найти параметр например src в котором у них есть чтото общее у всех, например в src они загружаются из одной папки, просто если брать их все по имени тега, так ведь на сайте еще много всяких картинок хотя нет, нужно знать id родителя где они все распологаются тогда можео будет и по имени тега просто нужно понять каким образом наполняется контент |
на самом деле я мало что смыслю в питоне, да и в программировании в целом, для меня это сейчас не более чем конструктор, но свои детальки я делать не умею. по поводу python могу лишь в вики отослать.
сайт http://art-aggr.appspot.com/ сидит на google app engine, берёт rss и запихивает в колонку, в принципе это всё что он делает. вот кусок того как он это делает
<div class="column">
{% for source in c %}
<div class="source">
<h2 class="source-header"><a href="{{ source.link }}"> {{ source.name }}</a></h2>
<div class="source-content">
{% for item in source.sorted_item_set %}
<h3><a href=""> {{ item.title }}</a></h3>
<div>
<p>
{{ item.excerpt }}
</p>
<p>
<a href="{{ item.path }}">Read the rest at {{ source.name }}</a>
</p>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
|
Так точно должно заработать:
function resizeImg(obj)
{
$(this).attr('src',$(this).attr('src'));
needWidth = 200;
needHeight = 200;
obj = $(obj);
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);
}
$(function(){
$('img').load(function(){
resizeImg(this);
});
$('.ui-accordion-header').click(function(){
$('img').each(function(){resizeImg(this)} );
})
});
Решение костылевое, но на первое время пойдет Просто вставить перед закрытием head |
О спасибо тебе незнакомец, прям то что нужно. Тонны нефти тебе или добра, как хочешь).
|
Здравствуйте!Столкнулся с проблемой центрирования картинки.
.. При первой загрузке картинки после очистки кеша, если задействую алерт _ картинка центрируеться [b]гуд,а если не вывожу алерт- картинка НЕ центрируеться_убегает в сторону. А дальше- все ОК. Там у меня анимейт,си-эс-эсы центрируют.Я их даже в СетТайм установил на 800 мс и больше.Не считает сдвиг при открытой видимой картинки при 1-вой ее загрузке и все!В чем здесь подвох ?Помогите разобраться,уважаемые гуру JS |
Цитата:
|
Цитата:
Все_ ПОБЕДА ! ПОМЕРЯЛ, наконец ,картинку ! |
| Часовой пояс GMT +3, время: 21:34. |