Перейти к публикации
Гость Михаил

Lightbox для DLE 10.0 и выше

Рекомендованные сообщения

Гость Михаил

Всем доброго времени суток у меня 20:21!

Вот я решил установить Lightbox Evolution на DLE 10.1.

Пошарил по форумам, и нашел множество решений, но читая комментарии, я удивился

На 10.1 не работает, просто выводит картинку в новом окне,

На DLE 10 открывает в новом окне

 

Сейчас я объясню почему: В инструкции по установке сказано

 

 

Представляю вашему вниманию некий хак, jQuery Lightbox Evolution для Datalife Engine.
Возможно, многие видели на сайтах под системой Datalife Engine, замену стандартного обозревателя изображения новостей.
Так вот сейчас я вам объясню как это сделать и Вам.

Для начала скачиваем саму библиотеку и загружаем папку lightbox в паку js вашего шаблона, так чтобы путь имел такой вид:

{THEME}/js/lightbox/jquery.lightbox.css

Далее идем в редактирование шаблона, и вносим изменения в секцию до тега [ /head]:

<link rel="stylesheet" type="text/css" href="{THEME}/js/lightbox/jquery.lightbox.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="{THEME}/js/lightbox/jquery.lightbox.ie6.css" />
<![endif]-->
<script type="text/javascript" src="{THEME}/js/lightbox/jquery.lightbox.min.js"></script>

Этим самым действием мы подключили сам скрипт и его стили, далее нам нужно подключить еще один скрипт, но уже после тега [body]:

<script type="text/javascript">
  jQuery(document).ready(function($){
    $('.lightbox').lightbox();
  });
</script>

Теперь идем в /engine/classes/ находим там файл parse_class.php открываем и заменяем все:

onclick=\"return hs.expand(this)\"

на

class=\"lightbox\"

Вот и все, осталось только сделать "Перестроение публикаций" которая находиться в панели администратора.

 

 

Теперь посмотрим, что тут не так:

  1. Дистрибутив архива со скриптом не актуален.
  2. Не до конца описанная инструкция
  3. Так же не написано положить файл ".htaccess" в папку со скриптами

Теперь я покажу все ошибки:

Заглянем в файл "parse.class.php" и найдем

onclick=\"return hs.expand(this)\"

Потом заменим все 2, но не 4 упоминания

 

Все? Справились?

Казалось бы да! Но все не так, давайте попробуем найти строчку № 1375-1376

Увидим код:

if( $align == '' ) return "<!--TBegin:{$info}--><a href=\"$gurl\" rel=\"highslide\" class=\"highslide\"><img src=\"$url\" {$alt} /></a>{$caption}<!--TEnd-->";
else return "<!--TBegin:{$info}--><a href=\"$gurl\" rel=\"highslide\" class=\"highslide\"><img src=\"$url\" style=\"float:{$align};\" {$alt} /></a>{$caption}<!--TEnd-->";

А теперь заменим:

rel=\"highslide\" class=\"highslide\"

на:

rel=\"group1\" class=\"lightbox\"

После этого выполним перестроение публикаций и вуаля! Все заработало, но все таки я выложу свой дистрибутив скриптов которые  взял с Демо сайта этого плагина

Вот: lightbox.zip

 

Если я не туда положил тему пожалуйста переместите ее :yazik:

 

Еще добавлю, если вы хотите сделать галерею тогда вам стоит в те строчки: а именно в те 2 в которых вы заменили

onclick=\"return hs.expand(this)\"

добавьте аттрибут

rel=\"group1\"

Все на это все.

Изменено пользователем Михаил

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
sanabek

Это очень легко провернуть, Ну для новичка поможет, А чем не нравиться то что в дле?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Михаил

@sanabek, Ну к примеру по мой дизайн стандартный совсем не подходит :popkorn:

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

Михаил, а можно демку? Хотелось бы глянуть что за скрипт галереи (как он выглядит).

Может где то применю)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Михаил

@jakal, Вот только скриншоты, не могу видео снять

nvx1389206637__desktop_08-01-2014_22-42-nvx1389206631__desktop_08-01-2014_22-42-nvx1389206606__desktop_08-01-2014_22-42-

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
sanabek

, а так красиво.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Faik

 

<script type="text/javascript">
  jQuery(document).ready(function($){
    $('.lightbox').lightbox();
  });
</script>

А еще дело в том, что в <body> нужно вставлять не то, что у тебя написано, а вот это:

<script type="text/javascript">  jQuery(document).ready(function($){    $('.lightbox').lightbox();  });</script>

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

, Спасибо за скрины, хотел еще спросить, а в режиме галереи листаеться при клике по правой и левой части изображения или только при клике по стрелочкам?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Михаил

@jakal,  И по стрелочкам тоже

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Asilis

Сделал все как вы описали. Все работает!! Спасибо! Но не перелистывает по краю изображения. Как это сделать? 

Плюс, сразу, если можно, подскажите пожалуйста, где находится настройка отступа превьюшек. Хочу красивую библиотеку сделать. Большое спасибо еще раз!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

Плюс, сразу, если можно, подскажите пожалуйста, где находится настройка отступа превьюшек.

В стилях конечно же. Внешний вид превьюшек никак не относятся к LightBox.

 

p.s. Демки и документация: http://www.aerowebstudio.net/codecanyon/jquery.lightbox/examples.php

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Asilis

 

Спасибо за быстрый ответ. Я новичок в этом деле. Поэтому могу задавать нубские вопросы. В каких конкретно файлах стилей находится установка отступа и положение превью на странице. А так же посмотрел сайт, там не нашел как сделать перелистывание фото по нажатию на край фото.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

 

как сделать перелистывание фото по нажатию на край фото.

Это называется "галерея", и на странице, что я Вам дал есть пример.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Asilis

На этой странице я на примеры нажимаю и там тоже нет перелистывания по краю фото -

IMAGE GALLERY

Galleries are created from elements who have the same "rel" tag.

m5.jpg m6.jpg m9.jpg

<a href="assets/5.jpg" class="lightbox" rel="group1"><img src="assets/m5.jpg" /></a>
<a href="assets/6.jpg" class="lightbox" rel="group1"><img src="assets/m6.jpg" /></a>
<a href="assets/9.jpg" class="lightbox" rel="group1" title="Lorem ipsum dolor sit amet..."><img src="assets/m9.jpg" /></a>

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Asilis

Есть вариант помочь мне с установкой lightbox2 на DLE? Или хотя бы lightbox с возможностью перелистывания по краю картинки?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Asilis

Ладно, с этим всем разобрался сам. Прошу подсказать код PHP чтобы картинки переключались по клику на фото?

А так же где можно отключить цикличность галереи?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Asilis

АУ!! Есть кто в помощь???

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...