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

Поделиться41Вс, 14 Фев 2010 18:13:06

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

ВНИМАНИЕ!!!
тем кто уже установил себе Shadowbox
и он вдруг на днях перестал работать
сменился адрес расположения плагина

теперь вместо

<link rel="stylesheet" type="text/css" href="http://www.shadowbox-js.com/source/shadowbox.css" />
<script type="text/javascript" src="http://www.shadowbox-js.com/source/shadowbox.js"></script>

вот так

<link rel="stylesheet" type="text/css" href="http://www.shadowbox-js.com/build/shadowbox.css" />
<script type="text/javascript" src="http://www.shadowbox-js.com/build/shadowbox.js"></script>

(в основном скрипте (пост №35) я уже поменял адреса)
так же помнеялась и система превью на более быструю, так что имеет смысл скрипт из 35 поста установить у себя заново

+1

Instagram drumman.1

Поделиться42Пн, 22 Фев 2010 00:12:45

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

ФОТОКАТАЛОГ

возможно кто-то уже самостоятельно догадался, что можно создавать целые каталоги фотографий на персональных Старницах (pages)
с применением всей красоты Lytebox,
но все же распишу механизм:

главное условие естественно, что у вас в html-верх будет стоять сам плагин Lytebox

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

заходите в Администрирование -> Страницы

создаёте страницу с названием, допустим Фото и в HTML размещаете ссылки на ваши фотографии
http://ваш форум.ru/pages/foto

ссылка вида:

<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 1"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 1" width="100" /></a>

title="Название" - название фото, которое будет отбражаться при отображении/воспроизведении

rel="lyteshow[vacation]" - вариант воспроизведения, в данном примере слайд-шоу (про варианты читайте в первом посте этой темы)

href="ссылка на ваше фото 1" - ссылка на фото

src="ссылка на ваше фото 1" - сюда вставляем ту же ссылку на фото, но здесь она для создания миниатюры

width="100" - ширина миниатюры

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

<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 1"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 1" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 1"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 1" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 2"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 2" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 3"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 3" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 4"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 4" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 5"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 5" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 6"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 6" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 7"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 7" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 8"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 8" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 9"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 9" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 10"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 10" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 11"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 11" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 12"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 12" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 13"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 13" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 14"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 14" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 15"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 15" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 16"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 16" width="100" /></a>
<a title="Название" rel="lyteshow[vacation]" href="ссылка на ваше фото 17"><img style="border: none; top:2px; margin:5px;" src="ссылка на ваше фото 17" width="100" /></a>

ну, а всё остальное оформление можно сотворить насколько вам позволяет фантазия и знание HTML

ссылки созданных вами каталогов можно выводить тоже ввиде минатюры

0

Instagram drumman.1

Поделиться43Вт, 23 Фев 2010 17:32:53

Автор: Komoff
Заслуженный
Зарегистрирован: Сб, 24 Мар 2007
Сообщений: 139
Уважение: +9
Позитив: +3
Пол: Мужской
Последний визит:
Вс, 12 Дек 2010 16:12:44

вопрос снимается

Отредактировано Komoff (Вт, 23 Фев 2010 17:41:09)

0

Поделиться44Вт, 23 Фев 2010 18:34:47

Автор: Komoff
Заслуженный
Зарегистрирован: Сб, 24 Мар 2007
Сообщений: 139
Уважение: +9
Позитив: +3
Пол: Мужской
Последний визит:
Вс, 12 Дек 2010 16:12:44

Romych написал(а):

Фотогалерея в посте v.2или всё в одном флаконе(галерея, слайд-шоу, фрейм)
в html- верх загружаем:
Код:

Код:

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

в html-низ:

Код:

Код:<!--Фотогалерея-->
<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}
.postmyimg { border:1px solid #000; margin-left:5px; }
</style>
<script type="text/javascript">
function addSpoiler_img(str,from,internal){
    var pos=0,pos2=0,newpos=0
    if((pos=str.indexOf("[myimg]",from))==-1) return str;
    if((pos2=str.indexOf("[/myimg]"),pos+8)==-1) return str;
    newpos=str.indexOf("[myimg]",pos+8)
    if(newpos<pos2 && newpos!=-1) str=addSpoiler_img(str,pos+8,true)
    if((pos2=str.indexOf("[/myimg]",pos+8))==-1) return str;
    txt = str.substring(pos+7,pos2);
    if((sepPos=txt.indexOf("|",0))==-1) return str;
    txtrest = txt.substring(sepPos+1,txt.length);
    if((sepPos2 = txtrest.indexOf("|",0))==-1) return str;
    str=str.substring(0,pos)+makeSpoiler_img(
    txt.substring(0,sepPos),
    txtrest.substring(0,sepPos2),
    txtrest.substring(sepPos2+1,txtrest.length)
    )+str.substring(pos2+8,str.length);
    if( str.indexOf("[myimg]")!=-1 && internal==false) str=addSpoiler_img(str,0,false)
    return str
}   

function makeSpoiler_img(txt1,txt2,txt3){
    txt='<a href="'+txt1+'" rel="'+txt2+'" title="'+txt3+'"><img class="postmyimg" img src="'+txt1+'" border="0" width="100"/></a>';
    return txt;
    }
    
 function tag_urlg()
 {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.getElementById("pun-main").getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content"){
var post=elm[x]
post.innerHTML=addSpoiler_img(post.innerHTML,0,false)}}
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(18).innerHTML="<img src='/i/blank.gif' title='Создать фотогалерею' id='button-gallery' onclick=\"tag_urlg()\">"
</script>

кнопка уже в скрипте
теги имеют вид - [myimg]ссылка |lytebox[vacation]|описание[/myimg]
кнопка

вставил. Кнопка в форме ответа не появилась...

Отредактировано Komoff (Вт, 23 Фев 2010 18:36:26)

0

Поделиться45Ср, 24 Фев 2010 03:32:16

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

Komoff написал(а):

вставил. Кнопка в форме ответа не появилась...

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

+1

Instagram drumman.1

Поделиться46Пт, 26 Фев 2010 13:49:29

Автор: Komoff
Заслуженный
Зарегистрирован: Сб, 24 Мар 2007
Сообщений: 139
Уважение: +9
Позитив: +3
Пол: Мужской
Последний визит:
Вс, 12 Дек 2010 16:12:44

О, ещё одна победа человеческого разума...
~~А нельзя ли по умолчанию поставить "lyteshow[vacation]"?~~ Сам догадался!
Большое спасибо, Мастер Romych.

Отредактировано Komoff (Пт, 26 Фев 2010 13:57:45)

0

Поделиться47Пт, 5 Мар 2010 19:42:05

Автор: Rock-Mania
Заслуженный
Зарегистрирован: Вт, 2 Фев 2010
Сообщений: 47
Уважение: +3
Позитив: +1
Пол: Мужской
Последний визит:
Ср, 11 Авг 2010 15:24:00

Всё работает.Добавляется много возможностей на форум.Только вот вопрос по поводу скрипта из поста №35,при введении ссылки на видео с youtube, открывается во фрейме целиком страница с этим видео.Ввожу

Код:

http://www.youtube.com/watch?v=eM0Ycs7TjQ4

Подскажите,что не так.

Отредактировано Rock-Mania (Пт, 5 Мар 2010 19:53:25)

0

Поделиться48Пт, 5 Мар 2010 21:15:27

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

Rock-Mania написал(а):

Подскажите,что не так.

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

вместо

http://www.youtube.com/watch?v=eM0Ycs7TjQ4

так

http://www.youtube.com/v/eM0Ycs7TjQ4

0

Instagram drumman.1

Поделиться49Пт, 5 Мар 2010 21:38:49

Автор: Rock-Mania
Заслуженный
Зарегистрирован: Вт, 2 Фев 2010
Сообщений: 47
Уважение: +3
Позитив: +1
Пол: Мужской
Последний визит:
Ср, 11 Авг 2010 15:24:00

Romych
Спасибо! Теперь то что надо.Может есть ещё какие нибудь нюансы.Раскажите,если есть такие.

0

Поделиться50Пт, 5 Мар 2010 21:45:46

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

Rock-Mania написал(а):

Может есть ещё какие нибудь нюансы.Раскажите,если есть такие.

хм. на вскидку не вспомню, но если что-то всплывёт подробно опишу

0

Instagram drumman.1

Поделиться51Сб, 6 Мар 2010 23:30:08

Автор: Rock-Mania
Заслуженный
Зарегистрирован: Вт, 2 Фев 2010
Сообщений: 47
Уважение: +3
Позитив: +1
Пол: Мужской
Последний визит:
Ср, 11 Авг 2010 15:24:00

Блин, всё работало отлично,потом перестали превьюшка видео показывать, а потом еле-еле в админ панель попал, на форум не могу попасть.Убираю всё из ХТМЛ-верха, форум работает, вставлю, всё кирдык.

Починил. Так и не понял в чём дело.Вставляю отсюда верха-глюк.Всавил из исходника страницы которая в примере http://testing.1bb.ru/viewtopic.php?id=1#p59
Всё заработало.Мистика,или я просто устал. Вот только превью не работает.Ну да ладно,потом разберусь.~~Кстати, тока заметил, на странице образце тоже превьюшки пропали.~~А щас появились.
Ещё вопрос: на странице для примера превьюшки красивые, а у меня просто квадратные были.Чего не хватает?

Отредактировано Rock-Mania (Вс, 7 Мар 2010 00:38:31)

0

Поделиться52Пн, 8 Мар 2010 13:18:35

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

Rock-Mania написал(а):

Ещё вопрос: на странице для примера превьюшки красивые, а у меня просто квадратные были.Чего не хватает?

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

<style type="text/css">
#button-shadow {background-image:url('http://img707.yfrog.com/img707/5896/shadowbox.png'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat}
</style>
<script type="text/javascript">
function addSpoiler_bul(str,from,internal){
var pos=0,pos2=0,newpos=0
if((pos=str.indexOf("[bulka]",from))==-1) return str;
if((pos2=str.indexOf("[/bulka]"),pos+8)==-1) return str;
newpos=str.indexOf("[bulka]",pos+8)
if(newpos<pos2 && newpos!=-1) str=addSpoiler_bul(str,pos+8,true)
if((pos2=str.indexOf("[/bulka]",pos+8))==-1) return str;
txt = str.substring(pos+7,pos2);
if((sepPos=txt.indexOf("|",0))==-1) return str;
txtrest = txt.substring(sepPos+1,txt.length);
if((sepPos2 = txtrest.indexOf("|",0))==-1) return str;
str=str.substring(0,pos)+makeSpoiler_bul(
txt.substring(0,sepPos),
txtrest.substring(0,sepPos2),
txtrest.substring(sepPos2+1,txtrest.length)
)+str.substring(pos2+8,str.length);
if( str.indexOf("[bulka]")!=-1 && internal==false) str=addSpoiler_bul(str,0,false)
return str}

function makeSpoiler_bul(txt1,txt2,txt3){
txt='<a rel="shadowbox;'+txt3+'" href="'+txt1+'" title="'+txt2+'" class="previewlink"><img src="http://img4.imageshack.us/img4/5717/1e502.gif"><font color="maroon">'+txt2+'</font></a>';
return txt;
}

Shadowbox.init({
language: 'en',
players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});

var bubbleImagePath = 'http://i082.radikal.ru/1002/a7/93e2e551a76c.png';

function tag_urlsh()
{var FoundErrors = '';
var enterURL = prompt("Введите ссылку на флэш, видео, изображение или сайт", "http://");
var enterTITLE = prompt("Введите описание\n оно будет отображаться при просмотре", "нечто");
var enterTITLE2 = prompt("Введите размер окна, например height=600;width=800\n\n height - высота; width - ширина\n\n для сохранения оригинального размера, оставьте это поле пустым", "height=600;width=800");
if (!enterURL)
{FoundErrors += " " + error_no_url;}
if (FoundErrors)
{alert("Ошибка!" + FoundErrors);
return;}
insert("[bulka]" + enterURL + "|" + enterTITLE + "|" + enterTITLE2 + "[/bulka]");}

if((document.URL.indexOf("viewtopic.php")!=-1) || (document.URL.indexOf("post.php")!=-1)){
elm=document.getElementById("pun-main").getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content"){
var post=elm[x]
post.innerHTML=addSpoiler_bul(post.innerHTML,0,false)}}
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(16).innerHTML="<img src='/i/blank.gif' title='Разместить контент (swf,flv,img,html)' id='button-shadow' onclick=\"tag_urlsh()\">"
</script>

+1

Instagram drumman.1

Поделиться53Ср, 10 Мар 2010 16:08:41

Автор: Rock-Mania
Заслуженный
Зарегистрирован: Вт, 2 Фев 2010
Сообщений: 47
Уважение: +3
Позитив: +1
Пол: Мужской
Последний визит:
Ср, 11 Авг 2010 15:24:00

Romych
Спасибо! Всё работает,превьюшка красивая.Вот только превью Ю-Туба открывается просто с белым фоном и надписями всякими.Ещё бы вот это подкорректировать и вообще красота была бы.
Эх,Плюсы пока не могу ставить, так что пока просто человеческое спасибо.

Отредактировано Rock-Mania (Ср, 10 Мар 2010 16:09:56)

0