ФЭНДОМ


Документация (для шаблона, который находится выше, иногда он невидим)

Инструкция

Псевдослайдер использует jQuerry, технологию tabs. Фактически, это сильно стилизированное подобие tabber'а (вкладок на странице). Именно поэтому он назван псевдослайдером: настоящий слайдер — это слайдшоу, и он реализован иначе.

Спионерено с Avatar Wiki, модифицировано, настроено под местные нужды и объяснено Мяунжиком.

Составляющие

Список всех элементов, входящих в псевдослайдер (см. также Категория:Псевдослайдер-ультранавигация):

JS

Основная «рабочая лошадка» псевдослайдера. Связывает классы portal_slider_№ и portal_sliderlink_№. Код модифицирован по сравнению с оригинальным: добавлен «костыль», благодаря которому картинки отображаются вскоре, а не после прокрутки.

/*Псевдослайдер-ультранавигация*/
mw.loader.using( ['jquery.ui.tabs'], function() {
$(document).ready(function() {
  var $tabs = $("#portal_slider").tabs({ fx: {opacity:'toggle', duration:100} } );
  $("[class^=portal_sliderlink]").click(function() { // bind click event to link
    $tabs.tabs('select', this.className.replace("portal_sliderlink_", "") );
        $(window).scroll();                     //Костыль, который имитирует прокрутку
        setTimeout($(window).scroll(), 1000);   // окна, чтобы загрузились картинки
    return false;
  });
});
});

CSS

В коде объявлены классы и заданы стили всех базовых элементов слайдера, в том числе прописаны задний фон (если менять, то ищите background-image:url), высота, поля и т. д. Также здесь перечислены все доступные индексы для portal_sliderlink_№ и задана им прозрачность при наведении. Их с запасом, но если понадобится ещё больше слайдов, то можно добавить больше индексов (следите за запятыми и не задевайте фигурную скобку с {opacity:0.5}).

/*Псевдослайдер-ультранавигация*/
.portal_section {margin:0 0 10px 0; background:#0a4500; -moz-border-radius:20px; -webkit-border-radius:20px; -khtml-border-radius:20px; -icab-border-radius:20px; -o-border-radius:20px; border-radius:20px}
.portal_body {padding:0px 10px;}
#portal_slider {margin:0 0 15px; padding:0; position:relative; height:400px; background-color:#0a4500; -webkit-background-size: 100% 100%; background-size: 100% auto; background-image:url(https://vignette.wikia.nocookie.net/warriors-cats/images/9/90/%D0%92%D0%B5%D1%82%D0%BE%D1%87%D0%BA%D0%B0_%D0%A4%D0%B8%D0%B0%D0%BB%D0%BE%D1%87%D0%BA%D0%B0_%D0%BE%D0%B1%D0%BE%D0%B8.jpg/revision/latest?cb=20180719182656&path-prefix=ru);}
#portal_slider > .portal_body {padding:0px}
#portal_content {font-size:0.9em; line-height:1.7em}
#portal_content .portal_body > table {height:375px}
#portal_content ul ul {margin-left: 1em}
.portal_sliderlink_0:hover, .portal_sliderlink_1:hover, .portal_sliderlink_2:hover, .portal_sliderlink_3:hover, .portal_sliderlink_4:hover, .portal_sliderlink_5:hover, .portal_sliderlink_6:hover, .portal_sliderlink_7:hover, .portal_sliderlink_8:hover, .portal_sliderlink_9:hover, .portal_sliderlink_10:hover, .portal_sliderlink_11:hover, .portal_sliderlink_12:hover, .portal_sliderlink_13:hover, .portal_sliderlink_14:hover, .portal_sliderlink_15:hover, .portal_sliderlink_16:hover, .portal_sliderlink_17:hover, .portal_sliderlink_18:hover, .portal_sliderlink_19:hover, .portal_sliderlink_20:hover, .portal_sliderlink_21:hover, .portal_sliderlink_22:hover, .portal_sliderlink_23:hover, .portal_sliderlink_24:hover, .portal_sliderlink_25:hover, .portal_sliderlink_26:hover, .portal_sliderlink_27:hover, .portal_sliderlink_28:hover, .portal_sliderlink_29:hover, .portal_sliderlink_30:hover, .portal_sliderlink_31:hover, .portal_sliderlink_32:hover, .portal_sliderlink_33:hover, .portal_sliderlink_34:hover, .portal_sliderlink_35:hover, .portal_sliderlink_36:hover, .portal_sliderlink_37:hover, .portal_sliderlink_38:hover, .portal_sliderlink_39:hover {opacity:0.5}
 
.ui-tabs {position:relative; padding:.2em; zoom:1}
.ui-tabs .ui-tabs-nav {margin:0; padding:.2em .2em 0;}
.ui-tabs .ui-tabs-nav li {list-style:none; float:left; position:relative; top:1px; margin:0 .2em 1px 0; border-bottom:0 !important; padding:0; white-space:nowrap}
.ui-tabs .ui-tabs-nav li a {float:left; padding:.5em 1em; text-decoration:none}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {margin-bottom:0; padding-bottom:1px}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {cursor:text}
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {cursor:pointer} 
.ui-tabs .ui-tabs-panel {display:block; border-width:0; padding:0; background: none}
.ui-tabs .ui-tabs-hide {display:none !important;}
.ui-tabs-hide {display:none !important;}

Базовые шаблоны

  • Шаблон:PortalPage — применяет классы к параметру body и подклеивает id, иже есть slider либо content. Лучше не трогать.
  • Шаблон:PortalSection — аналогично предыдущему.
  • Шаблон:ПорталСлайдер — костяк для создания слайдов. Все слайды вписываются в этот шаблон с такими параметрами:
{{ПорталСлайдер
| style = {{{style|}}}
| id    = content
| body  = Тут собственно слайд. 
Рекомендуется использовать таблицу HTML, либо же, 
в случае вики-таблицы, вместо | писать {{!}}.
}}

Этот же шаблон использован в самом слайдере, но с параметром slider вместо content. Однако с body там всё сложнее.

  • Шаблон:Псевдослайдер — основной шаблон, который и вставляется на страницу.
Для начала, в виде HTML-списка перечисляются все доступные ID типа portal_content-№. Их с запасом, но можно добавлять ещё. Для удобства, первому уровню навигации (ссылки с главного слайда) отдаются ID от 1 до 10. 0 — это сам главный слайд. От 11 до сколько надо — вторые уровни. Если потребуется вводить третьи, то для того же удобства следовало бы прописать ID 100 и больше (но необязательно).
Далее, под тегами и в форме <div id="portal_content-№" class="ui-tabs-hide">{{Template:Слайд/Название|style=page}}</div> перечисляются все существующие слайды. Следует знать ID каждого шаблона-слайда, чтобы ссылаться на него. Не надо заменять Template: на Шаблон:, т. к. возможны баги.

Шаблоны-слайды

Все эти шаблоны аналогичны друг другу, и всю соль представляют лишь div class'ы со ссылками на другие слайды. Внешнее обрамление — шаблон ПорталСлайдер (см. выше), а содержимое — под параметром body. Это содержимое — почти обыкновенная навигационная таблица с картинками, но каждый элемент, который куда-то ссылается, обрамлён в тег <div class="portal_sliderlink_№"></div>. Также в этот div вписывается style — его настраивать на усмотрение либо не трогать.

Предположим, нужно сослаться на главный слайд. Для визуализации у нас есть File:Back.png. В нужном месте пишем [[File:Back.png|75px|link=Template:Слайд/Главный]] (здесь link= использовано в качестве резерва для отключённого JS, а с рабочим оным значимости не имеет). Теперь, чтобы пахало, обрамляем в тег: <div style="float:left; text-align:center;" class="portal_sliderlink_0">[[File:Back.png|75px|link=Template:Слайд/Главный]]</div>. style — ничего примечательного, взгляните на class. Он указывает на portal_sliderlink_0, что соответствует главному слайду. Аналогично действуют ссылки на все другие слайды. Допустим, если надо сослаться на Template:Слайд/Книги, то ему соответствует class="portal_sliderlink_1". Если кроме картинки хотим добавить в ссылку текст, то просто пишем его внутри того же тега, например: <div class="portal_sliderlink_0">[[File:Back.png|75px|link=Template:Слайд/Главный]]<br>[[Template:Слайд/Главный|Назад]]</div>

Если слайд является финальным в плане глубины (с него не нужно ссылаться на другие слайды, кроме предыдущего), то class= не используется — просто создаётся обыкновенная навигационная таблица с картинками, в которых уже играет роль именно link=.

Обратите внимание, что псевдослайдер ограничен по высоте. Не лепите слишком много всего, иначе вылезет за пределы или не поместится. Как вариант решения — использовать поле прокрутки, но лучше всё-таки не нагромождать.

Как можно...

Большинство изменений слайдера нужно производить в соответствующих слайдах. Трогать сам Шаблон:Псевдослайдер нужно лишь при добавлении или полном удалении слайдов. Другие базовые шаблоны, равно как и JS трогать не стоит. CSS может потребоваться дополнить при добавлении слайдов либо для изменения общего внешнего вида.

Заменить картинки в слайде

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

Поменять привязанную ссылку

Если речь идёт о ссылке на статью, а не другой слайд, то просто меняйте, как на обычной странице (link= для картинки и квадратные скобки для текста).

Если надо перепривязать ссылку к другому слайду, то вдобавок к привычной замене (которая будет действовать при отключённом JS) необходимо выяснить ID слайда, на который будем ссылаться, и поменять в portal_sliderlink_№ старый номер на новый.

Убрать картинку и ссылку

Найдите нужное место и сотрите как саму картинку-ссылку, так и обрамляющий её тег div. После этого может потребоваться откорректировать таблицу.

Добавить картинку и ссылку на статью

Элементарно. Просто вставьте обыкновенную картинку со ссылкой, безо всяких внешних тегов с классами.

Добавить картинку и ссылку на существующий слайд

Выясните ID слайда, на который будем ссылаться. Добавьте в нужное место простую картинку со ссылкой (и подписью-ссылкой, при надобности). Обрамите картинку и подпись в тег <div class="portal_sliderlink_№" style="margin-top:5px; margin-left:auto; margin-right:auto; text-align:center;"></div>. Вместо № — нужный ID. Стиль настраивать на усмотрение, но margin-left и margin-right (левое-правое поля) хорошо ведут себя на auto.

Либо же скопируйте любую другую картинку-ссылку вместе с тегом и воспользуйтесь инструкцией по замене привязанной ссылки.

Скорее всего, вам придётся вставлять новую картинку в уже существующую таблицу HTML, быть может, добавляя колонку или строку. Советую погуглить «html таблицы».

Создать новый слайд

1. Убедитесь, что есть свободный ID. Для этого посмотрите исходник Шаблон:Псевдослайдер и выясните, до какого номера перечислены #portal_content-№ (в начале, между тегами <li></li>), и какие из них заняты (ниже, в тегах div id="portal_content-№"). Если есть неиспользованные номера — переходите к пункту 3.

2. Если недостаёт свободных ID, перед закрывающим тегом </ul> допишите новый: <li>[[#portal_content-№]]</li>, где № — незанятое число.

3. Проверьте коды слайдера в CSS. Если ожидаемый к использованию номер присутствует в перечислении типа .portal_sliderlink_№:hover, то всё хорошо, переходите к п. 5.

4. Если отсутствует, добавьте перед следующей за этим фигурной скобкой { запятую , и это самое .portal_sliderlink_№:hover, где № — ожидаемый к использованию номер.

5. Создайте шаблон будущего слайда, назвав его по типу Шаблон:Слайд/Название. Гляньте на пояснение для Шаблон:ПорталСлайдер и используйте данный там код за основу (или скопируйте исходник любого другого слайда). В «теле» (body=) размещайте таблицу HTML, а в ней — картинки со ссылками на статьи или существующие слайды, что уже было пояснено.

6. В Шаблон:Псевдослайдер найдите включения собственно слайдов и допишите туда свой, указав забитый заранее ID вместо №: <div id="portal_content-№" class="ui-tabs-hide">{{Template:Слайд/Название|style=page}}</div>. Обязательно писать Template:, а не Шаблон:.

7. Включите в нужное место (на нужном слайде) ссылку на новый слайд.

8. Готово к использованию. Мяу!

Сделать слайд недоступным

1. Выясните ID слайда.

2. Устраните все ссылки на данный слайд из других слайдов. Теперь к слайду нельзя будет доступиться из псевдослайдера. Если этого хватит, то п. 5.

3. Закомментируйте или удалите соответствующую ему строку типа <div id="portal_content-№" class="ui-tabs-hide">{{Template:Слайд/Название|style=page}}</div> из Шаблон:Псевдослайдер.

4. Освободившийся ID не стирайте — будет как резерв.

5. Всё.

Полностью удалить слайд

Сделайте слайд недоступным и удалите сам шаблон слайда.


Посетите Шаблон:Псевдослайдер/doc, чтобы править этот текст. (Как это работает?)
Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.