- Совместимость с XenForo
- 1.1
- 1.2
- 1.3
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 и в самый его низ добавляем:
7. Открываем шаблон attached_files, в нём находим:
И заменяем на:
В этом же шаблоне (attached_files) находим:
И заменяем на:
Вот собственно и всё. На выходе мы получаем такое:
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>
Код:
<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>Вот собственно и всё. На выходе мы получаем такое:
