Как прикрутить Lightbox к фотографиям на стене пользователя,на стене клуба,форуме,блоге,коментариях

+43
1.67K
Открываем /includes/bbcode/bbcode.lib.php файл.
Находим
  1. 1164 //Функция - обработчик тега [img].
В этом блоке, чтобы загружаемая фотография большого размера умещалась на стене пользователя, меняем размер на нужное значение, у меня стоит 500.
меняем.

  1. while ($width > 640|| $height > 640)
на
  1. while ($width > 500|| $height > 640)
Ниже в этом же блоке, где сылка на оригинальную, большую фотографию

  1. $html .= '<div><a href="'.htmlspecialchars($src).'" ><img src="'.htmlspecialchars($src).'" '.$attr.' width="'.$width.'" height="'.$height.'" /></a></div>'."\n";
добаляем class="lightbox-enabled" rel="lightbox-galery":
  1. $html .= '<div><a class="lightbox-enabled" rel="lightbox-galery" href="'.htmlspecialchars($src).'" ><img src="'.htmlspecialchars($src).'" '.$attr.' width="'.$width.'" height="'.$height.'" /></a></div>'."\n";
Чтобы фотографии меньшего размера тоже открывались в lightbox надо добавить <a class="lightbox-enabled" rel="lightbox-galery" href="'.htmlspecialchars($src).'" ></a> сюда :
  1. return '<div class="bb_img" style="'.$div_style.'"><img src="'.htmlspecialchars($src).'" '.$attr.' /></div>';
Вот так:
  1. return '<div class="bb_img" style="'.$div_style.'"><a class="lightbox-enabled" rel="lightbox-galery" href="'.htmlspecialchars($src).'" ><img src="'.htmlspecialchars($src).'" '.$attr.' /></a></div>';
Далее открываем файл шаблона /templates/_default_/template.php.
и между <head></head> добавляем

  1. <script type="text/javascript" src="/includes/jquery/lightbox/js/jquery.lightbox.js"></script>
  2. <link rel="stylesheet" href="/includes/jquery/lightbox/css/jquery.lightbox.css" type="text/css" />
  3.  
Вот пример Demo

Стандартные файлы качаем тут >
0
santi santi 12 лет назад #
спасибо. забрал...
+1
alexbabo alexbabo 12 лет назад #
Я добавил готовые файлы для скачивания если нужно:)
0
Олег Олег 12 лет назад #
Интересно Спасибо!!!
0
googlebot googlebot 12 лет назад #
Если прицепить jquery.lightbox.js и jquery.lightbox.css не через конкретный tpl, а прямо в шаблоне - такая вставка будет работать везде, где используются бб-коды.
0
googlebot googlebot 12 лет назад #
а иначе, например в комментариях, на форуме, в блоге будет картинка-ссылка открывать пустое окно с картинкой-оригиналом.
+2
alexbabo alexbabo 12 лет назад #
Вы правы спасибо.меняю название блога :)
0
Mario Mario 12 лет назад #
то что доктор прописал. отлично! ставлю)
+1
Скела Скела 11 лет назад #
Помогите с реализацией на iCMS 1.10 - делаю по тому же смыслу, но при добавлении модальное окно тупо подмигивает, хотя и добавляет картинку... но не закрывается и пользователей тупо напугает..
0
Капитан Капитан 10 лет назад #
На версии 1.10.1 все отлично стало и работает! Автору +!

Еще от автора

Адаптивный шаблон Sunny - InstantCMS 2 .Free
Адаптивный шаблон. Адаптивный слайдер,на мобильных устройставх перелистывается пальцем. С анимацией,позиции подгружаются по мере прокрутки страницы.
Модуль "Контент панель".Инстант 1.10.3-1.10.4
Вначале планировался простенький модуль делающий перелинковку статей по методу кольца в разделе. Но модуль разросся и оброс многими функциями.
Модуль который виден только в профиле.Инстант.1.10.4
По просьбе Доротея Всё неимоверно элементарно. Создаем копию шаблона module.tpl,с другим именем,в нашем случае module_user.tpl.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.