Powered by Invision Power Board
Здравствуйте Гость ( Вход | Регистрация ) Выслать повторно письмо для активации

Forum Rules Правила раздела

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

Страницы: (2) [1] 2   ( Перейти к первому непрочитанному сообщению ) Reply to this topicStart new topicStart Poll

> Фотогалерея и слайд-шоу в постах (lytebox)
Romych
Отправлено: Май 9 2010, 10:39
Quote Post


Странник
Group Icon

Группа: Пользователи
Сообщений: 174
Пользователь №: 2 237
Регистрация: 21-Апреля 10
Member Offline

Репутация: 42




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


Фотогалерея

устанавливаем
в Админцентр -> Скины и Шаблоны -> 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 плеер,
то Фотогалерею надо устанавливать с ними одновременно, из-за того, что эти скрипты содержат регулярное выражение,

подробнее обо этом можете почитать в теме - Универсальный mp3 плеер, работает спрямым ссылками на mp3

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


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

и наконец - ПРИМЕР РАБОТЫ

Это сообщение отредактировал Romych - Сен 3 2010, 20:03


--------------------
Top
agentvon
Отправлено: Май 9 2010, 11:47
Quote Post


Новичок
Group Icon

Группа: Пользователи
Сообщений: 20
Пользователь №: 2 154
Регистрация: 18-Марта 10
Member Offline

Репутация: 0




Очень полезный мод.
Поставил - все работает.
Top
Salik
Отправлено: Май 9 2010, 16:46
Quote Post


Salamander
Group Icon

Группа: Пользователи
Сообщений: 310
Пользователь №: 395
Регистрация: 14-Декабря 07
Из: Ижевск
Member Offline

Репутация: 2




упорно при вставке этого кода в footer выдаёт что сервер перегружен


--------------------
Top
Сергей
Отправлено: Май 9 2010, 16:53
Quote Post


<? echo"Кодер" ?>
Group Icon

Группа: Пользователи
Сообщений: 1 610
Пользователь №: 1 411
Регистрация: 5-Апреля 09
Member Offline

Репутация: 75




Ничего полезного в данной модификации не заметил.
Top
Romych
Отправлено: Май 9 2010, 16:56
Quote Post


Странник
Group Icon

Группа: Пользователи
Сообщений: 174
Пользователь №: 2 237
Регистрация: 21-Апреля 10
Member Offline

Репутация: 42




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>


--------------------
Top
Romych
Отправлено: Май 9 2010, 16:58
Quote Post


Странник
Group Icon

Группа: Пользователи
Сообщений: 174
Пользователь №: 2 237
Регистрация: 21-Апреля 10
Member Offline

Репутация: 42




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

рад за вас


--------------------
Top
Romych
Отправлено: Май 10 2010, 13:58
Quote Post


Странник
Group Icon

Группа: Пользователи
Сообщений: 174
Пользователь №: 2 237
Регистрация: 21-Апреля 10
Member Offline

Репутация: 42




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

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

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

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


--------------------
Top
agentvon
Отправлено: Май 10 2010, 15:03
Quote Post


Новичок
Group Icon

Группа: Пользователи
Сообщений: 20
Пользователь №: 2 154
Регистрация: 18-Марта 10
Member Offline

Репутация: 0




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

А зря. Посмотрите как здорово смотрится на моем форуме.
Top
Сергей
Отправлено: Май 10 2010, 15:08
Quote Post


<? echo"Кодер" ?>
Group Icon

Группа: Пользователи
Сообщений: 1 610
Пользователь №: 1 411
Регистрация: 5-Апреля 09
Member Offline

Репутация: 75




Причём здесь ваш форум и наш сервис?
Top
agentvon
Отправлено: Май 10 2010, 15:24
Quote Post


Новичок
Group Icon

Группа: Пользователи
Сообщений: 20
Пользователь №: 2 154
Регистрация: 18-Марта 10
Member Offline

Репутация: 0




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

вот именно причем?
я продемонстрировал через свой форум работу данного мода.
Top
Salik
Отправлено: Май 30 2010, 18:48
Quote Post


Salamander
Group Icon

Группа: Пользователи
Сообщений: 310
Пользователь №: 395
Регистрация: 14-Декабря 07
Из: Ижевск
Member Offline

Репутация: 2




не совсем понял, как с ютубом использовать?


--------------------
Top
Romych
Отправлено: Май 31 2010, 01:09
Quote Post


Странник
Group Icon

Группа: Пользователи
Сообщений: 174
Пользователь №: 2 237
Регистрация: 21-Апреля 10
Member Offline

Репутация: 42




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>


кстати, добавил в скрипт фотогалереи рамку вокруг каждой миниатюры, выглядит по моему эффектнее
ПРИМЕР


--------------------
Top
Salik
Отправлено: Май 31 2010, 09:59
Quote Post


Salamander
Group Icon

Группа: Пользователи
Сообщений: 310
Пользователь №: 395
Регистрация: 14-Декабря 07
Из: Ижевск
Member Offline

Репутация: 2




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


--------------------
Top
Romych
Отправлено: Май 31 2010, 20:57
Quote Post


Странник
Group Icon

Группа: Пользователи
Сообщений: 174
Пользователь №: 2 237
Регистрация: 21-Апреля 10
Member Offline

Репутация: 42




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

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


--------------------
Top
Max Faxtor
Отправлено: Июл 27 2010, 12:35
Quote Post


Пользователь
Group Icon

Группа: Пользователи
Сообщений: 166
Пользователь №: 1 146
Регистрация: 13-Декабря 08
Member Offline

Репутация: нет




Спасибо! Классно)) Только цветовую палитру пришлось заново ставить

Это сообщение отредактировал Max Faxtor - Июл 27 2010, 13:33


--------------------
Top
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Topic Options Страницы: (2) [1] 2  Reply to this topicStart new topicStart Poll