Модификация, позволяющая изменить вывод предыдущего и следующего изображений в модификации phpbb gallery. Сделать превью необычным, стильным и эффектным. Всё это с помощью CSS эффектов и SVG иконок.
Изображение
Установка осуществляется путём небольшой правки шаблона gallery/viewimage_body.html и добавлением кода css, соответствующего выбранному блоку.
Место правки не сильно отличается от версий мода, поэтому работать будет на всех её версиях.
Выбор.

В демо примере мода показано 14 вариантов вывода стрелок навигации, каждый подписан своим именем.
В прикреплённом файле содержатся три файла. CSS для клонов обоих стилей и два html файла со структурой для каждого из стилей.
В css и html файлах есть комментарий с названием, какая структура относится к какому примеру.

Возьмём в пример установку первого варианта. Первый вариант называется Slide.
Открываете файл arrow-navigation-styles (можно простым блокнотом), в самом начале файла находите:

Код: Выделить всё

<div class="svg-wrap">
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-1" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-1" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-2" d="M26.667 10.667q1.104 0 1.885 0.781t0.781 1.885q0 1.125-0.792 1.896l-14.104 14.104h41.563q1.104 0 1.885 0.781t0.781 1.885-0.781 1.885-1.885 0.781h-41.563l14.104 14.104q0.792 0.771 0.792 1.896 0 1.104-0.781 1.885t-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.813-0.771-1.896t0.771-1.896l18.667-18.667q0.792-0.771 1.896-0.771z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-2" d="M37.333 10.667q1.125 0 1.896 0.771l18.667 18.667q0.771 0.771 0.771 1.896t-0.771 1.896l-18.667 18.667q-0.771 0.771-1.896 0.771-1.146 0-1.906-0.76t-0.76-1.906q0-1.125 0.771-1.896l14.125-14.104h-41.563q-1.104 0-1.885-0.781t-0.781-1.885 0.781-1.885 1.885-0.781h41.563l-14.125-14.104q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-3" d="M44.797 17.28l0.003 29.44-25.6-14.72z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-3" d="M19.203 17.28l-0.003 29.44 25.6-14.72z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-4" d="M15.946 48l0.003-10.33 47.411 0.003v-11.37h-47.414l0.003-10.304-15.309 16z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-4" d="M48.058 48l-0.003-10.33-47.414 0.003v-11.37h47.418l-0.003-10.304 15.306 16z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-5" d="M48 10.667q1.104 0 1.885 0.781t0.781 1.885-0.792 1.896l-16.771 16.771 16.771 16.771q0.792 0.792 0.792 1.896t-0.781 1.885-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.771-0.771-1.896t0.771-1.896l18.667-18.667q0.771-0.771 1.896-0.771zM32 10.667q1.104 0 1.885 0.781t0.781 1.885-0.792 1.896l-16.771 16.771 16.771 16.771q0.792 0.792 0.792 1.896t-0.781 1.885-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.771-0.771-1.896t0.771-1.896l18.667-18.667q0.771-0.771 1.896-0.771z"></path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right-5" d="M29.333 10.667q1.104 0 1.875 0.771l18.667 18.667q0.792 0.792 0.792 1.896t-0.792 1.896l-18.667 18.667q-0.771 0.771-1.875 0.771t-1.885-0.781-0.781-1.885q0-1.125 0.771-1.896l16.771-16.771-16.771-16.771q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76zM13.333 10.667q1.104 0 1.875 0.771l18.667 18.667q0.792 0.792 0.792 1.896t-0.792 1.896l-18.667 18.667q-0.771 0.771-1.875 0.771t-1.885-0.781-0.781-1.885q0-1.125 0.771-1.896l16.771-16.771-16.771-16.771q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z"></path>
</svg>
</div>
Нам потребуется не весь этот код, а только его часть. Для того чтобы узнать какая, находите чуть ниже, по имени примера нужную html структуру:

Код: Выделить всё

<!-- Slide out (SVG - arrow-left-1) -->
<div class="post bg2">
<div class="inner"><span class="corners-top"><span></span></span>
<div style="text-align: center; padding: 20px;">
<span class="svg-container">{UC_IMAGE}
<span class="nav-slide">
<!-- IF UC_PREVIOUS -->
<span class="prev">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
<div><h3>{UC_PREVIOUS}</h3>{UC_PREVIOUS_IMAGE}</div>
</span>
<!-- ENDIF -->
<!-- IF UC_NEXT -->
<span class="next">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
<div><h3>{UC_NEXT}</h3>{UC_NEXT_IMAGE}</div>
</span>
<!-- ENDIF -->
</span>
</span>
</div>
<span class="corners-bottom"><span></span></span></div>
</div>
SVG - arrow-left-1 - id нужный для вывода стрелок. Получается нужный нам код будет таким:

Код: Выделить всё

<div class="svg-wrap">
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-1" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z"></path>
</svg>
</div>
Если в комментарии нет сноски на id, то ставить этот код не нужно.

Со стилями так же. Нужный фрагмент css кода помечен комментарием с именем, соответствующим примеру. Плюс небольшой кусок css кода для всех примеров.


Установка.

Установка для стиля prosilver.
В примере будет выбранный нами ранее пример - Slide.

Открываете шаблон gallery/viewimage_body.html, находите:

Код: Выделить всё

<!-- INCLUDE overall_header.html -->
после найденного добавляете:

Код: Выделить всё

<div class="svg-wrap">
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left-1" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z"></path>
</svg>
</div>
Далее находите:

Код: Выделить всё

<div class="post bg2">
<div class="inner"><span class="corners-top"><span></span></span>
<!-- IF UC_PREVIOUS --><p style="float: left; text-align: left;">{UC_PREVIOUS_IMAGE}<br />{UC_PREVIOUS}</p><!-- ENDIF -->
<!-- IF UC_NEXT --><p style="float: right; text-align: right;">{UC_NEXT_IMAGE}<br />{UC_NEXT}</p><!-- ENDIF -->
<div style="text-align: center; padding: 20px;">{UC_IMAGE}</div>
<span class="corners-bottom"><span></span></span></div>
</div>
p.s. Плюс минус, в зависимости от версии мода галерей, может быть ещё одна строчка.

Меняете на:

Код: Выделить всё

<!-- Slide out (SVG - arrow-left-1) -->
<div class="post bg2">
<div class="inner"><span class="corners-top"><span></span></span>
<div style="text-align: center; padding: 20px;">
<span class="svg-container">{UC_IMAGE}
<span class="nav-slide">
<!-- IF UC_PREVIOUS -->
<span class="prev">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
<div><h3>{UC_PREVIOUS}</h3>{UC_PREVIOUS_IMAGE}</div>
</span>
<!-- ENDIF -->
<!-- IF UC_NEXT -->
<span class="next">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
<div><h3>{UC_NEXT}</h3>{UC_NEXT_IMAGE}</div>
</span>
<!-- ENDIF -->
</span>
</span>
</div>
<span class="corners-bottom"><span></span></span></div>
</div>
Правка шаблона закончена. Теперь устанавливаем стили.
Есть два варианта.
Первый - добавить стили в конец темы стиля.
Второй - добавить файл с выбранным css в styles/стиль/theme и указать его в stylesheet.css.

Возьмём в пример первый вариант, в конец темы устанавливаете. Открываете файл arrow-navigation-styles.css, в самом начале содержатся стили для всех вариантов:

Код: Выделить всё

/* SVG wrap */
.svg-wrap {
position: absolute;
width: 0px;
height: 0px;
overflow: hidden;
}

.svg-container {
position: relative;
display: inline-block;
overflow: hidden;
}

.svg-container > span > span {
position: absolute;
top: 50%;
display: block;
outline: none;
text-align: left;
z-index: 1000;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}

.svg-container span.prev {
left: 0;
}

.svg-container span.next {
right: 0;
}

.svg-container span svg {
display: block;
margin: 0 auto;
padding: 0;
}

.svg-container h3 a {
padding: 0;
background: none;
float: none;
}
Далее нужный стиль по имени:

Код: Выделить всё

/*--------------------*/
/* Slide out */
/*--------------------*/

.nav-slide .icon-wrap {
position: relative;
z-index: 100;
display: block;
padding: 20px;
background-color: #fff;
}

.nav-slide svg.icon {
fill: #34495e;
}

.nav-slide div {
position: absolute;
top: 50%;
padding: 0 100px;
background-color: #34495e;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}

.nav-slide span.prev div {
left: 0;
padding-right: 120px;
-webkit-transform: translateY(-50%) translateX(-100%);
-moz-transform: translateY(-50%) translateX(-100%);
transform: translateY(-50%) translateX(-100%);
}

.nav-slide span.next div {
right: 0;
padding-left: 120px;
text-align: right;
-webkit-transform: translateY(-50%) translateX(100%);
-moz-transform: translateY(-50%) translateX(100%);
transform: translateY(-50%) translateX(100%);
}

.nav-slide h3 {
position: relative;
margin: 0;
padding: 25px 0;
color: #fff;
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 1.5em;
line-height: 1.5;
border: 0;
text-transform: none;
}

.nav-slide h3 a {
color: #fff;
}

.nav-slide img {
position: absolute;
top: 0;
height: 100%;
width: 92px;
}

.nav-slide span.prev img {
right: 0;
}

.nav-slide span.next img {
left: 0;
}

.nav-slide span:hover div {
-webkit-transform: translateY(-50%) translateX(0);
-moz-transform: translateY(-50%) translateX(0);
transform: translateY(-50%) translateX(0);
}
Собственно всё. Установка завершена.


Для клонов subsilver2 будет всё практически также. За исключением заменяемого фрагмента, в gallery/viewimage_body.html находите:

Код: Выделить всё

<table class="tablebg" cellspacing="1" width="100%">
<tr>
<td class="cat">
<table width="100%" cellspacing="0">
<tr>
<td class="nav" nowrap="nowrap">
<!-- IF not S_IS_BOT -->
<!-- IF U_WATCH_TOPIC -->&nbsp;<a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a><!-- IF U_BOOKMARK_TOPIC --> |<!-- ENDIF --><!-- ENDIF -->
<!-- IF U_BOOKMARK_TOPIC -->&nbsp;<a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a><!-- ENDIF -->
<!-- ENDIF -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">{L_DETAILS}</th>
</tr>
<tr>
<td class="row1" style="align: center;">
<!-- IF UC_PREVIOUS --><p style="float: left; text-align: left;">{UC_PREVIOUS_IMAGE}<br />{UC_PREVIOUS}</p><!-- ENDIF -->
<!-- IF UC_NEXT --><p style="float: right; text-align: right;">{UC_NEXT_IMAGE}<br />{UC_NEXT}</p><!-- ENDIF -->
<div style="text-align: center; padding: 20px;">{UC_IMAGE}</div>
<!-- IF U_REPORT --><a href="{U_REPORT}">{REPORT_IMG}</a> <!-- ENDIF -->
<!-- IF U_DELETE --><a href="{U_DELETE}">{DELETE_IMG}</a> <!-- ENDIF -->
<!-- IF U_EDIT --><a href="{U_EDIT}">{EDIT_IMG}</a> <!-- ENDIF -->
<!-- IF U_STATUS --><a href="{U_STATUS}">{STATUS_IMG}</a> <!-- ENDIF -->
</td>
</tr>
</table>
Меняете на:

Код: Выделить всё

<!-- Slide out (SVG - arrow-left-1) -->
<table class="tablebg" cellspacing="1" width="100%">
<tr>
<td class="cat">
<table width="100%" cellspacing="0">
<tr>
<td class="nav" nowrap="nowrap">
<!-- IF not S_IS_BOT -->
<!-- IF U_WATCH_TOPIC -->&nbsp;<a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a><!-- IF U_BOOKMARK_TOPIC --> |<!-- ENDIF --><!-- ENDIF -->
<!-- IF U_BOOKMARK_TOPIC -->&nbsp;<a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a><!-- ENDIF -->
<!-- ENDIF -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">{L_DETAILS}</th>
</tr>
<tr>
<td class="row1" style="align: center;">
<div style="text-align: center; padding: 20px;">
<span class="svg-container">{UC_IMAGE}
<span class="nav-slide">
<!-- IF UC_PREVIOUS -->
<span class="prev">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
<div><h3>{UC_PREVIOUS}</h3>{UC_PREVIOUS_IMAGE}</div>
</span>
<!-- ENDIF -->
<!-- IF UC_NEXT -->
<span class="next">
<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
<div><h3>{UC_NEXT}</h3>{UC_NEXT_IMAGE}</div>
</span>
<!-- ENDIF -->
</span>
</span>
</div>
<!-- IF U_REPORT --><a href="{U_REPORT}">{REPORT_IMG}</a> <!-- ENDIF -->
<!-- IF U_DELETE --><a href="{U_DELETE}">{DELETE_IMG}</a> <!-- ENDIF -->
<!-- IF U_EDIT --><a href="{U_EDIT}">{EDIT_IMG}</a> <!-- ENDIF -->
<!-- IF U_STATUS --><a href="{U_STATUS}">{STATUS_IMG}</a> <!-- ENDIF -->
</td>
</tr>
</table>

Скачать:
Arrow-navigation-styles.rar
7.84 КБ 368 скачиваний
Ну и как обычно. Многие сделано с помощью css3 и это работает в современных браузерах.

Автор проекта на github.com. Адаптация под phpbb gallery моя.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.

Похожие темы