Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Корзина » Lytebox на форуме (слайдшоу и фотогалерея)


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

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

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>

+2

2

заманчивая штучка! :D  а посмотреть где нибудь можно?

0

3

http://tps.bbmy.ru/
Пока что тут в объявлении стоит.

0

4

rps
а как можно сделать так чтоб участники форума могли создавать свои альбомы и загружать туда фото?Или это невозможно?

0

5

Olysa
Пока думаю никак. Чтобы создать альбом, его надо где-то сохранить (в базу данных на каком-то сервере). Поэтому скриптом тут не поможешь.

0

6

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

ФОТОГАЛЕРЕЯ В ПОСТАХ

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

ВНИМАНИЕ, если у вас уже стоит на форуме "Обновленный спойлер" от mkusherа,
то переходите сразу ко второму пункту

2. html- верх:

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

хотя возможно первый плагин (lightbox) у вас уже стоит от уважаемого rps (он здесь приведён в первом посте)

3. туда же html- верх:

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

4. в html-низ:

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

и теперь кнопка позволяющая работать с фотогалереей

5. 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; 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>

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

Отредактировано Romych (Ср, 26 Май 2010 13:55:43)

+2

7

Romych, всё здорово но не хочет работать с этим скриптом

Код:
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      if( $(this).attr("value")=='Открыть объявление' ) $(this).attr("value","Закрыть");
      else $(this).attr("value","Открыть объявление");
      return false;
    });
  });
</script>

Я его использую для скрытия объявления и так же для спойлера одновременно.
Картинки заливаются, отображаются но не открываются.

0

8

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

всё здорово но не хочет работать с этим скриптом

всё дело в разнице версий jquery-1.2.6.pack.js и jquery-1.3.2.js

попробуй вместо своей - <script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script> (или точнее убрать её)

поставить - <script type="text/javascript" src="http://itforweb.com/articles/jquery_lightbox/js/jquery-1.2.6.pack.js"></script>

должно заработать, и галерея, и спойлер

0

9

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

должно заработать, и галерея, и спойлер

Спойлер работает а галерея нет. Да ладно, если будет нужна галерея то можно эту кнопку с объявы и убрать.

0

10

Romych, а можно убрать описание фото из скрипта и как ?
Фотогалерея отличная, но при нажатии на описание открывается графический файл в новом окне,
чего бы не хотелось .

0

11

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

Romych, а можно убрать описание фото из скрипта и как ?Фотогалерея отличная, но при нажатии на описание открывается графический файл в новом окне,чего бы не хотелось .

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

0

12

Обьясню. Если я правильно понимаю,то когда фото открывается в Lytebox  ,его нельзя скопировать.  Хочется как-то защитить фото от копирования.
Или можно сделать что-то типа watermarkа.

Отредактировано Domenika (Вт, 12 Янв 2010 20:24:46)

0

13

Domenika
Ватермарка рисуется только в Фотошопе или аналогичных программах.
О копировании: защититься от него полностью не возможно в приципе. Поскольку например я могу сделать простой скриншот во время запущенного лайтбокса.

0

14

Скажите, пожалуйста, а возможно ли отображение таким способом не только картинок, но и текстовой информации, активных ссылок? Было бы очень удобно на стартовой, в таблице. А то порой все не помещается, пользователи жалуются на то, что слишком громоздкие таблы.

0

15

Temari-sama
Возможно, но не этим скриптом.

0

16

Temari-sama написал(а):

Скажите, пожалуйста, а возможно ли отображение таким способом не только картинок, но и текстовой информации, активных ссылок? Было бы очень удобно на стартовой, в таблице. А то порой все не помещается, пользователи жалуются на то, что слишком громоздкие таблы.

я работаю в этом направлении, только моя цель выводить разный контент в посте по принципу Lytebox
это будет фото, фреймы сайтов, флэш анимация и видео в разных форматах
как это примерно будет выглядеть можно посмотреть в ЭКСПЕРИМЕНТАЛЬНОМ ВАРИАНТЕ

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

0

17

наконец-то добрался до второй версии ;)
эту версию Lytebox rps приводил в первом посте этой темы
плюсы по сравнению с предыдущей моей версией:

1. фреймворк уже не обязателен (без разницы, есть у вас jquery или нет и какой версии)
2. подписи под фото ярче, а сами фото приобрели рамки при просмотре
3. возможность делать слайд-шоу и вставлять фреймы сайтов

итак:

Фотогалерея в посте 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}
</style>
<script type="text/javascript">
function addGallery(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=addGallery(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)+makeGallery(
    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=addGallery(str,0,false)
    return str}   

function makeGallery(txt1,txt2,txt3){
    txt='<a href="'+txt1+'" rel="'+txt2+'" title="'+txt3+'"><img style="border-top: 1px solid #BBB; border-bottom: 1px solid #BBB; padding:5px; background:#ccc; top:2px; margin:5px;" class="postmyimg" img src="'+txt1+'" border="0" width="100"/></a>';
    return txt;}
    
 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.getElementById("pun-main").getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content"){
var post=elm[x]
post.innerHTML=addGallery(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_foto()\">"
</script>

кнопка уже в скрипте

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

кнопка  [реклама вместо картинки]

теперь подробнее о том, как работать с галереей:

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

1.  вставить ссылку на изображение (здесь всё понятно)

http://s001.radikal.ru/i195/1001/63/7a08d595405e.jpg

2. вот здесь ВНИМАТЕЛЬНО читаем варианты, которые будем вносить

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

а) lytebox - одиночное фото
б) lytebox[vacation] - группа фото (сделал по умолчанию)
в) lyteshow[vacation] - слайд-шоу
г) lyteframe - фрейм

3. вводим описание фото или сайта (здесь тоже всё ясно)

http://s002.radikal.ru/i198/1001/a8/83752fbf485e.jpg

ну, и напоследок ПРИМЕР РАБОТЫ ;)

Отредактировано Romych (Вт, 8 Июн 2010 01:06:48)

+4

18

Romych очень здорово,спасибо большое за интересный скрипт.Установила и все работает,единственное только проблема в том что не получается слелать группу фото и слайд-шоу.Возможно я не так ссыкли на сами фото вставляю?Их нужно через пробел или слитно?

0

19

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

Возможно я не так ссыкли на сами фото вставляю?Их нужно через пробел или слитно?

а дайте ссылочку на ваш сайт, я посмотрю как вы делаете

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

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

по умолчанию уже стоит группа фото - lytebox[vacation]

Отредактировано Romych (Ср, 20 Янв 2010 09:50:44)

0

20

Romych извиняюсь за беспокойство,до меня дошло как делать и все получается.Спасибо еще раз за отличный скрипт.

0


Вы здесь » Единый форум поддержки » Корзина » Lytebox на форуме (слайдшоу и фотогалерея)