Редактирование: Справка/VideoGallery

Перейти к: навигация, поиск

Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.

Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия Ваш текст
Строка 1: Строка 1:
−
Видео-галерея на замену неработающего MorphVideo. Используется слайдер [http://kenwheeler.github.io/slick/ slick].
+
/*
 +
AnythingSlider v1.8+ Minimalist Square theme
 +
By Rob Garrison
 +
*/
 +
/*****************************
 +
  SET DEFAULT DIMENSIONS HERE
 +
*****************************/
 +
/* change the ID & dimensions to match your slider */
 +
#slider {
 +
width: 700px;
 +
height: 390px;
 +
list-style: none;
 +
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
}
  
−
Подключается с помощью [[Special:Gadgets|гаджетов]]: [[MediaWiki:Gadget-Slick.js]], [[MediaWiki:Gadget-SlickInit.js]], [[MediaWiki:Gadget-SlickTheme.css]], [[MediaWiki:Gadget-Slick.css]].
+
/******************
 +
  SET STYLING HERE
 +
******************
 +
=================================
 +
Default state (no keyboard focus)
 +
==================================*/
 +
/* Overall Wrapper */
 +
.anythingSlider-minimalist-square {
 +
margin: 0 auto;
 +
/* 30px right & left padding for the navigation arrows */
 +
padding: 0 30px;
 +
}
 +
/* slider window - top & bottom borders, default state */
 +
.anythingSlider-minimalist-square .anythingWindow {
 +
border-top: 3px solid #333;
 +
border-bottom: 3px solid #333;
 +
}
 +
/* Navigation buttons + start/stop button, default state */
 +
.anythingSlider-minimalist-square .anythingControls a {
 +
background-color: #333;
 +
color: #fff;
 +
border: #000 1px solid;
 +
}
 +
/* Navigation current button, default state */
 +
.anythingSlider-minimalist-square .anythingControls a.cur,
 +
.anythingSlider-minimalist-square .anythingControls a:hover {
 +
background-color: #777;
 +
color: #000;
 +
}
  
−
Галерея создается оборачиванием контента в тег <nowiki><div class="slick">...</div></nowiki>.
+
/* start-stop button, stopped, default state */
 +
.anythingSlider-minimalist-square .anythingControls a.start-stop {
 +
background: #040;
 +
color: #ddd;
 +
/* top shadow */
 +
-moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
 +
-webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
 +
box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
 +
}
 +
/* start-stop button, playing, default state */
 +
.anythingSlider-minimalist-square .anythingControls a.start-stop.playing {
 +
background-color: #800;
 +
}
  
−
== Использование ==
+
/* start-stop button, default hovered text color (when visible) */
 +
/* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */
 +
.anythingSlider-minimalist-square .anythingControls a.start-stop:hover,
 +
.anythingSlider-minimalist-square .anythingControls a.start-stop.hover,
 +
.anythingSlider-minimalist-square .anythingControls a.start-stop .anythingControls ul a:hover {
 +
color: #fff;
 +
/* clear top shadow */
 +
-moz-box-shadow: inset 0 0 0 #000000;
 +
-webkit-box-shadow: inset 0 0 0 #000000;
 +
box-shadow: inset 0 0 0 #000000;
 +
}
  
−
<pre><nowiki><div class="slick">
+
/*
−
{{#widget:YouTube|id=5YtWoVqUvAQ|desc=клип «Сдвиг» (1997)}}
+
=================================
−
{{#widget:YouTube|id=q-KDkCDsmZI|desc=клип «Колыбельный Марш» (1997)}}
+
Active State (has keyboard focus)
−
{{#widget:YouTube|id=6s_S_SG9EmQ|desc=клип «Креозот» (2002)}}
+
=================================
−
{{#widget:YouTube|id=UhT0-huCgAk|desc=клип «Тысячи Дорог» (2009)}}
+
*/
−
{{#widget:YouTube|id=sBwrn-NdFXc|desc=клип «Механизмы» (2011)}}
+
/* slider window - top & bottom borders, active state */
−
{{#widget:YouTube|id=q0jL5H4T0WY|desc=клип «В Комнате» (2011)}}
+
.anythingSlider-minimalist-square.activeSlider .anythingWindow {
−
{{#widget:YouTube|id=6exCdsrRE94|desc=клип «Беззаботность» (2011)}}
+
border-color: #164054;
−
{{#widget:YouTube|id=lJ5CfchUi7Y|desc=клип «Беги, беги» (2011)}}
+
}
−
{{#widget:YouTube|id=hpRCVtS_7FQ|desc=клип «Ржавое сало» (2011)}}
 
−
</div></nowiki></pre>
 
  
−
=== Результат ===
+
/* Navigation buttons, active state */
−
<div class="slick">
+
.anythingSlider-minimalist-square.activeSlider .anythingControls a {
−
{{#widget:YouTube|id=5YtWoVqUvAQ|desc=клип «Сдвиг» (1997)}}
+
background-color: #164054;
−
{{#widget:YouTube|id=q-KDkCDsmZI|desc=клип «Колыбельный Марш» (1997)}}
+
color: #fff;
−
{{#widget:YouTube|id=6s_S_SG9EmQ|desc=клип «Креозот» (2002)}}
+
}
−
{{#widget:YouTube|id=UhT0-huCgAk|desc=клип «Тысячи Дорог» (2009)}}
+
/* Navigation current button, active state */
−
{{#widget:YouTube|id=sBwrn-NdFXc|desc=клип «Механизмы» (2011)}}
+
.anythingSlider-minimalist-square.activeSlider .anythingControls a.cur,
−
{{#widget:YouTube|id=q0jL5H4T0WY|desc=клип «В Комнате» (2011)}}
+
.anythingSlider-minimalist-square.activeSlider .anythingControls a:hover {
−
{{#widget:YouTube|id=6exCdsrRE94|desc=клип «Беззаботность» (2011)}}
+
background-color: #fff;
−
{{#widget:YouTube|id=lJ5CfchUi7Y|desc=клип «Беги, беги» (2011)}}
+
color: #000;
−
{{#widget:YouTube|id=hpRCVtS_7FQ|desc=клип «Ржавое сало» (2011)}}
+
}
−
</div>
+
 
 +
/* start-stop button, stopped, active state */
 +
.anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop {
 +
background: #080;
 +
color: #fff;
 +
}
 +
/* start-stop button, playing, active state */
 +
.anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop.playing {
 +
color: #fff;
 +
background: #f00;
 +
}
 +
/* start-stop button, active slider hovered text color (when visible) */
 +
.anythingSlider-minimalist-square.activeSlider .start-stop:hover,
 +
.anythingSlider-minimalist-square.activeSlider .start-stop.hover {
 +
color: #fff;
 +
}
 +
 
 +
/************************
 +
  NAVIGATION POSITIONING
 +
************************/
 +
/* Navigation Arrows */
 +
.anythingSlider-minimalist-square .arrow {
 +
top: 50%;
 +
position: absolute;
 +
display: block;
 +
}
 +
 
 +
.anythingSlider-minimalist-square .arrow a {
 +
display: block;
 +
width: 30px;
 +
height: 40px;
 +
margin: -20px 0 0 0; /* half height of image */
 +
text-align: center;
 +
outline: 0;
 +
/*background: url(../images/arrows-minimalist.png) no-repeat;*/
 +
}
 +
 
 +
/* back arrow */
 +
.anythingSlider-minimalist-square .back { left: 0; }
 +
.anythingSlider-minimalist-square .back a { background-position: left bottom; }
 +
.anythingSlider-minimalist-square .back a:hover,
 +
.anythingSlider-minimalist-square .back a.hover { background-position: left top; }
 +
/* forward arrow */
 +
.anythingSlider-minimalist-square .forward { right: 0; }
 +
.anythingSlider-minimalist-square .forward a { background-position: right bottom; }
 +
.anythingSlider-minimalist-square .forward a:hover,
 +
.anythingSlider-minimalist-square .forward a.hover { background-position: right top; }
 +
 
 +
/* Navigation Links */
 +
.anythingSlider-minimalist-square .anythingControls {
 +
height: 15px; /* limit height, needed for IE9 of all things */
 +
outline: 0;
 +
display: none;
 +
float: right;
 +
position: absolute;
 +
bottom: 5px;
 +
right: 20px;
 +
margin: 0 45px;
 +
z-index: 100;
 +
opacity: 0.90;
 +
filter: alpha(opacity=90);
 +
}
 +
 
 +
.anythingSlider-minimalist-square .anythingControls ul {
 +
margin: 0;
 +
padding: 0;
 +
float: left;
 +
}
 +
.anythingSlider-minimalist-square .anythingControls ul li {
 +
list-style: none;
 +
float: left;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
.anythingSlider-minimalist-square .anythingControls ul a {
 +
display: inline-block;
 +
width: 10px;
 +
height: 10px;
 +
margin: 3px;
 +
padding: 0;
 +
text-decoration: none;
 +
text-align: center;
 +
outline: 0;
 +
}
 +
 
 +
.anythingSlider-minimalist-square .anythingControls span {
 +
display: block;
 +
visibility: hidden;
 +
}
 +
 
 +
/* navigationSize window */
 +
.anythingSlider-minimalist-square .anythingControls .anythingNavWindow {
 +
 
 +
overflow: hidden;
 +
float: left;
 +
}
 +
/* navigationSize nav arrow positioning */
 +
.anythingSlider-minimalist-square .anythingControls li.prev span,
 +
.anythingSlider-minimalist-square .anythingControls li.next span {
 +
visibility: visible;
 +
position: relative;
 +
top: -6px; /* bring navigationSize text arrows into view */
 +
}
 +
 
 +
/* Autoplay Start/Stop button */
 +
.anythingSlider-minimalist-square .anythingControls .start-stop {
 +
margin: 3px;
 +
padding: 0;
 +
display: inline-block;
 +
width: 10px;
 +
height: 10px;
 +
text-align: center;
 +
text-decoration: none;
 +
z-index: 100;
 +
outline: 0;
 +
}
 +
 
 +
/***********************
 +
IE8 AND OLDER STYLING
 +
***********************/
 +
/* Navigation Arrows */
 +
.as-oldie .anythingSlider-minimalist-square .arrow {
 +
top: 45%;
 +
}
 +
.as-oldie .anythingSlider-minimalist-square .arrow a {
 +
margin: 0;
 +
}
 +
 
 +
/***********************
 +
COMMON SLIDER STYLING
 +
***********************/
 +
/* Overall Wrapper */
 +
.anythingSlider {
 +
display: block;
 +
overflow: visible !important;
 +
position: relative;
 +
}
 +
/* anythingSlider viewport window */
 +
.anythingSlider .anythingWindow {
 +
overflow: hidden;
 +
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
/* anythingSlider base (original element) */
 +
.anythingSlider .anythingBase {
 +
background: transparent;
 +
list-style: none;
 +
position: absolute;
 +
overflow: visible !important;
 +
top: 0;
 +
left: 0;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
/* Navigation arrow text; indent moved to span inside "a", for IE7;
 +
apparently, a negative text-indent on an "a" link moves the link as well as the text */
 +
.anythingSlider .arrow span {
 +
display: block;
 +
/*visibility: hidden;*/
 +
}
 +
/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
 +
.anythingSlider .arrow.disabled {
 +
display: none;
 +
}
 +
/* all panels inside the slider; horizontal mode */
 +
.anythingSlider .panel {
 +
background: transparent;
 +
display: block;
 +
overflow: hidden;
 +
float: left;
 +
padding: 0;
 +
margin: 0;
 +
}
 +
/* vertical mode */
 +
.anythingSlider .vertical .panel {
 +
float: none;
 +
}
 +
 
 +
/* fade mode */
 +
.anythingSlider .fade .panel {
 +
float: none;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
z-index: 0;
 +
}
 +
/* fade mode active page - visible & on top */
 +
.anythingSlider .fade .activePage {
 +
z-index: 1;
 +
}
 +
 
 +
/***********************
 +
  RTL STYLING
 +
***********************/
 +
/* slider autoplay right-to-left, reverse order of nav links to look better */
 +
.anythingSlider.rtl .anythingWindow {
 +
direction: ltr;
 +
unicode-bidi: bidi-override;
 +
}
 +
.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
 +
.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
 +
.anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */
 +
 
 +
/* probably not necessary, but added just in case */
 +
.anythingSlider .anythingWindow,
 +
.anythingSlider .anythingControls ul a,
 +
.anythingSlider .arrow a,
 +
.anythingSlider .start-stop {
 +
transition-duration: 0s;
 +
-o-transition-duration: 0s;
 +
-moz-transition-duration: 0s;
 +
-webkit-transition-duration: 0s;
 +
}

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

Для оформления страницы вы можете использовать шаблоны: Музыкальный коллектив, Музыкальный альбом, Музыкант и другие.

Для вставки мультимедиа материалов: YouTube, Vkontakte, SoundCloud.

Если вы испытываете проблемы с редактированием статьи обратитесь к администраторам сайта.

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

Иногда, в частности при добавлении на страницу новых веб-ссылок, вики может попросить вас ответить на вопрос. Это позволяет отличить людей от болишинства спамеров и других роботизированных недоброжелателей.

Пожалуйста, обратитесь к администраторам сайта за помощью, если данная система не позволяет вам вносить допустимые изменения. Или вы испытываете проблемы с редактированием статьи.

Чтобы отредактировать эту страницу, пожалуйста, введите ответ на вопрос в текстовое поле. Или сохраните содержимое правки в блокноте и очень просто авторизуйтесь через социальные сети.

Отменить Справка по редактированию (в новом окне)
Источник — «https://wiki.rock63.ru/Справка/VideoGallery»