ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Обтекание изображения текстом

Сообщений 1 страница 3 из 3

1

Универсальный тег обтекания на CSS
Добавляет в форму ответа кнопки, позволяющие сделать обтекаемые картинки или текст.

Автор: Alex_63

В HTML верх

<!-- Обтекание текста слева/справа --><style type="text/css">
.post-content p{clear:both}.post-content abbr[title^="float:"]{text-decoration:none;pointer-events:none;margin:.5em}
.post-content abbr[title="float:left"]{float:left}.post-content abbr[title="float:right"]{float:right}
</style>
<script type="text/javascript">
FORUM.set('editor.addition.tags.float_left', {name:'Обтекание слева',onclick:function(){bbcode('[abbr="float:left"]','[/abbr]');}});
FORUM.set('editor.addition.tags.float_right', {name:'Обтекание справа',onclick:function(){bbcode('[abbr="float:right"]','[/abbr]');}});
</script>


Обтекание изображений в постах через css
Добавляет в форму ответа кнопки рядом с кнопкой загрузки картинок, позволяющие спозиционировать в сообщениях текст слева/справа от картинки.

Автор: Deff

Вставляем ссылку, выделяем, жмём нужную кнопку.
Доп. плюсы: не увеличивает кол-во кнопок в форме ответа, доп.кнопки появляются при наведении на иконку вставки картинки

В HTML верх

Код:
    <!--// CSS-версия обтекания изображений в Постах //-->
    <style>.postimg[alt="float:right"]{float:right;padding-left:12px;pointer-events:none}.postimg[alt="float:left"]{float:left;padding-right:12px;pointer-events:none}
    #add_float{position:absolute;padding:2px;top:-8px;left:50%;margin-left:-29px!important;width:57px!important;background: url("http://savepic.ru/7021157.png") no-repeat 50%!important;}
    #button-image #add_float img{display:block;position:relative;z-index:4;}
    #button-image>img{position:relative;z-index:2;}
    #button-image>center{opacity:0;visibility:hidden; transition-duration: .8s;}
    #button-image:hover>center{opacity:1; visibility:visible;}
    </style>
    <script>$(function(){$('.postimg[title="float:right"],.postimg[title="float:left"]').mouseover(function(e){e.preventDefault();});
    var a ='<center style="position:relative;"><table id=add_float><tr><td id="text-left" title="Обтекание: текст слева">@@</td><td></td><td id="text-right" title="Обтекание: текст справа">##</td></tr></table></center>',b3="]'";
    var b1 = '<img onclick="bbcode(\'[img=float:right'+b3+',\'[/img'+b3+')" src="/i/blank.gif"/>',b2 = '<img onclick="bbcode(\'[img=float:left'+b3+',\'[/img'+b3+')" src="/i/blank.gif"/>';
    a = a.replace('@@',b1).replace('##',b2);
    $('#post #button-image').prepend(a);});
    </script>

* ВНИМАНИЕ! Замените в стиле ссылку на картинку кнопок на свою и настройте код под ВАШ стиль.


Обтекание изображения текстом. © Romych
Добавляет в форму ответа кнопку, позволяющую спозиционировать в сообщениях текст слева/справа от картинки.

http://s6.uploads.ru/t/L7zrt.jpg
Автор: Romych

в html-низ (если не работает - хтмл-форму ответа):

Код:
<!--обтекание изображения 2.4.4-->
<script language="javascript">
$(function(){
$('td#button-link').before('<td id="floatbut" style=\'background-image:url("http://s002.radikal.ru/i198/1009/43/f183caeae434.gif")\'></td>');
$('#floatbut, .vibor').click(function(){
$('div#float').toggle();});
  });
elm=document.getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content") 
{
post = elm[x].innerHTML;
if(post.indexOf("[/float]") != -1) {
floats = /\[float=(.*?)\]([^\[]{1,11000})\[\/float\]/gi
elm[x].innerHTML = elm[x].innerHTML.replace(floats, "<span style='float: $1; margin: 15px; text-align: $1;'>$2</span>")
}}
</script>
<div id="float" style="display:none;background:#FFFFCC;border:1px solid black; width:auto; padding:8px; position:absolute; margin-top:-32%; margin-left:35%; z-index:20">
<div><strong>Направление обтекания</strong></div><br>
<div align="center">
<img class="vibor" src="http://s001.radikal.ru/i193/1009/96/695abc799ddb.png" title="left" onclick="bbcode('[float=left]', '[/float]')" />
<img class="vibor" src="http://s002.radikal.ru/i199/1009/ac/95c10fcc7d82.png" title="right" onclick="bbcode('[float=right]', '[/float]')" />
</div></div>
Romych написал(а):

в панели ответа появится вот такая кнопка - http://s002.radikal.ru/i198/1009/43/f183caeae434.gif
по нажатию на которую, вам будет дан выбор сделать обтекание слева или справа

спасибо mkusherу и rps за помощь и тестирование

Отредактировано Герда (16.05.2013 04:29:04)

+2

2

Это просто не видать, как шикарно. Установила ещё давно, очень удобно. Жаль, что на форумах такую кнопку не введут.

0

3

Герда написал(а):

Универсальный тег обтекания на CSS

добавлен новый скрипт обтекания

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."