Lightbox к фотографиям на стене

+34
2.59K
На форуме была тема Lightbox к фотографиям на стене
Решил и я реализовать возможность просмотра фото и на одном из своих проектов

1й вариант

Я не использовал Lightbox а взял за основу скрипт hightslide

первым делом прописал скрипт в файле template.php шаблона пути к скрипту и стилям
  1. <link rel="stylesheet" href="/highslide/highslide.css" type="text/css" />
  2. <script type="text/javascript" src="/highslide/highslide-with-gallery.js"></script>
  3. <script type="text/javascript">
  4. hs.graphicsDir = '../highslide/graphics/';
  5. hs.align = 'center';
  6. hs.transitions = ['expand', 'crossfade'];
  7. hs.wrapperClassName = 'dark borderless floating-caption';
  8. hs.fadeInOut = true;
  9. hs.dimmingOpacity = .75;
  10.  
  11. // Add the controlbar
  12. if (hs.addSlideshow) hs.addSlideshow({
  13. //slideshowGroup: 'group1',
  14. interval: 5000,
  15. repeat: false,
  16. useControls: true,
  17. fixedControls: 'fit',
  18. overlayOptions: {
  19. opacity: .6,
  20. position: 'bottom center',
  21. hideOnMouseOut: true
  22. }
  23. });
  24. </script>
Затем изменил в файле /includes/bbcode/bbcode.lib.php строчку 1217 на
  1. $html .= '<div><a class="highslide-image" onclick="return hs.expand(this)" href="'.$src.'" ><img src="'.$src.'" '.$this->cleanAttrValue($attr).' width="'.$width.'" height="'.$height.'" /></a></div>'."\n";
в корень сайта кинул папку с самим скриптом и стилями hightslide
ну и всё заработало вроде не чего не забыл, в принцепи эта переделка работает и для клубов и для форума и для блога ну и само сабой для стены пользователя тоже работает
ПРОВЕРЕННО НА ВЕРСИИ Инстанта 1,10,1
если у когото стоит моя ПЕРЕДЕЛКА УК то необходимо в папке /templates/_default_/components/com_catalog_item.tpl удалить с 26 по 49 строчку(тот скрипт что я привёл выше)
Совсем старый стал (из за праздников наверное) вот DEMO я по несколько фото добавил и в клуб и в блог и в форум и на стене пользователя(только администратору добовлял) вроде как всё работает

2й вариант используя Lightbox

Как и в первом варианте правим файл :/includes/bbcode/bbcode.lib.php строчку 1217 меняем на
  1. $html .= '<div><a class="lightbox-enabled" rel="lightbox-galery" href="'.$src.'"><img src="'.$src.'" '.$this->cleanAttrValue($attr).' width="'.$width.'" height="'.$height.'" /></a></div>'."\n";
подключаем скрипт в файле template.php вашего шаблона перед тегом </head>
  1. <script language="JavaScript" type="text/javascript" src="/includes/jquery/lightbox/js/jquery.lightbox.js"/></script>
Вот в принцепи и всё(покрайней мере у меня работает нормально с этими изменениями)
Вот DEMO Для второго варианта

Из минусов этих дороботок хочу заметить в первом варианте из за того, что на сайте у меня в используется в основном hightslide то при просмотре картинок в коментариях(УК или каталога предприятий) при открытии картинки пролистывалются все картинки с данной страници включая и картинки с описания (УК или каталога предприятий)
Во втором вареанте этих проблем я не наблюдал

Да кстати это дополнение работает на всех страницах где для добовления текстовой информации используется bbcode тоесть — клубы, стены пользователя, коментарии, форум и тд
Чур сильно не пинать, Я ТОЛЬКО УЧУСЬ

Всех с Пасхой

+1
Mr_Freeman Mr_Freeman 9 лет назад #
Мне 1й вариант больше нравится)но не понравилось, что открывая картинки, предыдущие не закрываются сами автоматически, а приходится опять кликать на них, чтобы уменьшить. А в целом все отлично +
+1
Dim@sik Dim@sik 9 лет назад #
нужно посмотреть будет сам ява скрипт , если найду то перезалью файл и сообщу здесь
+1
Dim@sik Dim@sik 9 лет назад #
Всё это подправил информацию в блоге перезалил
Код PHP:
  1. <link rel="stylesheet" href="/highslide/highslide.css" type="text/css" />
  2. <script type="text/javascript">
  3. hs.graphicsDir = '../highslide/graphics/';
  4. hs.align = 'center';
  5. hs.transitions = ['expand', 'crossfade'];
  6. hs.wrapperClassName = 'dark borderless floating-caption';
  7. hs.fadeInOut = true;
  8. hs.dimmingOpacity = .75;
  9. // Add the controlbar
  10. if (hs.addSlideshow) hs.addSlideshow({
  11. //slideshowGroup: 'group1',
  12. interval: 5000,
  13. repeat: false,
  14. useControls: true,
  15. fixedControls: 'fit',
  16. overlayOptions: {
  17. opacity: .6,
  18. position: 'bottom center',
  19. hideOnMouseOut: true
  20. }
  21. });
  22. </script>
+1
Dim@sik Dim@sik 9 лет назад #
Код PHP:
  1. <script type="text/javascript" src="/highslide/highslide-with-gallery.js"></script>
Забыл
0
Скела Скела 9 лет назад #
Я всё таки думаю лучше использовать lightbox. Больше всего мне понравился Funnybox, но он конфликтует с CristalChat.
Так же, что бы сделать прокрутку в боксе всех картинок, даже тех что через ссылку находим и дополняем
Код LIGHTBOX:
так же добавил noindex
0
Нил™ Нил™ 9 лет назад #
но он конфликтует с CristalChat.
у меня стоит и FancyBox и CrystalChat проблем из за конфликта не наблюдаю)
+1
Скела Скела 9 лет назад #
проблема при открытии, после первого же просмотра - чат отстегивается и с лайтбоксом к сожалению при некоторых обстоятельствах тоже функционал чата пропадает
0
Митяй Митяй 9 лет назад #
+ жаль только hightslide "Файл не найден"
+2
Dim@sik Dim@sik 9 лет назад #
Перезалил файл, какието непонятки были )))
0
SE7EN SE7EN 9 лет назад #
Dim@sik, спасибо!
+1
Dim@sik Dim@sik 9 лет назад #
Всегда, пожалуисто :)
0
Майкл Майкл 9 лет назад #
Скажите пжл, вижу что в блоге фото все размером 600*450.
Картинки были закачены такого размера или были уменьшены до такого размера автоматически?
+1
Dim@sik Dim@sik 9 лет назад #
нет , картинки были закачаны произвольного размера, и уменьшились автоматически до 600/450
0
Aleks Shultz Aleks Shultz 9 лет назад #
За разработку +, но в блогах не работает, постоянная загрузка, а фото не всплывает... на demo тоже
+1
Dim@sik Dim@sik 9 лет назад #
это в каком варианте ? странно только что открыл вроде всё в 2м варианте норм а вот в первом действительно такая проблема и есчё в статьях когда коментарий добовляешь тоже такая проблема ( , если получится то исправлю
0
Aleks Shultz Aleks Shultz 9 лет назад #
Да, в первом варианте с hightslide, может где то конфликт js?
+1
Dim@sik Dim@sik 9 лет назад #
не исключаю, есчё не проверял, по дому много забот
0
Aleks Shultz Aleks Shultz 9 лет назад #
Решение пока не найдено? Кстати, по двойному клику по фото - открывается как раньше...
+1
Dim@sik Dim@sik 9 лет назад #
это в каком первом или втором варианте?
0
Aleks Shultz Aleks Shultz 9 лет назад #
Эт все про первый вариант. Но сейчас пользуюсь вторым, правда шаблон перекосило, пришлось удалить в /includes/jquery/lightbox/css/jquery.lightbox.min.css отступы, которые в самом начале прописаны были.
+1
Dim@sik Dim@sik 9 лет назад #
да в первом варианте присутствует такой косяке, победить его я пока не смог (
0
Tsarkoff Tsarkoff 9 лет назад #
Зделал как написано. На 1.10.1 не работает(
0
Скела Скела 8 лет назад #
переходя от 1.10.0 до 1.10.3 проверял -на всех работает, читайте и делайте внимательнее + уберите, если есть подключенные скрипты фанбокса или лайтбокса, с друг другом они не работаю.

Еще от автора

Обновление Изображение категории и описание категории + Включение/Отключение категории
Обновил Вот это до версии 2.7.1 И добавил включение отключение категории
Изображение категории и описание категории
Дополнительное изображение категории и описание категории
Мульти фото в статьи + иконка категории для версии 1.10.6
В продолжение Зтого и этого обьединил эти 2 разработки в одно целое .
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.