Авторесайз внешних изображений в 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 на геглекоде, Распаковываем его.
Нам понадобятся файлы
Код PHP:
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
И все изображения из папки fancybox/fancybox/

Создадим например папку /includes/jquery/fancybox/ в которую все и скопируем.
Переносим нужные файлы в соответствии с нижеприведенным кодом, где указаны пути.
Далее добавляем в /templates/_default_/template.php перед </head>
Код 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>
В файле /includes/bbcode/bbcode.lib.php
В функции img_2html
вместо

Код PHP:
} else {
return '<div class="bb_img" style="'.$div_style.'"><img src="'.htmlspecialchars($src).'" '.$attr.' /></div>';
                 }
вставляем

Код PHP:
else {
return '<span class="hoverbox" title="Нажмите левую кнопку мыши для просмотра изображения"><a rel="example_group" href="'.htmlspecialchars($src).'" title=""><img src="'.htmlspecialchars($src).'" alt=""/></a></span>';
               }
В шаблоне в style.css - добавляем

Код PHP:
/** Стиль 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;
}
Тестировалось только на Firefox 3.6.15 и Opera 11.01.
Скриншоты тут скорее неуместны, лучше посмотреть пример по вышеприведенной ссылке.
upd спустя 11 дней:  Или никто не ставил или оно волшебным образом у всех работало )
Обнаружил, что одинаковых строк в bb_code.lib.php - две, заменять надо было вторую, та которая с "else", а не "if (!$zoom)". Статью обновил. Не всегда спустя время - удается четко воссоздать пошагово свои действия, вот и получаются такие косяки.
Да, решений подобного этому - уйма, всегда рад альтернативным решениям, менее громоздким и грациозным.
Сворачивание блоков в сайдбаре с запоминанием позиции в cookies
Keep # 19 марта 2011 в 12:06 +1
У вас не работает lightbox в фотогалереи
Алхимик # 19 марта 2011 в 12:11 +1
Да, благодарю за находку. Проверил - со старым jquery она работает, но перестает работать топик. Буду копать дальше.
Алхимик # 19 марта 2011 в 12:51 +2
Даунгрейдил fancybox до идущей с дистрибутивом версии jquery (1.2.5) - все заработало. Обновил статью.
Евгений # 19 марта 2011 в 17:56 0
Мега плюс... Всю ночь искал нечто подобное, даже прикрутил, но найденный мною растягивал маленькие изображения, что не гуд...
Спасибо! Вечером прикручу.
Алхимик # 20 марта 2011 в 02:54 0
Ну да, как говорится - На девелоперов надейся, а сам не плошай.
Уверен после непродолжительного копания решение бы тоже нашлось - как описал Захар.
Захар # 19 марта 2011 в 23:30 +1
Ребятушки ))) Всё решается гораздо проще ))) Галерея, конечно же это круть, но это всё равно, что стрелять из гранатомёта по тараканам в закрытой комнате. Раз такая тема назрела, значит не все в курсе, что в CSS есть такие чудесные параметры, как max-width и max-height добавляем к классу того модуля, где картинки портят шаблон max-width: требуемая ширина в пикселах;
Захар # 19 марта 2011 в 23:34 +2
"буратино был тупой" это про меня ))) забыл разжевать, применяем к классу с параметром img
например для стенки в профиле это будет выглядеть так
Код PHP:
.usr_wall usr_profile_block img {max-width:600px;}
0 # 25 марта 2011 в 21:39 0
я совсем тупой, куда ето вставлять? .usr_wall usr_profile_block img {max-width:600px;}
У меня вот такое есть
    .usr_profile_block{
    clear:both;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #C3D6DF;
    margin-left:10px;
што нужно изменить?
fact # 19 апреля 2011 в 12:35 +1
а куда действительно это нужно вставить в css?
EVV # 19 апреля 2011 в 13:20 +1
а куда действительно это нужно вставить в css?

И мне интересно. Подскажите пожалуйста.
Алхимик # 20 марта 2011 в 02:51 +1
Ну не так уж чтобы, с тараканами я всегда находил общий язык, и до гранатометов так и не дошло.
Через max/min-width тут по сути и регулируется максимальная/минимальная ширина, просто кроме всего прочего - нажав на изображение его становится видно на весь экран сразу, без манипуляций с копипастой. А, что напомнил про высоту - это благодарю, полезное замечание. А то ведь могут и вставить прозрачную картинку в 1px по ширине и over 9000px по высоте и думай потом - чем прогневил богов )
Естественно покопавшись еще больше в движке может чего более интересного и придумал бы. Но такую-же схему использую на форуме phpbb - и она не вызывала нареканий пользователей. Если пользователь ходит по сайтам в режиме [Paranoia] с отключенной JavaScript - то картинка просто откроется в этом-же окне.
По хорошему счету - авторесайз изображения по ширине соответствующего блока должен идти в шаблоне по дефолту. Тогда и не будет постройки велосипедов на гусеничном ходу )
Захар # 20 марта 2011 в 12:47 0
Дружище, я не пытался как то гнобить твоё решение, просто кому то потребуется более простое решение и я в него ткнул своим кривым пальцем. Твою фишку тоже применю на парочке проектов ))) Спасибо
Алхимик # 20 марта 2011 в 13:03 0
Ну дык ты видел палки у лыжников скоростного спуска? Тут та-же фигня )
EVV # 19 апреля 2011 в 13:38 +1
Алхимик, все замечательно работает. Спасибо и +++