Добро пожаловать на сайт <БагБД>, где вы можете задавать вопросы о программировании и разработке на Битрикс и Битрикс24, и получать быстрые и квалифицированные ответы от профессионалов!

Ограничение размера подключаемых изображений на форуме

00 голосов
2
Может кто сталкивался с подобной проблемой, поделитесь опытом, плиз :)

У нас дизайн сайта фиксированной ширины. Проблема возникает, когда в пост форума вставляется изображение большого размера. Картинка вставляется ссылкой на внешний ресурс (кнопка IMG в форме), а не загружается на наш сервер. Ясное дело, верстку растаращивает.

Возникла необходимость ограничить размер подобных изображений. Есть мысль заткнуть эту проблему посредством Java-скрипта, который "пробегает" по всем изображениям и принудительно уменьшает ширину. Однако нормальные размеры отображаются только после рефреша страницы :( И в добавление к этому помещать изображение (а вернее весь пост, ибо за вывод псевдотегов отвечает парсер, куда нет доступа простым смертным) в блок фиксированного размера со свойством overflow:hidden. Это для того, чтобы не было "скачков" в верстке страницы.

Короче говоря, не самое гениальное решение. Может быть, у кого-нибудь есть мысли на этот счет?

P.S. Есть, конечно, такая замечательная вещь в css как max-width, но, к огромному сожалению, это свойство не поддерживается IE6 :((
спросил 26 Янв, 14 от TRaMVau (140 баллов)

2 Ответы

00 голосов
Только недавно решал подобную задачу. Этот код успешно работает в IE, FF, Opera. Буду рад, если поможет.
Код
<script type="text/javascript">
function onImgLoad(id)
{
   var img = document.getElementById(id);
   var w = 170;
   if(img.width>w)
   {
      var k = img.height/img.width;
      img.width = w;
      img.height = k*w;
   }
}
function InsertImage(id, src)
{
   document.write('<a href="'+src+'" id="href_'+id+'"></a><font color="#F9FBF9">.</font>');
   document.close();
   var img = new Image();
   img.id = id;
   img.border = 0;
   document.getElementById('href_'+id).appendChild(img);
   img.onload = function(){onImgLoad(id)};
   img.src = src;
}
</script>
<?
$i = 0;
foreach($aPhoto as $value):
?>
<script type="text/javascript">
InsertImage('image<?echo $i?>', '<?echo addslashes($value)?>');
</script>
<noscript>
<a href="<?echo $value?>"><img src="<?echo $value?>" alt="" border="0"></a><font color="#F9FBF9">.</font>
</noscript>
<?
   $i++;
endforeach;
?>
ответил 25 Май, 14 от Ixie (540 баллов)
00 голосов
Спасибо, Вадим! Буду разбираться :)
ответил 21 Сен, 14 от TRaMVau (140 баллов)

Похожие вопросы

0 голосов
6 ответов
+1 голос
7 ответов
0 голосов
4 ответов
0 голосов
0 ответов
0 голосов
0 ответов