Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум поддержки IPB.SU > Поддержка модификаций > Фотогалерея и слайд-шоу в постах (lytebox)


Автор: Romych Май 9 2010, 10:39
думаю многим пользователям хотелось бы представить свои фотоработы в виде фотогалереи,
с эффектным затемнением фона вокруг изображения и слайд-шоу
итак:


Фотогалерея

устанавливаем
в Админцентр -> Скины и Шаблоны -> HTML шаблоны -> Настройка HTML (напротив нужного названия скина) -> Topic View Section -> Header

в самый верх:


Код
<script type="text/javascript" language="javascript" src="http://www.dolem.com/lytebox/lytebox_demo.js"></script>
<link rel="stylesheet" href="http://www.dolem.com/lytebox/lytebox.css" type="text/css" media="screen" />


в Админцентр -> Скины и Шаблоны -> HTML шаблоны -> Настройка HTML (напротив нужного названия скина) -> Topic View Section -> Footer

загружаем скрипт:

Код
<!--Фотогалерея-->
<script type="text/javascript">
var fot, html, result;
var div = document.getElementsByTagName("div")
for( i=0; i < div.length; i++ )
{
if(div[i].className == 'postcolor')
{
if(div[i].innerHTML.indexOf("[foto]")!=-1 && div[i].innerHTML.indexOf("[/foto]")!=-1)
{
 html = div[i].innerHTML;
 fot = /\[foto\]([0-9a-zA-Z\-\_\+\(\)\&\?\%$\#\~\.\'\"\=\^\;\:\,\{\}\/]{1,110})[\|]([^\[]{1,110})\[\/foto\]/g
 result = html.replace(fot, "<a href='$1' rel='lyteshow[vacation]' title='$2'><img style='border: 10px; top:2px; margin:5px;' img src='$1' border='10' width='100'/></a>")

 div[i].innerHTML = result}}}
</script>


только внимание!!! если вы используете скрипт YouTube и Универсальный mp3 плеер,
то Фотогалерею надо устанавливать с ними одновременно, из-за того, что эти скрипты содержат регулярное выражение,
подробнее обо этом можете почитать в теме - http://ipboard.net/index.php?showtopic=2954

и ещё одно замечание на будущее, чтобы увидеть фотогалерею во всей красе, нужно дождаться пока страничка её содержащая загрузится полностью, иначе при нажатии на фото они будут открываться в отдельном окне


кнопка для работы будет в соседней теме - Заменяем стандартные кнопки в форме ответа, на кнопки изображения (аналог IPB 2хх) - user posted image

и наконец - http://testing.ipb.su/index.php?showtopic=4&st=0&#entry17

Автор: agentvon Май 9 2010, 11:47
Очень полезный мод.
Поставил - все работает.

Автор: Salik Май 9 2010, 16:46
упорно при вставке этого кода в footer выдаёт что сервер перегружен

Автор: Сергей Май 9 2010, 16:53
Ничего полезного в данной модификации не заметил.

Автор: Romych Май 9 2010, 16:56
QUOTE (Salik @ Сегодня, 16:46)
упорно при вставке этого кода в footer выдаёт что сервер перегружен


опять слэши съелись,
а так попробуйте:

CODE
<!--Фотогалерея-->
<script type="text/javascript">
var fot, html, result;
var div = document.getElementsByTagName("div")
for( i=0; i < div.length; i++ )
{
if(div[i].className == 'postcolor')
{
if(div[i].innerHTML.indexOf("[foto]")!=-1 && div[i].innerHTML.indexOf("[/foto]")!=-1)
{
 html = div[i].innerHTML;
 fot = /\\[foto\\]([0-9a-zA-Z\\-\\_\\+\\(\\)\\&\\?\\%\\$\\#\\~\\.\\'\\"\\=\\^\\;\\:\\,\\{\\}\\/]{1,110})[\\|]([^\\[]{1,110})\\[\\/foto\\]/g
 result = html.replace(fot, "<a href='$1' rel='lyteshow[vacation]' title='$2'><img style='border: 10px; top:2px; margin:5px;' img src='$1' border='10' width='100'/></a>")

 div[i].innerHTML = result}}}
</script>

Автор: Romych Май 9 2010, 16:58
QUOTE (Сергей @ Сегодня, 16:53)
Ничего полезного в данной модификации не заметил.

рад за вас

Автор: Romych Май 10 2010, 13:58
как я уже говорил, кнопка для фотогалереи находится в теме
http://ipboard.net/index.php?showtopic=2994

по нажатию на кнопку запускается обработчик тега - tag_foto()

тег имеет вид [foto]X|Y[/foto]
где X - это ссылка на изображение,
а Y - это описание, которое будет отображаться при проигрывании слайд-шоу и при наведении курсора на миниатюру

т.е. выглядит это так - [foto]http://cache.photosight.ru/img/f/908/3740344_large.jpg|девушка чёрно-белое[/foto]

Автор: agentvon Май 10 2010, 15:03
QUOTE (Сергей @ Май 9 2010, 16:53)
Ничего полезного в данной модификации не заметил.

А зря. Посмотрите как здорово смотрится http://viagraforever.*цензура*/index.php?showtopic=913.

Автор: Сергей Май 10 2010, 15:08
Причём здесь ваш форум и наш сервис?

Автор: agentvon Май 10 2010, 15:24
QUOTE (Сергей @ Май 10 2010, 15:08)
Причём здесь ваш форум и наш сервис?

вот именно причем?
я продемонстрировал через свой форум работу данного мода.

Автор: Salik Май 30 2010, 18:48
не совсем понял, как с ютубом использовать?

Автор: Romych Май 31 2010, 01:09
QUOTE (Salik @ Вчера, 18:48)
не совсем понял, как с ютубом использовать?

я уже объяснял, но ещё раз повторюсь, во всех этих скриптах (Ютуб, фотогалерея, униерсальный mp3 плеер содержится строка с так называемым регулярным выражением, в котором присутствуют бэк сплэши \\

у скрипта для YouTube она выглядит так:
CODE
r = /\\[youtube\\]([0-9a-zA-Z\\-\\_]{11})\\[\\/youtube\\]/g


у фотогалереи вот так:
CODE
fot = /\\[foto\\]([0-9a-zA-Z\\-\\_\\+\\(\\)\\&\\?\\%\\$\\#\\~\\.\\'\\"\\=\\^\\;\\:\\,\\{\\}\\/]{1,110})[\\|]([^\\[]{1,110})\\[\\/foto\\]/g


НО, если эти скрипты устанавливать по отдельности, то в установленном из них первом при сохранении съедапются эти бэк сплэши \\
т.е. строка с регулярным выражением после сохранения выглядит уже так (YouTube):

CODE
r = /\[youtube\]([0-9a-zA-Z\-\_]{11})\[\/youtube\]/g


фотогалерея:

CODE
fot = /\[foto\]([0-9a-zA-Z\-\_\+\(\)\&\?\%$\#\~\.\'\"\=\^\;\:\,\{\}\/]{1,110})[\|]([^\[]{1,110})\[\/foto\]/g


поэтому в скрипте приходится сплэши дублировать
и поэтому же рекомендую скрипты, содержащие строку с регулярными выражениями устанавливать одновременно!!!

т.е.
в
Админцентр -> Скины и Шаблоны -> HTML шаблоны -> Настройка HTML (напротив нужного названия скина) -> Topic View Section -> Footer

CODE
<!--YouTube-->
<script type="text/javascript">
var r, html, result;
var div = document.getElementsByTagName("div")
for( i=0; i < div.length; i++ )
{
if(div[i].className == 'postcolor')
{
if(div[i].innerHTML.indexOf("[youtube]")!=-1 && div[i].innerHTML.indexOf("[/youtube]")!=-1)
{
 html = div[i].innerHTML;
 r = /\\[youtube\\]([0-9a-zA-Z\\-\\_]{11})\\[\\/youtube\\]/g
 result = html.replace(r, "<br><embed src='http://www.youtube.com/v/$1' type='application/x-shockwave-flash' wmode='transparent' width='425' height='350'></embed><br>")

 div[i].innerHTML = result}}}
</script>
<!--Фотогалерея-->
<script type="text/javascript">
var fot, html, result;
var div = document.getElementsByTagName("div")
for( i=0; i < div.length; i++ )
{
if(div[i].className == 'postcolor')
{
if(div[i].innerHTML.indexOf("[foto]")!=-1 && div[i].innerHTML.indexOf("[/foto]")!=-1)
{
 html = div[i].innerHTML;
 fot = /\\[foto\\]([0-9a-zA-Z\\-\\_\\+\\(\\)\\&\\?\\%\\$\\#\\~\\.\\'\\"\\=\\^\\;\\:\\,\\{\\}\\/]{1,110})[\\|]([^\\[]{1,110})\\[\\/foto\\]/g
 result = html.replace(fot, "<a href='$1' rel='lyteshow[vacation]' title='$2'><img style='border-top:1px solid #BBB; border-bottom:1px solid #BBB; padding:5px; background:#ccc; top:2px; margin:5px;' img src='$1' width='100'/></a>")

 div[i].innerHTML = result}}}
</script>


кстати, добавил в скрипт фотогалереи рамку вокруг каждой миниатюры, выглядит по моему эффектнее
http://testing.ipb.su/index.php?showtopic=4

Автор: Salik Май 31 2010, 09:59
Romych,, спасибо.
еще вопрос, скрипт должен показывать в слайд-шоу просто приаттаченные картинки или ещё те, что в img тегах?

Автор: Romych Май 31 2010, 20:57
QUOTE (Salik @ Сегодня, 09:59)
еще вопрос, скрипт должен показывать в слайд-шоу просто приаттаченные картинки или ещё те, что в img тегах?

нет, только те что в тегах [foto]

Автор: Max Faxtor Июл 27 2010, 12:35
Спасибо! Классно)) Только цветовую палитру пришлось заново ставить

Автор: Max Faxtor Июл 29 2010, 15:39
Romych, заметил только сейчас, что тэг youtube перестал работать. Делаю все как Вы говорите, упорно пишет:
Извините, но в данный момент сервер сильно перегружен.
Приносим свои извинения, просим Вас зайти немного позже.

Автор: Romych Июл 29 2010, 23:52
QUOTE (Max Faxtor @ Июл 27 2010, 12:35)
цветовую палитру пришлось заново ставить

какую цветовую палитру пришлось менять и из-за чего?
из-за цвета рамок миниатюр фотогалереи?

Автор: Max Faxtor Июл 30 2010, 09:30
Цветовую палитру на странице ответа http://ipboard.net/index.php?showtopic=2495
С третьего раза получилось, все работает rolleyes.gif

Автор: Одиночка <3 Авг 5 2010, 00:23
Зачем придумывать мод который нужно устанавливать вместе с другими одновременно? Да ну нафиг всё менять...

Автор: Romych Авг 10 2010, 22:21
Цитата (Одиночка <3 @ Авг 5 2010, 00:23)
Зачем придумывать мод который нужно устанавливать вместе с другими одновременно? Да ну нафиг всё менять...

ну, для тех у кого мозги есть и руки откуда надо растут, установка модов не составляет труда,
а вот издержки движка, который из скриптов обратные слэши съедает из-за чего срипты, эти слэши содержащие, приходится устанавливать одновременно, не моя в том вина wink.gif

Автор: SenLite Авг 12 2010, 12:14
Romych, а нельзя как нибудь отредактировать скрипт, или возможно переделать, чтоб это работало не только для [FOTO], но и для [IMG], только без слайд шоу, а просто открытием в этой красивой рамке

smile.gif

Автор: Romych Авг 13 2010, 00:20
Цитата (SenLite @ Авг 12 2010, 12:14)
Romych, а нельзя как нибудь отредактировать скрипт, или возможно переделать, чтоб это работало не только для [FOTO], но и для [IMG], только без слайд шоу, а просто открытием в этой красивой рамке

smile.gif

сделать просто открытие изображения без автоматического слайд-шоу можно, а вот тегам [IMG] присвоить свойства фотогалереи lytebox не удастся

Автор: SenLite Авг 23 2010, 20:25
"сделать просто открытие изображения без автоматического слайд-шоу"

подскажите как, пожалуйста. Буду очень благодарен

Автор: SenLite Авг 24 2010, 22:25
+ когда добавляю вот это:

Код
<!--YouTube-->
<script type="text/javascript">
var r, html, result;
var div = document.getElementsByTagName("div")
for( i; i < div.length; i++ )
{
if(div[i].className == 'postcolor')
{
if(div[i].innerHTML.indexOf("[youtube]")!=-1 && div[i].innerHTML.indexOf("[/youtube]")!=-1)
{
html = div[i].innerHTML;
r = /\[youtube\]([0-9a-zA-Z\-\_]{11})\[\/youtube\]/g
result = html.replace(r, "<br><embed src='http://www.youtube.com/v/$1' type='application/x-shockwave-flash' wmode='transparent' width='425' height='350'></embed><br>")

div[i].innerHTML = result}}}
</script>

<!--Фотогалерея-->
<script type="text/javascript">
var fot, html, result;
var div = document.getElementsByTagName("div")
for( i; i < div.length; i++ )
{
if(div[i].className == 'postcolor')
{
if(div[i].innerHTML.indexOf("[foto]")!=-1 && div[i].innerHTML.indexOf("[/foto]")!=-1)
{
html = div[i].innerHTML;
fot = /\[foto\]([0-9a-zA-Z\-\_\+\(\)\&\?\%\$\#\~\.\'\"\=\^\;\:\,\{\}\/]{1,110})[\|]([^\[]{1,110})\[\/foto\]/g
result = html.replace(fot, "<a href='$1' rel='lyteshow[vacation]' title='$2'><img style='border-top:1px solid #BBB; border-bottom:1px solid #BBB; padding:5px; background:#ccc; top:2px; margin:5px;' img src='$1' width='100'/></a>")

div[i].innerHTML = result}}}
</script>

пишет что сервер перегружен sad.gif

Автор: Romych Авг 25 2010, 00:23
Цитата (SenLite @ Авг 24 2010, 22:25)
+ когда добавляю вот это:
пишет что сервер перегружен sad.gif

у вас произошло то, о чём я тут неоднократно писал
в строке с регулярным выражением съелись обратные слэши, вот такие \\
т.е. при сохранении в администрировании ваши одиночные слэши съедаются окончательно, поэтому их приходится дублировать не \ а \\

у вас так:

Цитата
r = /\[youtube\]([0-9a-zA-Z\-\_]{11})\[\/youtube\]/g


а должно быть:

Цитата
r = /\\[youtube\\]([0-9a-zA-Z\\-\\_]{11})\\[\\/youtube\\]/g


и в другом скрипте
у вас так:

Цитата
fot = /\[foto\]([0-9a-zA-Z\-\_\+\(\)\&\?\%\$\#\~\.\'\"\=\^\;\:\,\{\}\/]{1,110})[\|]([^\[]{1,110})\[\/foto\]/g


а должно быть:

Цитата
fot = /\\[foto\\]([0-9a-zA-Z\\-\\_\\+\\(\\)\\&\\?\\%\\$\\#\\~\\.\\'\\"\\=\\^\\;\\:\\,\\{\\}\\/]{1,110})[\\|]([^\\[]{1,110})\\[\\/foto\\]/g


а лучше даже так:

Цитата
fot = /\\[foto\\](.*?)[\\|]([^\\[]{1,110})\\[\\/foto\\]/g


насчёт второго вопроса по-терпите немного, я сейчас переписываю скрипт фотогалереи, чтоб можно было вручную выбирать режим слайд-шоу или одиночного фото

Автор: SenLite Авг 26 2010, 20:22
Большое спасибо smile.gif буду ждать

Автор: Assada Сен 3 2010, 19:52
Цитата
<script type="text/javascript" language="javascript" src="http://katalog-fbb.narod.ru/litetbox/lytebox.js"></script>
<link rel="stylesheet" href="http://katalog-fbb.narod.ru/litetbox/lytebox.css" type="text/css" media="screen" />


ссылочки не работают, А также при нажатии на кнопку ничего у меня не происходит, нету обработчик тега - tag_foto() в Post: Code Buttons & Post Text area

типа
Код
<script type="text/javascript">
function tag_video()
{var FoundErrors = '';
var enterURL   = prompt("Введите ссылку на видео с YouTube, Rutube, Vimeo.com или Dailymotion.com", "");

if (!enterURL) {
FoundErrors += " " + error_no_url;}

if (FoundErrors) {
alert("Error!"+FoundErrors);
return;}

doInsert("[video]"+enterURL+"[/video]", "", false);}
</script>


Где его найти? И обновите пожалуйста ссылки)

Автор: Romych Сен 3 2010, 20:01
Цитата (Assada @ Сен 3 2010, 19:52)
Цитата
<script type="text/javascript" language="javascript" src="http://katalog-fbb.narod.ru/litetbox/lytebox.js"></script>
<link rel="stylesheet" href="http://katalog-fbb.narod.ru/litetbox/lytebox.css" type="text/css" media="screen" />


ссылочки не работают, А также при нажатии на кнопку ничего у меня не происходит, нету обработчик тега - tag_foto()
doInsert("[video]"+enterURL+"[/video]", "", false);}
</script>[/CODE]

Где его найти? И обновите пожалуйста ссылки)

Assada

замените это

Цитата
<script type="text/javascript" language="javascript" src="http://katalog-fbb.narod.ru/litetbox/lytebox.js"></script>
<link rel="stylesheet" href="http://katalog-fbb.narod.ru/litetbox/lytebox.css" type="text/css" media="screen" />


на это

Цитата
<script type="text/javascript" language="javascript" src="http://www.dolem.com/lytebox/lytebox_demo.js"></script>
<link rel="stylesheet" href="http://www.dolem.com/lytebox/lytebox.css" type="text/css" media="screen" />

Автор: Romych Сен 15 2010, 18:14
Цитата (SenLite @ Авг 23 2010, 20:25)
"сделать просто открытие изображения без автоматического слайд-шоу"

подскажите как, пожалуйста. Буду очень благодарен

SenLite

в общем я сделал выбор при создании фотогалереи,
правда этот самый выбор придётся вводить вручную,
хотя по умолчанию, в данный момент стоит одиночное фото, если вручную лень

фотогалерея посторена на Lytebox, а у Lytebox есть несколько вариантов отображения, это:

а) lytebox - для одиночного фото

б) lytebox[vacation] - для группы фото (сделано по умолчанию)

в) lyteshow[vacation] - слайд-шоу

г) lyteframe - фрейм ( для ссылок на любой сайт, хотя его использовать я бы не рекомендовал)

принцип какой? вы нажимаете на кнопку user posted image

выплывает диалоговое окно
где вы вводите ссылку на изображение,
а так же вписываете нужный вам вариант отображения

user posted image

и последним пунктом описание фото, которое будет видно отображаться при воспроизведении слайд-шоу

в каждом пункте, кроме ссылки уже стоят вариант для тех кому лень вручную, что-либо вводить им просто тупо надо ввести ссылку на изображение и 2 раза нажать OK

в итоге манипуляций с диалоговым окном у вас в поле ответа должно появиться нечто вот такое
Цитата
[foto=lytebox[vacation]]ссылка на фото|описание[/foto]


теги немного видоизменились из-за добавления ещё одного ввода данных, но вы не волнуйтесь, я в скрипт добавил автозамену старых тегов на новые, так что будут работать как ранее созданные галереи, так и вновь созданные, и ничего вручную переделывать не придётся

итак

Фотогалерея v.2


установка

1
сам плагин остаётся тот же устанавливается он в Админцентр -> Скины и Шаблоны -> HTML шаблоны -> Настройка HTML (напротив нужного названия скина) -> Topic View Section -> Header (указан в первом посте этой темы, дублировать не буду дабы не было путаницы)

2
скрипт устанавливаем как всегда в
Админцентр -> Скины и Шаблоны -> HTML шаблоны -> Настройка HTML (напротив нужного названия скина) -> Topic View Section -> Footer

Скрытый текст
Для просмотра этого блока необходима регистрация


3
обработка тега Админцентр -> Скины и Шаблоны -> HTML шаблоны -> Настройка HTML (напротив нужного названия скина) -> Сообщения (Post Screen Sections) -> get_javascript (редактировать)

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

//-->
</script>

и перед ним добавляем следующее:

Код
function tag_foto()
{var FoundErrors = '';
var enterURL   = prompt("Введите ссылку на фото или сайт (для фрейма)", "http://");
var enterTITLE = prompt("Введите вариант: lytebox - для одиночного фото\n lytebox[vacation] - для группы фотографий\n lyteshow[vacation] - для слайд-шоу\n lyteframe - для сайта", "lytebox[vacation]");
var enterTITLE2 = prompt("Введите описание, оно будет отображаться при просмотре", "Моё фото");
if (!enterURL) {
FoundErrors += " " + error_no_url;}
if (!enterTITLE) {
FoundErrors += " " + error_no_title;}
if (FoundErrors) {
alert("Error!"+FoundErrors);
return;}
doInsert("[foto="+enterTITLE+"]"+enterURL+"|"+enterTITLE2+"[/foto]", "", false);}


4
саму кнопку добавляем в Админцентр -> Скины и Шаблоны -> HTML шаблоны -> Настройка HTML (напротив нужного названия скина) -> Сообщения (Post Screen Sections) -> Post: Code Buttons & Post Text area (редактировать)

Цитата
<img class='codebuttons' title='Создать фотогалерею' alt='Создать фотогалерею' src='http://i058.radikal.ru/1005/8c/3aa73bd4abf0.png' onclick='tag_foto()'/>
 


для тех кому полюбился метод установки "Всё в одном" прилагаю версию 3.1 wink.gif

Скрытый текст
Для просмотра этого блока необходима регистрация

Автор: Salik Сен 16 2010, 16:05
а можно прикрепить галерею к тегу img или хотябы просто всплывающую рамку?

Powered by Invision Power Board (//www.invisionboard.com)
© Invision Power Services (//www.invisionpower.com)