FancyBox - галерея изображений

[nar200]

Инструкция по установке галереи FancyBox на форум.
Смотрим Демо
1. Скачиваем архив с файлами, разархивируем
2. Закачиваем к себе на форум fancybox.png через Менеджер картинок
3. Открываем файл fancybox.css и меняем fancybox.png на свою ссылку (10 раз), сохраняем
4. Закачиваем к себе на форум через Менеджер картинок файлы:

• fancybox.js
• fancybox.css
• fancy.js
• mousewheel.js

5. Открываем шаблон overall_header.html и перед </head> вставляем следующее:

Код: Выделить всё

<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="ссылка на fancybox.js" type="text/javascript"></script>
<script src="ссылка на fancy.js" type="text/javascript"></script>
<script src="ссылка на mousewheel.js" type="text/javascript"></script>
<link type="text/css" href="ссылка на fancybox.css" rel="stylesheet" />

Следующим шагом будет добавление BB кодов.

BB код для одиночных изображений.
Использование BBCode

Код: Выделить всё

[th]{URL1}[/th]

Замена HTML

Код: Выделить всё

<a href="{URL1}" class="gallery"><a href="{URL1}" class="gallery"><img style="border:0 solid black; max-width:200px; max-height:120px;" src="{URL1}" /></a>

Здесь border - обводка, black - цвет обводки, если обводка вам не нужна, то ставьте 0px.
max-width - ширина миниатюры, max-height - высота миниатюры.

Текст подсказки

Код: Выделить всё

[th]URL изображения[/th]

BB код для галереи.
Использование BBCode

Код: Выделить всё

[thg]{URL1}[/thg]

Замена HTML

Код: Выделить всё

<a href="{URL1}" rel="group"><img src="{URL1}" style="max-width:200px; max-height:120px;" /></a>&nbsp

Текст подсказки

Код: Выделить всё

[thg]URL изображения[/thg]

Установка FancyBox на ваш форум закончена.
Инструкция by nar200®[plus1][/plus1]

Скрытый текст. Необходимо зарегистрироваться.

[kuprin]

Я все вроде так сделал, но у меня почему-то миниатюра в сообщении получается ровно такого же размера, как ив оригинале.
Что я не так сделал?

[GoDFaTHeR]

"nar200" писал(а):

max-width - ширина миниатюры, max-height - высота миниатюры.

[CornerAdmin]

Банальная ошибка в этом месте:

Код: Выделить всё

<img style="border: 0px solid black;" style="max-width:200px; max-height:120px;" src="{URL1}" />

прописано два style="...", браузер воспринимает только первый, второй игнорирует.
Чтобы замена начала работать достаточно сделать так:

Код: Выделить всё

<a href="{URL1}" class="gallery"><img style="border:0 solid black; max-width:200px; max-height:120px;" src="{URL1}" /></a>

[GoDFaTHeR]

Поправил первый пост

[kuprin]

И, все-таки, может кто-то объяснить, что значит кнопка "галерея"?
С одиночными фото все получается- выглядить красочно и современно, спасибо огромное, но вот вторая кнопка- я не могу понять как ей использовать

[GoDFaTHeR]

"kuprin" писал(а):

но вот вторая кнопка- я не могу понять как ей использовать

я думаю там должно быть как минимум 2 картинки что бы считаться галереей и ссылка должна быть уже не на саму картинку, а на страницу где много картинок

[Alice]

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



Я в одном форуме в порядке эксперимента поставила FancyBox, но не совсем так, как описано в первом посте.
Я не стала создавать ВВ-коды th и thg.
А просто изменила код замены к одному из имевшихся ВВ-кодов для вставки картинок на код замены для thg.
(В том форуме был ВВ-код imgshow, отображавший картинку как миниатюру и при клике по миниатюре открывавший новое окно с полноразмерным изображением).
Ну, и все вроде, работает. Т.е. картинки, вставленные на странице темы с помощью ВВ-кода imgshow отображаются, как если бы они были вставлены с помощь ВВ-кода thg, при клике по картинке создается новый слой, в котором видно большую картинку.
Несколько картинок на странице, вставленных с помощью ВВ-кода imgshow, можно листать в этом слое вперед и назад. Например, как тут: http://forum-okna.ru/index.php?s=93e8aa ... st&p=75860

[kuprin]

"Alice" писал(а):

Непонятно только, а зачем два ВВ-кода - для одиночных изображений и для галереи? Автор темы может объяснить?

автора уже давно на форуме нет, похоже, 2010 год сообщение )))
Так то галерея классная, показываются фото красиво, а вот со вторым кодом ничего не понятно )))

[Alice]

И, все-таки, может кто-то объяснить, что значит кнопка "галерея"?
С одиночными фото все получается- выглядить красочно и современно, спасибо огромное, но вот вторая кнопка- я не могу понять как ей использовать

Пытаюсь разобраться, что притащил nar200.
Симпатичная игрушка, но прихожу к выводу, что первый ВВ-код th - вообще лишний. Как и цифра 1 в коде использования и замены после URL
Хватит thg. Назвать его можно вместо thg как угодно.
Например, image.
То есть если Вы, например, создадите ВВ-код

Код: Выделить всё

[image]{URL}[/image]

Код: Выделить всё

<a href="{URL}" rel="group"><img src="{URL}" style="max-width:200px; max-height:120px;" /></a>

Или если Вы использовали ВВ-код th и замените у него код замены на код замены к thg, то получите нужный результат.

Больше того, ни thg, ни th в предложенном варианте не пригодны для вставки картинок из php галереи, если она подключена на Вашем форуме.
Попробуйте засунуть в эти ВВ-коды ссылку на изображение из форумской галереи и получите при нажатии на миниатюру вместо большого изображения белое окно с "кракозябами" кода вместо картинки.
Я так понимаю, эта игрушка, в том виде, в котором она принесена в форум техподдержки, не в состоянии переварить ссылку на картинку, которая не заканчивается на расширения jpg, png, gif. А ссылки на изображения в форумских галереях таких расширений не имеют, поэтому попытка запихнуть в описанные ВВ-коды ссылку на изображение в форумской галерее приведет к глюкам игрушки.
Так что если под галереей понимать подключенную к форуму галерею изображения, то это никак не может быть "BB код для галереи".

Еще неизвестно, как она ссылки с расширением jpeg переваривает, это я пока не проверяла. Может, тоже глючит.
Так что пока эту игрушку не доработали напильником под любые ссылки на картинки, в подсказке к ВВ-коду лучше написать, что он только для ссылок, заканчивающихся на jpg, png, gif.

Автор не может молчать 1 час 2 минуты 16 секунд и добавляет ...

"kuprin" писал(а):

вторым кодом ничего не понятно )))

Это с первым кодом непонятно, нафига одиночный код. А со вторым все ясно.
Он для того, чтоб картинки в сообщениях смотреть и листать туда-сюда. Примерно так: http://hockeyprim.80lvl.ru/viewtopic.php?p=2020#p2020
"Галерея" тут ничего общего с форумской галереей не имеет. "Галерея" - это просто несколько изображений на одной странице, которые с помощью атрибута rel в ссылках задано сгруппировать в одну группу: http://xiper.net/collect/js-plugins/gallery/fancybox