Рейтинг Ролевых Ресурсов

Не про что

Объявление

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

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


Вы здесь » Не про что » JavaScript » Lytebox на форуме


Lytebox на форуме

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

1

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

Установка.
Чтобы установить себе на форум галерею изображений, достаточно поставить:
В ХТМЛ-низ

Код:
<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" />

И туда, где собственно Вы хотели бы увидеть галерею:

Код:
<a href="http://s46.radikal.ru/i112/0912/a6/505d8a865599.jpg" rel="lyteshow[vacation]">1 изображение</a>
<a href="http://i065.radikal.ru/0912/80/811bc72fbef6.jpg" rel="lyteshow[vacation]">2 Изображение</a>
<a href="http://i076.radikal.ru/0912/89/ad4a4db044ac.jpg" rel="lyteshow[vacation]">3 Изображение</a>

Заполнение.
1 часть трогать не нужно. Установите её без изменений.
Наполнять Вы будете только вторую часть кода.
Во-первых, добавлять можно неограниченное число изображений. Для этого достаточно лишь размножать строчку:

Код:
<a href="http://s46.radikal.ru/i112/0912/a6/505d8a865599.jpg" rel="lyteshow[vacation]">1 изображение</a>

Во-вторых, вместо слов "1 изображение", "2 изображение" и так далее можно писать что угодно. Применим любой HTML.
В-третьих, можно настроить стиль самой галереи.
Для этого давайте внимательно рассмотрим код:

<a href="http://s46.radikal.ru/i112/0912/a6/505d8a865599.jpg" rel="lyteshow[vacation]" >1 изображение</a>

Посмотрите на выделенное красным слово. Именно вместо него можно поставить один из следующих вариантов:
rel="lytebox" - если у Вас одно изображение на форуме, тогда ставьте это.
rel="lytebox[vacation]" - аналогично, но если у Вас два или более изображений.
rel="lyteshow[vacation] - Вы можете сделать Слайд шоу из Ваших картинок. То есть автоматически одна картинка будет сменяться следующей. Можно остановить этот процесс, запустить снова, перемотать назад/вперёд и так далее. Все кнопку будут доступны уже при просмотре слайд шоу.
rel="lyteframe" - создаст фрейм (что такое фрейм - узнавайте в любом поисковике).
В-четвёртых, для каждого изображения можно поставить описание. Для этого просто добавьте в код то, что выделено красным ниже:

<a href="http://s46.radikal.ru/i112/0912/a6/505d8a865599.jpg" rel="lyteshow[vacation]" title="Описание">1 изображение</a>

0

2

Галлерея изображений на форум. Romych

ХТМЛ-верх:

Код:
<script type="text/javascript" src="http://help4us.ru/include/js/jquery.js"></script>
<script type="text/javascript" src="http://itforweb.com/articles/jquery_lightbox/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="http://itforweb.com/articles/jquery_lightbox/js/jquery.lightbox.packed.js"></script>
<style type="text/css">
  .postmyimg { width:130px; top:2px; margin:5px; padding:0; list-style-type:none; }
  .postmyimg { border:1px solid #000; margin-left:5px; }
  .postmyimg {cursor: pointer;}
</style>

ХТМЛ-низ:

Код:
<script type="text/javascript"> 
  $(document).ready(function(){ 
  $('.postmyimg').lightbox(); 
  }); 
  </script>

<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(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;
    str=str.substring(0,pos)+makeSpoilerr_img(txt.substring(0,sepPos),txt.substring(sepPos+1,txt.length))+str.substring(pos2+8,str.length)
    if( str.indexOf("[myimg]")!=-1 && internal==false) str=addSpoiler_img(str,0,false)
    return str
}

function makeSpoilerr_img(txt1,txt2){
    txt='<img class="postmyimg lightbox-enabled"  src="'+txt1+'"  alt="'+txt2+'">';
    return txt;
}

if(document.URL.indexOf("viewtopic.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)}}
</script>

ХТМЛ-форма ответа:

Код:
<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; height:26px; width:100%}
</style>
<script type="text/javascript">
function tag_urlg()
{var FoundErrors = '';
var enterURL = prompt("Введите ссылку на изображение", "http://");
var enterTITLE = prompt("Введите описание", "Моё фото");
if (!enterURL)
{FoundErrors += " " + error_no_url;}
if (FoundErrors)
{alert("Ошибка!" + FoundErrors);
return;}
insert("[myimg]" + enterURL + "|" + enterTITLE + "[/myimg]");}
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(19).innerHTML="<img src='/i/blank.gif' title='фотогалерея' id='button-gallery' onclick=\"tag_urlg()\">"
</script>

После установки в форме ответа добавляется кнопка для создания галлереи. Работает по принципу вставки изображения в пост.

0

3

Пример галлереи:

[myimg]http://s003.radikal.ru/i204/1001/ca/742f9166494e.jpg|Изображение 1[/myimg]
[myimg]http://s005.radikal.ru/i209/1001/cf/264db31e13e3.jpg|Изображение 2[/myimg]
[myimg]http://s48.radikal.ru/i120/1001/8a/0ba47920a4cb.jpg|Изображение 3[/myimg]
[myimg]http://s11.radikal.ru/i183/1001/ad/bd82a1de360f.jpg|Изображение 4[/myimg]

0


Вы здесь » Не про что » JavaScript » Lytebox на форуме