[3.8.x] Улучшаем просмотр вложений с помощью Lightbox

02-16-2018, 09:53 PM

Улучшения при просмотре вложений с помощью Lightbox:
1) По клику на фото переходить к следующему вложению, а не открывать текущее вложение в новой вкладке.
2) Переход между фото можно делать с помощью клавиатуры (клавиши "вправо" и "влево").

Внести изменения в файл forum/clientscript/vbulletin_lightbox.js
1.1)
После:

PHP Code:


			
this.nextbtn=YAHOO.util.Dom.get("lightboxnextbutton"+this.uniqueid);YAHOO.util.Event.on(this.nextbtn,"click",this.next_lightbox,this,true);

добавить:

PHP Code:


			
this.nextbtn_common=YAHOO.util.Dom.get("lightboxnextbutton_common"+this.uniqueid);YAHOO.util.Event.on(this.nextbtn_common,"click",this.next_lightbox,this,true);

1.2)
После:

PHP Code:


			
vB_Lightbox.prototype.hide_lightbox=function(B,C,A){

добавить:

PHP Code:


			
if(B&&B.type=="keydown"&&B.keyCode==39){this.next_lightbox(true);return}if(B&&B.type=="keydown"&&B.keyCode==37){this.prev_lightbox(true);return}

2) Заменить в админке шаблон lightbox:

PHP Code:


			
<table cellpadding="0" cellspacing="0" border="0" id="lightbox$uniqueid" style="position:absolute; left:0px; top:0px">

<tr>

    <td>

        <div style="text-align:$stylevar[right]">

            <input type="button" class="button" value="X" id="lightboxbutton$uniqueid" style="padding:4px; background-color:black; color:white; width:30px; border:solid 1px white; position:relative; top:12px; $stylevar[left]:-12px; font-weight:bold; cursor:pointer" />

        </div>

        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border:solid 1px white; background-color:black">

        <tr valign="middle">

            <td colspan="2" style="text-align:center; <if condition="$width AND $height">width:{$width}px; height:{$height}px</if>" align="center" valign="middle" id="lightboxholder">

                <div id="lightboxnextbutton_common$uniqueid"><img src="$stylevar[imgdir_misc]/lightbox_progress.gif" alt="" border="0" id="lightboximg$uniqueid" width="300" height="200" style="border:solid 4px black; border-bottom-width:0px;" /></div>

            </td>

        </tr>

        <tr class="lightboxtextrow">

            <td class="smallfont" style="padding:4px; background-color:black; color:white">$attachmentinfo[filename] (<phrase 1="$current" 2="$total">$vbphrase[x_of_y]</phrase>)</td>

            <td class="smallfont" style="padding:4px; background-color:black; color:white; text-align:$stylevar[right]">$attachmentinfo[date_string] $attachmentinfo[time_string]</td>

        </tr>

        <tr>

            <td style="background-color:black; color:white" align="center" colspan="2">

                <input type="button" class="button" value="<if condition="$first">$vbphrase[lightbox_last]<else />$vbphrase[lightbox_previous]</if>" id="lightboxprevbutton$uniqueid" style="padding:4px; background-color:black; color:white; border:solid 1px white; position:relative; top:12px; font-weight:bold; cursor:pointer" />

                <input type="button" class="button" value="<if condition="$last">$vbphrase[lightbox_first]<else />$vbphrase[lightbox_next]</if>" id="lightboxnextbutton$uniqueid" style="padding:4px; background-color:black; color:white; border:solid 1px white; position:relative; top:12px; font-weight:bold; cursor:pointer" />

            </td>

        </tr>

        </table>

    </td>

</tr>

</table>

P.S. Все описанное в принципе должно подходить и для фанатов более старых версий, чем 3.8 ;)