Установка скрипта highslide на чистый форум.

**Aleshka** » 11.07.2013, 17:49

Инструкция установки плагина highslide на чистый форум (проверял в форуме на Denwer и на своем форуме)
Установка плагина Highslide в Галерею от JoteRuso

1)

highslide.zip: (407.88 КБ) Скачиваний: 3784

качаем архив, распаковываем в корень форума
2)по пути /forum/style/prosilver/template/ открываем файл "overall_header.html"

находим строчку

Код: Выделить всё: <link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

Добавляем после

Код: Выделить всё: <link href="./highslide/highslide.css" rel="stylesheet" type="text/css" media="screen, projection" />

находим строчку

Код: Выделить всё: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

перед ней добавляем

Код: Выделить всё: <script type="text/javascript" src="./highslide/easing_equations.js"></script> <script type="text/javascript" src="./highslide/highslide-with-gallery.js"></script> <script type="text/javascript" src="./highslide/highslide.config.js" charset="utf-8"></script>

вуаля, скрипт установлен.

4)

как добавить скрипт к вложенным изображениям

(на денвере понадобился другой код, не знаю почему, на моем форуме функционирует отлично)
находите файл и открываете файл "attachment.html", который находится по пути /forum/styles/prosilver/template/

находим строчки

Код: Выделить всё:  <div class="highslide-gallery"> <a href="{_file.U_DOWNLOAD_LINK}/{_file.DOWNLOAD_NAME}" class="highslide" onclick="return hs.expand(this, config1)"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a> <div class="highslide-heading"></div> <div class="allattach"><em>{_file.COMMENT}</em></div> </div>

заменяем на

Код: Выделить всё:  <div class="highslide-gallery"> <a href="{_file.U_DOWNLOAD_LINK}/{_file.DOWNLOAD_NAME}" class="highslide" onclick="return hs.expand(this, config1)"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a> <div class="highslide-heading"></div> <div class="allattach"><em>{_file.COMMENT} </em></div> </div>

5)

как добавить скрипт к стандартному bb-коду [img][\img]

находим и открываем файл "bbcode.php" который расположен по пути /forum/includes/

находим строчку

Код: Выделить всё: 'img' => '<img src="$1" alt="' . $user->lang['IMAGE'] . '" />',

и заменяем на

Код: Выделить всё: 'img' => '<a href="$1" class="highslide" onclick="return hs.expand(this, config1 )"><img src="$1" style="max-width: 400px;" alt="' . $user->lang['IMAGE'] . '" title="' . $user->lang['IMAGE'] . '" /></a>',

6)

если просто хотим вставить фотографию со скриптом в страницу

на месте где хотим вставить фотографию прописываем такой код

Код: Выделить всё: <div class="highslide-gallery"> <ul> <li> <a href="http://увеличенное_изображение" class="highslide" title="подпись по увеличенной фотографией" onclick="return hs.expand(this, config1 )"> <img src="http://уменьшенное_изображение" alt=""/> </a> </li> </ul> </div>

PS: за всё говорим спасибо Sumanai
Если у вас не заработало пишите, возможно я что-то пропустил.

**boofoo** » 11.07.2013, 19:20

Все заработало большое спасибо :clap:

Добавлено спустя 3 часа 11 минут:
Все работает,все хорошо,но вот не отображается панель для переключения между изображениями(и других функций)

Спойлер

Firebug говорит мол путь неправильный к изображению,как правильно прописать путь? сами изображения лежат(на локалке) "forum.ru\www\styles\prosilver\template\highslide\graphics".
Пробовал прописать вот так : ./style/prosilver/template/highslide/graphics/image.gif
Но всеравно не видно и в firebug вот такое:

Спойлер

**Sumanai** » 11.07.2013, 22:38

4 пункт инструкции выполнили?

**boofoo** » 11.07.2013, 22:42

Sumanai, да вот так:

Спойлер

: ScreenShot 1454 11.07.13 22-41-01.gif (2.4 КБ) Просмотров: 9663

**Sumanai** » 11.07.2013, 23:22

Ага, инструкция не пашет.
Вариант такой:
Отменяете действия по пункту 4, вместо него перемещаете папку /graphics/ в папку /styles/prosilver/theme/

**Aleshka** » 11.07.2013, 23:25

Забавно получается, у меня на форуме через Denver (его только сегодня установил) всё пашет :smile:

и на моем сайте тоже :oops:

Сейчас проверил, ваша инструкция тоже работает :smile:

, ну раз она более стабильна меняю на неё.

**boofoo** » 11.07.2013, 23:33

Sumanai:Вариант такой:
Отменяете действия по пункту 4, вместо него перемещаете папку /graphics/ в папку /styles/prosilver/theme/

Вообще перестает работать все.

Aleshka:Сейчас проверил, ваша инструкция тоже работает

как так то))

**Sumanai** » 11.07.2013, 23:42

boofoo:Вообще перестает работать все.

Лады.
Попробуйте не перемещать, а копировать.
Если не выйдет, тогда вот так (лучше делать с нуля)

Спойлер

1) highslide.zip качаем архив, распаковываем в корень форума
2)из распакованной папки "highslide" переносим файл "highslide.css" и папку "graphics" по пути /forum/style/prosilver/theme/
по этому же пути находим файл "stylesheet.css" и добавляем в конец строчку @import url("highslide.css"); Не выполняем.
3)по пути /forum/style/prosilver/template/ открываем файл "overall_header.html"
находим строчку

Код: Выделить всё: <link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

Добавляем после

Код: Выделить всё: <link href="./highslide/highslide.css" rel="stylesheet" type="text/css" media="screen, projection" />

Находим

Код: Выделить всё: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

перед ней добавляем

Код: Выделить всё: <script type="text/javascript" src="./highslide/highslide-with-gallery.js"></script> <script type="text/javascript" src="./highslide/highslide.config.js" charset="utf-8"></script>

Далее по инструкции.

**Aleshka** » 11.07.2013, 23:57

Sumanai, последнее самое нормальное и правильное , пусть будет оно, а я старался под себя делал :smile:

не судьба значит )))

**boofoo** » 12.07.2013, 00:05

Sumanai, Заработало :smile:

спасибо,помогла вторая инструкция(с нуля).

Добавлено спустя 3 минуты 37 секунд:
Но есть одна проблема,счетчик изображений,считает все изображения на странице форума(для перехода с одного изображения к другому),можно ли как то сделать,что бы он считал изображения только данного сообщения,в котором выложили эти изображения?

**Sumanai** » 12.07.2013, 00:28

boofoo:можно ли как то сделать,что бы он считал изображения только данного сообщения,в котором выложили эти изображения?

Нужно курочить яваскрипт, а я в нём ни в зуб ногой.

**oddis** » 11.09.2013, 04:06

замена строчек в attachment.html вашего скрипта к вложенным изображениям выдавал ошибку, работает скрипт

Код: Выделить всё: <dd class="highslide-gallery"><a href="{_file.U_DOWNLOAD_LINK}/{_file.DOWNLOAD_NAME}" class="highslide" onclick="return hs.expand(this, { slideshowGroup: '{_file.THUMB_POST_ID}' })"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a><div class="highslide-caption">{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</div></dd>

Добавлено спустя 12 минут 4 секунды:
для bbcode [img][\img] правильнее будет так:

Код: Выделить всё: 'img' => '<a href="$1" class="highslide" onclick="return hs.expand(this, config1 )"><img src="$1" style="max-width:400px; max-height:400px;" alt="' . $user->lang['IMAGE'] . '" title="' . $user->lang['IMAGE'] . '" /></a>',

спасибо за проделанную работу :smile: