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

Объявление

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

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее

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

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

Подробнее

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

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

Предложения

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

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


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог скриптов » Обтекание изображения текстом (MyBB) [Romych]


Обтекание изображения текстом (MyBB) [Romych]

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

1

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

Автор: Deff
Платформа: MyBB

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

В 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
Платформа: MyBB

в 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


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог скриптов » Обтекание изображения текстом (MyBB) [Romych]


Рейтинг форумов | Создать форум бесплатно © 2007–2019 «QuadroSystems» LLC