Заменяем Lightbox на Highslide

Совместимость с XenForo

1. Скачиваем последнюю актуальную версию Highslide отсюда:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

2. Сохраняем архив и распаковываем его на свой компьютер
3. Из всего архива нам нужна только папка /highslide
4. В папке /highslide оставляем только папку /graphics и всё её содержимое, а так же файлы: highslide-ie6.css, highslide-with-gallery.js и highslide.css - остальные файлы можете удалить за ненадобностью (если лень всё делать, то можете скачать уже готовую папку из данного ресурса)
5. Готовую папку highslide положите в папку js своего форума
6. Открываем шаблон page_container_js_head и в самый его низ добавляем:

Код:

<script type="text/javascript" src="js/highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="js/highslide/highslide.css" />
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="js/highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
hs.graphicsDir = 'js/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    overlayOptions: {
        className: 'text-controls',
        position: 'bottom center',
        relativeTo: 'viewport',
        offsetY: -60
    },
    thumbstrip: {
        position: 'bottom center',
        mode: 'horizontal',
        relativeTo: 'viewport'
    }
});
</script>

7. Открываем шаблон attached_files, в нём находим:

Код:

<ul class="attachmentList">

И заменяем на:

Код:

<ul class="attachmentList highslide-gallery">

В этом же шаблоне (attached_files) находим:

Код:

<div class="thumbnail">
                        <a href="{xen:link attachments, $attachment}" target="_blank">
                            <img src="{xen:if $attachment.thumbnailUrl, $attachment.thumbnailUrl, '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}" />
                        </a>
                    </div>

И заменяем на:

Код:

<div class="thumbnail">
                        <xen:if is="{$attachment.thumbnailUrl} AND {$visitor.permissions.forum.viewAttachment}">
                            <a class="highslide" href="{xen:link attachments, $attachment}" onclick="return hs.expand(this)">
                                <img src="{xen:if $attachment.thumbnailUrl, $attachment.thumbnailUrl, '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}" />
                            </a>
                        <xen:else />
                            <a href="{xen:link attachments, $attachment}" target="_blank">
                                <img src="{xen:if $attachment.thumbnailUrl, $attachment.thumbnailUrl, '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}" />
                            </a>
                        </xen:if>
                    </div>

Вот собственно и всё. На выходе мы получаем такое:

Реакции: MEGAVOLT, MinaevS, Sonkir и 2 других

Мы ценим вашу конфиденциальность

Мы используем основные cookies для обеспечения работы этого сайта, а также дополнительные cookies для обеспечения максимального удобства пользователя.

Заменяем Lightbox на Highslide 1.0

Другие ресурсы пользователя Hope

Поделиться ресурсом

Мы ценим вашу конфиденциальность