Неофициальная техническая поддержка MyBB

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Неофициальная техническая поддержка MyBB » Новые возможности форума » Lytebox (фотогалерея и слайд-шоу)


Lytebox (фотогалерея и слайд-шоу)

Сообщений 1 страница 2 из 2

1

Автор: Duka
Реализовал для MyBB такой некий плеер для просмотра изображений, весь скрипт загрузил к себе на сервер, вам лишь останется вставить в хтмл-верх 2 строчки скрипта.

Установка(очень щепетильный процесс)
1) установка самого скрипта.

Код:
<script type="text/javascript" language="javascript" src="http://i.rusff.ru/f/ru/rusff/lytebox.js"></script>
<link rel="stylesheet" href="http://i.rusff.ru/f/ru/rusff/lytebox.css" type="text/css" media="screen" />

2) Прикручиваем скрипт к нужному объекту
Допустим у вас в объявлении стоит ссылка на картинку:

Код:
<a href="http://www.sunhome.ru/UsersGallery/102005/26163622.JPG"" title="Наша первая картинка">Картинка1</a>

Добавляем в тег "a" следующий параметр:
     2.1) К одной картинке

Если вы хотите применить к эффекту 1 картинку, то ставим в тег "a" следующее:

Код:
rel="lytebox"

Т.е. должно получиться так:

<a href="http://www.sunhome.ru/UsersGallery/102005/26163622.JPG"" title="Наша первая картинка" rel="lytebox">Картинка1</a>

Тогда эффект будет лишь для одной картинки.

2.2) К нескольким картинкам
Добавляем таким же образом:

Код:
rel="lytebox[vacation]"

Ставите все картинки подряд. Таким образом у при клике на картинку скрипт посчитает кол-во картинок, и добавит к просмотрщику кнопки Вперед, Назад
2.3) Слайдшоу
Добавляем:

Код:
rel="lyteshow[vacation]"

Этот эффект добавит в плеер кнопку Пауза. Плеер с некоторой периодичностью будет переключать все ваши картинки.
2.4) Добавляем фрейм (для опытных)
Добавляем:

Код:
rel="lyteframe"

Пример фрейма:

<a href="http://www.google.com" rel="lyteframe" title="Гугл поиск" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>

Есть некоторые замечания по поводу браузера IE 6.0 SP2, если будут проблемы, попробую оптимизировать скрипт и к нему.
Кнопки и скрипт выполнены в стандартном темном варианте.
Если немного разобраться(а разбираться тут нечего), то вы можете немного преобразить свой форум.

Что в планах:
1) Реализация цветовой схемы между цветами: grey, red, green, blue, gold индивидуально для каждого форума.
  2) Оптимизация к приаттаченым изображениям на форуме( прикрепленные изображения)

Где посмотреть демо?
Здесьфотогалерея и слайд-шоу)

0

2

Фотогалерея и слайдшоу в постах (с использованием Lytebox) © Romych

в html-верх ставим:

<script type="text/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-низ:

<!--Фотогалерея v.2-->
<style type="text/css">
#button-gallery {background-image:url('http://img502.imageshack.us/img502/9378/cameraromych.png'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat}
</style>
<script language="javascript">
function tag_foto()
{var FoundErrors = '';
var enterURL = prompt("Введите ссылку на изображение или сайт", "http://");
var enterTITLE = prompt("Введите вариант:\n lytebox - для одиночного фото\n lytebox[vacation] - для группы фотографий\n lyteshow[vacation] - для слайд-шоу\n lyteframe - для сайта", "lytebox[vacation]");
var enterTITLE2 = prompt("Введите описание", "моё фото");
if (!enterURL)
{FoundErrors += " " + error_no_url;}
if (FoundErrors)
{alert("Ошибка!" + FoundErrors);
return;}
insert("[myimg]" + enterURL + "|" + enterTITLE + "|" + enterTITLE2 + "[/myimg]");}
if ((document.URL.indexOf("viewtopic.php")!=-1) || (document.URL.indexOf("post.php")!=-1)){
elm=document.getElementsByTagName("div")
for(x in elm){
if(elm[x].className=="post-content")
{
post = elm[x].innerHTML;
foto = /\[myimg\](.*?)\|(.*?)\|(.*?)\[\/myimg\]/g
elm[x].innerHTML  = elm[x].innerHTML.replace(foto, "<a href='$1' rel='$2' title='$3'><img style='border-top:1px solid #BBB; border-bottom:1px solid #BBB; padding:5px; background:#ccc; top:2px; margin:5px;' img src='$1' class='postmyimg' width='100'/></a>")
}}}
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(18).innerHTML="<img src='/i/blank.gif' title='Создать фотогалерею' id='button-gallery' onclick=\"tag_foto()\">"
</script>

в панели кнопок появится дополнительная для создания фотогалереи или слайд шоу - http://img502.imageshack.us/img502/9378/cameraromych.png

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

http://s001.radikal.ru/i195/1001/36/503be7581f7e.jpg

всё у вас получится

ПРИМЕР работы ;)

0


Вы здесь » Неофициальная техническая поддержка MyBB » Новые возможности форума » Lytebox (фотогалерея и слайд-шоу)