Авторесайз внешних изображений в bbcodes через Fancybox
|
|
Автор: Алхимик
Опубликовано: 430 дней назад (19 марта 2011)
Блог: Nemonomicon
Рубрика: Без рубрики
Редактировалось: 6 раз — последний 30 марта 2011
Настроение: сонное
Играет: Carbon Based Lifeforms
|
+28↑ Голосов: 30 |
(Больших под ширину блога, маленьких по их истинному размеру.)
Пример:
Делалось для того, чтобы большие изображения не покидали пределов блока тела сообщения блога.
Еще удобство в том, что можно их просмотреть в текущем блоге все поочередно как галерею.
Все делалось на версии 1.7
Хак маленький и несложный.
UPD:Как заметил Keep - при при апдейте jquery, перестает работать lightbox. Проверил, если обновить lightbox - делу это не помогает. Зато при даунгрейде fancybox - до 1.2.5 - работает и то и другое. Возможно при обновлении jquery что-то еще перестало работать, и это пока незаметно. Перепишу тогда статью для 1.2.5. версии - т.е. идущей с дистрибутивом Instant. Переписал.
Загружаем архив Fancybox на геглекоде, Распаковываем его.
Нам понадобятся файлы
Создадим например папку /includes/jquery/fancybox/ в которую все и скопируем.
Переносим нужные файлы в соответствии с нижеприведенным кодом, где указаны пути.
Далее добавляем в /templates/_default_/template.php перед </head>
В функции img_2html
вместо
Скриншоты тут скорее неуместны, лучше посмотреть пример по вышеприведенной ссылке.
upd спустя 11 дней: Или никто не ставил или оно волшебным образом у всех работало )
Обнаружил, что одинаковых строк в bb_code.lib.php - две, заменять надо было вторую, та которая с "else", а не "if (!$zoom)". Статью обновил. Не всегда спустя время - удается четко воссоздать пошагово свои действия, вот и получаются такие косяки.
Да, решений подобного этому - уйма, всегда рад альтернативным решениям, менее громоздким и грациозным.
Пример:
Скрытый текст виден только зарегистрированным пользователям
Делалось для того, чтобы большие изображения не покидали пределов блока тела сообщения блога.
Еще удобство в том, что можно их просмотреть в текущем блоге все поочередно как галерею.
Все делалось на версии 1.7
Хак маленький и несложный.
UPD:Как заметил Keep - при при апдейте jquery, перестает работать lightbox. Проверил, если обновить lightbox - делу это не помогает. Зато при даунгрейде fancybox - до 1.2.5 - работает и то и другое. Возможно при обновлении jquery что-то еще перестало работать, и это пока незаметно. Перепишу тогда статью для 1.2.5. версии - т.е. идущей с дистрибутивом Instant. Переписал.
Загружаем архив Fancybox на геглекоде, Распаковываем его.
Нам понадобятся файлы
Код PHP:
И все изображения из папки fancybox/fancybox/fancybox/fancybox/jquery.fancybox-1.2.5.css fancybox/fancybox/jquery.fancybox-1.2.5.js fancybox/fancybox/jquery.fancybox-1.2.5.pack.js
Создадим например папку /includes/jquery/fancybox/ в которую все и скопируем.
Переносим нужные файлы в соответствии с нижеприведенным кодом, где указаны пути.
Далее добавляем в /templates/_default_/template.php перед </head>
Код PHP:
В файле /includes/bbcode/bbcode.lib.php
<script type="text/javascript" src="/includes/jquery/fancybox/jquery.fancybox-1.2.5.pack.js"></script>
<script type="text/javascript" src="/includes/jquery/fancybox/jquery.fancybox-1.2.5.js"></script>
<link rel="stylesheet" type="text/css" href="/includes/jquery/fancybox/jquery.fancybox-1.2.5.css" media="screen" />
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'titlePosition' : 'over',
'overlayColor' : '#000',
'overlayOpacity' : 0.9,
'hideOnOverlayClick' : true,
'hideOnContentClick' : false,
'titleShow' : true,
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + '</span>';
}
});
});
// ]]>
</script>В функции img_2html
вместо
Код PHP:
вставляем} else {
return '<div class="bb_img" style="'.$div_style.'"><img src="'.htmlspecialchars($src).'" '.$attr.' /></div>';
}Код PHP:
В шаблоне в style.css - добавляем else {
return '<span class="hoverbox" title="Нажмите левую кнопку мыши для просмотра изображения"><a rel="example_group" href="'.htmlspecialchars($src).'" title=""><img src="'.htmlspecialchars($src).'" alt=""/></a></span>';
}
Код PHP:
Тестировалось только на Firefox 3.6.15 и Opera 11.01. /** Стиль Fancybox **/
.hoverbox img {
background: #fff;
color: inherit;
vertical-align: top;
max-width: 600px; /** Максимальная ширина при после которой будет идти ресайз - например ширина блога**/
min-width: 100px; /** Минимальная ширина изображения, порога далее которого уменьшаться оно не будет**/
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
padding: 3px;
margin: 1px;
}Скриншоты тут скорее неуместны, лучше посмотреть пример по вышеприведенной ссылке.
upd спустя 11 дней: Или никто не ставил или оно волшебным образом у всех работало )
Обнаружил, что одинаковых строк в bb_code.lib.php - две, заменять надо было вторую, та которая с "else", а не "if (!$zoom)". Статью обновил. Не всегда спустя время - удается четко воссоздать пошагово свои действия, вот и получаются такие косяки.
Да, решений подобного этому - уйма, всегда рад альтернативным решениям, менее громоздким и грациозным.
| # 19 марта 2011 в 12:06 +1 | ||
|
| # 19 марта 2011 в 12:11 +1 | ||
|
| # 19 марта 2011 в 12:51 +2 | ||
|
| # 19 марта 2011 в 17:56 0 | ||
|
| # 20 марта 2011 в 02:54 0 | ||
|
| # 19 марта 2011 в 23:30 +1 |
| # 19 марта 2011 в 23:34 +2 |
| # 25 марта 2011 в 21:39 0 |
| # 19 апреля 2011 в 12:35 +1 | ||
|
| # 19 апреля 2011 в 13:20 +1 | |||
|
| # 20 марта 2011 в 02:51 +1 |
| # 20 марта 2011 в 12:47 0 | ||
|
| # 20 марта 2011 в 13:03 0 | ||
|
| # 19 апреля 2011 в 13:38 +1 | ||
|