плагин для фотогалереи и слайдшоу неожиданно получил продолжение,
автор плагина Markus F. Hay после 3 летнего перерыва неожиданно решил возобновить работу,
последней версией было Lytebox v3.22 аж 2007 года выпуска, в этом уходящем году Маркус родил версию Lytebox v5.4
что в ней нового?
упростились настройки дизайна всплывающих окон (теперь легко выбрать цвет фона затемнения вокруг фото при просмотре),
появилась возможность вставлять флэш ролики и фреймы на сайты,
возможность добавлять длинные комментарии к изображениям ( с применением любых бб-кодов),
возможность вставлять всплывающие при наведении курсора подсказки в сообщениях ( с применением любых бб-кодов в 5-х вариантах оформления),
я попытался дать возможность пользователям по максимуму использовать возможности плагина, в работе мне помог Паша rps
итак:
Lytebox v5.4
в Настройки html-верх подгружаем плагин и его стиль
а лучше конечно их скачать и перезалить к себе на форум через Администрирование -> Файлы
в html-верх добавляем стиль оформления галереи
в html-низ скрипт:
Код:<!--Lytebox v5.4-->
<script language="javascript">
var elm, p; var y = 0; var z = 0;
var nwtm=document.URL; var gr=nwtm.slice(nwtm.indexOf('=')+1);
$('td#button-hide').before('<td style=\'background-image:url("http://img502.imageshack.us/img502/9378/cameraromych.png")\' onclick="return changeVisibility(\'myimg\', this)"><a href="javascript:void(0)" class="lytetip" data-lyte-options="changeTipCursor:false" style="text-decoration:none;" data-tip="С помощью этой кнопки вы можете создать в вашем сообщении фотогалерею, слайдшоу и даже разместить флэшролик "><img src="/i/blank.gif"></a></td>');
if ((document.URL.indexOf("viewtopic.php") != -1) || (document.URL.indexOf("post.php") != -1)) {
elm= document.getElementsByTagName("div");
for (y in elm) {
if (elm[y].className == "post-body") {
p = elm[y].getElementsByTagName("p");
for (z in p) {
if(!p[z] || !p[z].innerHTML) continue;
var post = p[z].innerHTML;
if (post.indexOf(".swf") != -1) {
foto = /\[myimg=(.*?)\](.*?)\.swf\|(.*?)\[\/myimg\]/gi;
post = post.replace(foto, "<a href='$2.swf' data-lyte-options='$1' class='lytebox' data-title='$3'><img style='border:1px solid #bbbbbb; padding:5px; background:#e8e8e8; top:2px; margin:5px;' src='http://uploads.ru/i/P/Z/b/PZbGK.png' width='80' alt='$3'/></a>");
}
if (post.indexOf("[/myimg]") != -1) {
foto = /\[myimg=(.*?)\](.*?)\|(.*?)\[\/myimg\]/gi;
post = post.replace(foto, "<span class='figure'><figure><a href='$2' data-lyte-options='$1' class='lytebox' data-title='$3'><img src='$2' width='100' alt='$3'/><figcaption>$3</figcaption></a></figure></span>");
}
if(post.indexOf("[/mygroup]")!= -1) {
foto = /\[mygroup=(.*?)\](.*?)\|(.*?)\|(.*?)\[\/mygroup\]/gi
post = post.replace(foto, "<span class='figure'><figure><a href='$2' data-description='$4' data-lyte-options='$1' class='lytebox' data-title='$3'><img src='$2' width='100' alt='$3'/><figcaption>$3</figcaption></a></figure></span>");
}
if (post.indexOf("[/mytool]") != -1) {
tool = /\[mytool=(.*?)\](.*?)\|(.*?)\[\/mytool\]/gi;
post = post.replace(tool, "<a href='javascript:void(0)' data-lyte-options='$1' class='lytetip' data-tip='$3'>$2</a>");
}
p[z].innerHTML = post;
}}}}
</script>
<div class="my" id="myimg" style="display:none;width:255px;padding:8px;position:relative;margin-top:-42%;margin-left:35%;">
<div align="center"><strong>Выберите вариант</strong></div><br>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="var enterURL=prompt('Введите ссылку на изображение', 'http://');var enterTITLE=prompt('Введите описание оно будет отображаться при воспроизвдении', 'описание');insert('[myimg=]' + enterURL + '|' + enterTITLE + '[/myimg]'); return changeVisibility('myimg', this)"><img src="http://uploads.ru/t/g/C/O/gCOq0.png" title="одиночное фото"></a>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="return changeVisibility('group', this);"><img src="http://uploads.ru/t/O/5/3/O53b8.png" title="группа фотографий с ручным перелистыванием"></a>
<div class="my" align="center" id="group" style="display:none;width:260px;padding:8px;position:absolute;margin-top:-42%;margin-left:-3%;" class="container">
<strong>Группа фото с комментариями</strong><br>
<table width="auto">
<tr><td style="border-style:none;">Ссылка на изображение: <input maxlength=100 size=30 value="http://" id="adres"></td></tr>
<tr><td style="border-style:none;">Введите описание, оно будет отображаться при воспроизвдении: <input maxlength=100 size=30 value="описание" id="opis"></td></tr>
<tr><td style="border-style:none;">Комментарий к фото: <textarea rows="5" value="комментарий" id="koment" style="width: 100%;"></textarea></td></tr>
</table>
<button type="button" onclick="var ur=document.getElementById('adres').value;var op=document.getElementById('opis').value;var kom=document.getElementById('koment').value;insert('[mygroup=group:'+gr+' titleTop:true navTop:true]'+ur+'|'+op+'|'+kom+'[/mygroup]');changeVisibility('group');changeVisibility('myimg');">Опубликовать</button> <button type="button" onclick="changeVisibility('group');changeVisibility('myimg');">Отмена</button></div>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="var enterURL=prompt('Введите ссылку на изображение', 'http://');var enterTITLE=prompt('Введите описание оно будет отображаться при воспроизвдении', 'описание');insert('[myimg=slide:true group:'+gr+']' + enterURL + '|' + enterTITLE + '[/myimg]'); return changeVisibility('myimg', this)"><img src="http://uploads.ru/t/r/A/t/rAtHf.png" title="слайд шоу"></a>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="return changeVisibility('framer', this);"><img src="http://uploads.ru/t/S/9/L/S9LDa.png" title="фрейм или флэш ролик"></a>
<div class="my" align="center" id="framer" style="display:none;width:260px;padding:8px;position:absolute;margin-top:-42%;margin-left:-3%;" class="container">
<strong>Добавление фрейма</strong><br>
<table width="auto">
<tr><td style="border-style:none;">Адрес сайта или флэшролика: <input maxlength=100 size=30 value="http://" id="adr"></td></tr>
<tr><td style="border-style:none;">Введите описание, оно будет отображаться при воспроизвдении: <input maxlength=100 size=30 value="описание" id="opis"></td></tr>
<tr><td style="border-style:none;">Ширина фрейма в пикселях: <input maxlength=10 size=10 value="420" id="width"></td></tr>
<tr><td style="border-style:none;">Высота фрейма в пикселях: <input maxlength=10 size=10 value="320" id="hight"></td></tr></table>
<button type="button" onclick="var ur=document.getElementById('adr').value;var op=document.getElementById('opis').value;var wd=document.getElementById('width').value;var hg=document.getElementById('hight').value;insert('[myimg=width:'+wd+'px height:'+hg+'px]'+ur+'|'+op+'[/myimg]');changeVisibility('framer');changeVisibility('myimg');">Добавить фрейм</button> <button type="button" onclick="changeVisibility('framer');changeVisibility('myimg');">Отмена</button></div>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="var enterURL=prompt('Введите ссылку на каталог изображений', 'http://');var enterTITLE=prompt('Введите описание оно будет отображаться при воспроизвдении', 'описание');insert('[myimg=group:catalogs]' + enterURL + '|' + enterTITLE + '[/myimg]'); return changeVisibility('myimg', this)"><img src="http://uploads.ru/t/1/S/Q/1SQq0.png" title="каталог"></a>
<hr>
<strong>Варианты всплывающих подсказок</strong><br>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="var enterTITLE=prompt('Введите слово или bb-code с изображением, при наведении на которое будет появляться описание', 'нечто');var enterTITLE2=prompt('Введите описание оно будет отображаться при воспроизвдении', 'описание');insert('[mytool=changeTipCursor:false]' + enterTITLE + '|' + enterTITLE2 + '[/mytool]'); return changeVisibility('myimg', this)"><img src="http://uploads.ru/t/f/t/S/ftSDd.png" title="классическая всплывающая подсказка"></a>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="var enterTITLE=prompt('Введите слово или bb-code с изображением, при наведении на которое будет появляться описание', 'нечто');var enterTITLE2=prompt('Введите описание оно будет отображаться при воспроизвдении', 'описание');insert('[mytool=tipStyle:info]' + enterTITLE + '|' + enterTITLE2 + '[/mytool]'); return changeVisibility('myimg', this)"><img src="http://uploads.ru/t/S/1/0/S10ft.png" title="информационная всплывающая подсказка"></a>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="var enterTITLE=prompt('Введите слово или bb-code с изображением, при наведении на которое будет появляться описание', 'нечто');var enterTITLE2=prompt('Введите описание оно будет отображаться при воспроизвдении', 'описание');insert('[mytool=tipStyle:help]' + enterTITLE + '|' + enterTITLE2 + '[/mytool]'); return changeVisibility('myimg', this)"><img src="http://uploads.ru/t/h/d/K/hdKb9.png" title="подсказка вопрос"></a>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="var enterTITLE=prompt('Введите слово или bb-code с изображением, при наведении на которое будет появляться описание', 'нечто');var enterTITLE2=prompt('Введите описание оно будет отображаться при воспроизвдении', 'описание');insert('[mytool=tipStyle:warning]' + enterTITLE + '|' + enterTITLE2 + '[/mytool]'); return changeVisibility('myimg', this)"><img src="http://uploads.ru/t/9/L/r/9Lr2w.png" title="подсказка предупреждение"></a>
<a class="lytetip" style="cursor:pointer;padding:8px;" onclick="var enterTITLE=prompt('Введите слово или bb-code с изображением, при наведении на которое будет появляться описание', 'нечто');var enterTITLE2=prompt('Введите описание оно будет отображаться при воспроизвдении', 'описание');insert('[mytool=tipStyle:error]' + enterTITLE + '|' + enterTITLE2 + '[/mytool]'); return changeVisibility('myimg', this)"><img src="http://uploads.ru/t/6/V/8/6V8DY.png" title="подсказка об ошибке"></a>
</div> манипуляции с фотогалереей осуществляются через кнопку [реклама вместо картинки],
которая появится в форме ответа
для удобной работы создан вот такой блок кнопок
манипуляции осуществляются как через привычные диалоговые окна, так и через специальные формы заполнения данных
при добавлении флэш ролика из-за невозможности автоматически создание миниатюры, появляется картинка для флэш по-умолчанию
всплывающие подсказки можно делать как при наведении на слово, так и при наведении на любое изображение в посте, с применением в подсказке любого бб-кода и больших текстов, что позволяет подсказку использовать фактически как спойлер
ПРИМЕРЫ
немного об оформлении,
автор плагина Маркус дал нам возможность выбирать фон затемнения вокруг изображения при просмотре из 7 доступных вариантов:
black (default), grey, red, green, blue, gold, orange
применить их у себя на форуме можно небольшим скриптом
<script type="text/javascript">
var lyteboxTheme = 'grey';
</script>
у меня в примере выбран серый цвет
официальная страничка плагина - http://lytebox.com/index.php
Отредактировано Romych (Пн, 2 Янв 2012 04:19:40)
но уже что то 
)
Потом недостатки данной версии - она подгружает файл картинки даже если мы изображение не просматриваем