Найти на сайте

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

+34
2.83K
  2. Блоги
  3. Lightbox к фотографиям на стене
На форуме была тема 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 тоесть — клубы, стены пользователя, коментарии, форум и тд
Чур сильно не пинать, Я ТОЛЬКО УЧУСЬ

Всех с Пасхой

Мультифото к компоненту статьи
Эффект highslide в УК
+1
Mr_Freeman Mr_Freeman 10 лет назад #
Мне 1й вариант больше нравится)но не понравилось, что открывая картинки, предыдущие не закрываются сами автоматически, а приходится опять кликать на них, чтобы уменьшить. А в целом все отлично +
+1
Dim@sik Dim@sik 10 лет назад #
нужно посмотреть будет сам ява скрипт , если найду то перезалью файл и сообщу здесь
+1
Dim@sik Dim@sik 10 лет назад #
Всё это подправил информацию в блоге перезалил
Код 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.  
  10. 	// Add the controlbar
  11. 	if (hs.addSlideshow) hs.addSlideshow({
  12. 		//slideshowGroup: 'group1',
  13. 		interval: 5000,
  14. 		repeat: false,
  15. 		useControls: true,
  16. 		fixedControls: 'fit',
  17. 		overlayOptions: {
  18. 			opacity: .6,
  19. 			position: 'bottom center',
  20. 			hideOnMouseOut: true
  21. 		}
  22. 	});
  23. </script>
+1
Dim@sik Dim@sik 10 лет назад #
Код PHP:
  1. <script type="text/javascript" src="/highslide/highslide-with-gallery.js"></script>
Забыл
0
Скела Скела 10 лет назад #
Я всё таки думаю лучше использовать lightbox. Больше всего мне понравился Funnybox, но он конфликтует с CristalChat.
Так же, что бы сделать прокрутку в боксе всех картинок, даже тех что через ссылку находим и дополняем
Код LIGHTBOX:
  1.  
  2.    return '<div class="bb_img" style="'.$div_style.'"><noindex><a class="lightbox-enabled" rel="lightbox-galery"  href="'.$src.'"><img src="'.$src.'" '.$this->cleanAttrValue($attr).' width="'.$width.'" height="'.$height.'" border="0"/></a></noindex></div>';

  3.
так же добавил noindex
0
Нил™ Нил™ 10 лет назад #
но он конфликтует с CristalChat.
у меня стоит и FancyBox и CrystalChat проблем из за конфликта не наблюдаю)
+1
Скела Скела 10 лет назад #
проблема при открытии, после первого же просмотра - чат отстегивается и с лайтбоксом к сожалению при некоторых обстоятельствах тоже функционал чата пропадает
0
Митяй Митяй 10 лет назад #
+ жаль только hightslide "Файл не найден"
+2
Dim@sik Dim@sik 10 лет назад #
Перезалил файл, какието непонятки были )))
0
SE7EN SE7EN 10 лет назад #
Dim@sik, спасибо!
+1
Dim@sik Dim@sik 10 лет назад #
Всегда, пожалуисто :)
0
Майкл Майкл 10 лет назад #
Скажите пжл, вижу что в блоге фото все размером 600*450.
Картинки были закачены такого размера или были уменьшены до такого размера автоматически?
+1
Dim@sik Dim@sik 10 лет назад #
нет , картинки были закачаны произвольного размера, и уменьшились автоматически до 600/450
0
Aleks Shultz Aleks Shultz 10 лет назад #
За разработку +, но в блогах не работает, постоянная загрузка, а фото не всплывает... на demo тоже
+1
Dim@sik Dim@sik 10 лет назад #
это в каком варианте ? странно только что открыл вроде всё в 2м варианте норм а вот в первом действительно такая проблема и есчё в статьях когда коментарий добовляешь тоже такая проблема ( , если получится то исправлю
0
Aleks Shultz Aleks Shultz 10 лет назад #
Да, в первом варианте с hightslide, может где то конфликт js?
+1
Dim@sik Dim@sik 10 лет назад #
не исключаю, есчё не проверял, по дому много забот
0
Aleks Shultz Aleks Shultz 10 лет назад #
Решение пока не найдено? Кстати, по двойному клику по фото - открывается как раньше...
+1
Dim@sik Dim@sik 10 лет назад #
это в каком первом или втором варианте?
0
Aleks Shultz Aleks Shultz 10 лет назад #
Эт все про первый вариант. Но сейчас пользуюсь вторым, правда шаблон перекосило, пришлось удалить в /includes/jquery/lightbox/css/jquery.lightbox.min.css отступы, которые в самом начале прописаны были.
+1
Dim@sik Dim@sik 10 лет назад #
да в первом варианте присутствует такой косяке, победить его я пока не смог (
0
Tsarkoff Tsarkoff 10 лет назад #
Зделал как написано. На 1.10.1 не работает(
0
Скела Скела 10 лет назад #
переходя от 1.10.0 до 1.10.3 проверял -на всех работает, читайте и делайте внимательнее + уберите, если есть подключенные скрипты фанбокса или лайтбокса, с друг другом они не работаю.

Еще от автора

Обновление Изображение категории и описание категории + Включение/Отключение категории

Обновление Изображение категории и описание категории + Включение/Отключение категории

Обновил Вот это до версии 2.7.1 И добавил включение отключение категории
10
Изображение категории и описание категории

Изображение категории и описание категории

Дополнительное изображение категории и описание категории
26
Мульти фото в статьи + иконка категории для версии 1.10.6

Мульти фото в статьи + иконка категории для версии 1.10.6

В продолжение Зтого и этого обьединил эти 2 разработки в одно целое .
16

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.