Как установить в блог слайдер

Приветствую друзей моего блога У спех в Интернет!

Сегодня покажу, как установить в блог слайдер популярное видео. Может Вы видели на блогах слайдер «Популярное видео». Пользователь нажимает на понравившее видео и переходят на него. Это очень удобно. Для того, чтобы установить слайдер переходите в админку блога и нажимаете на дизайн, затем добавляете гаджит html  и вставляете этот скрипт.

<div style=»visibility: hidden;» id=»info11″> </div>
<script>
//<![CDATA[

// Класс описывает сущность объектов для слайдбара
function ClassLink(priority, link_img, title, link_rec) {
this.priority = priority; // Количество просмотров
this.linkImg = link_img; // Ссылка на изображение
this.title = title; // Описание заголовка
this.linkResource = link_rec; // Ссылка на видео-ролик
// Метод сравнения двух объектов
// по полю количества просмотров
// Если текущий объект больше, то возврат 1
// Иначе если объект меньше, то возврат 0
// Если равно, то возврат -1
this.comparator = function(objectClassLink) {
if(objectClassLink.priority > this.priority) {
return 1;
} else if(objectClassLink.priority < this.priority) {
return 0;
} else if(objectClassLink.priority == this.priority) {
return -1;
}
}
}
var listNodes = []; // Массив объектов ClassLink
// Функция сортирует объекты
// по убыванию
// Сигнатура: 1 параметр — ссылка на массив объектов
function sortElements(list) {
// Буфер для хранения временных результатов
var temp;
// Цикл итераций прохода по списку
for(var j = 0; j < list.length; j ++) {
// Цикл итераций прохода по списку N+1
for(var k = (j + 1); k < list.length; k ++) {
// Выбрать первый элемент из множества и сравнить с следующим элементом n+1
if(list[j].comparator(list[k]) < 1) {
// Обмен местами
temp = list[j];
list[j] = list[k];
list[k] = temp;
}
}
}
return list;
}
// Функция поиска 12 популярных видео-ссылок
// на главной странице сайта
function searchTopLink() {
// Ссылка на базовый элемент иерархии модели DOM-документа
var elementBaseDiv = document.getElementById(‘Blog1′);

// Дочерний элемент содержащий список всех блоков с ссылками
var firstElementList = elementBaseDiv.children[0]; // blog-posts hfeed

var fuck = 0;
if(document.getElementsByClassName(‘status-msg-wrap’).length == 1) {
fuck = 2;
}
var j3 = 0;
// Цикл прохода по дереву элементов
for(var j = 0 + fuck; j < firstElementList.children.length; j ++) {
// Дочерний элемент div со всеми нужными данными(ссылки, количество просмотров, графика)
var nodeDiv = firstElementList.children[j];
// Количество просмотров через post header
var countShow = parseInt(nodeDiv.children[1].children[1].children[0].innerHTML);
// Ссылка на изображение
var linkToImg = nodeDiv.children[2].children[0].children[0].children[0].getAttribute(«src»);
// Описание заголовка
var linkTitle = nodeDiv.children[1].children[0].getAttribute(«title»);
// Ссылка на видео ролик
var linkToRec = nodeDiv.children[1].children[0].getAttribute(«path»);
//———————ИЗМЕНЕНИЕ СВОЙСТВ БЛОКОВ IMG and A для того что бы скрыть полоски на картинках————————
// Свойства для дескриптора <a>
nodeDiv.children[2].children[0].children[0].style.display = «block»;
nodeDiv.children[2].children[0].children[0].style.position = «relative»;
nodeDiv.children[2].children[0].children[0].style.width = «192px»;
nodeDiv.children[2].children[0].children[0].style.height = «120px»;
nodeDiv.children[2].children[0].children[0].style.overflow = «hidden»;
// Свойства для дескриптора <img>
nodeDiv.children[2].children[0].children[0].children[0].style.height = «160px»;
nodeDiv.children[2].children[0].children[0].children[0].style.top = «-20px»;
nodeDiv.children[2].children[0].children[0].children[0].style.position = «relative»;
//————————————————————————————————————————-
// Выделить память для объекта
listNodes[j3++] = new ClassLink(countShow, linkToImg, linkTitle, linkToRec);
// Вывести на странице
/*document.getElementById(‘info11′).innerHTML += «Количество: » + countShow + «, Ссылка на графику: » + linkToImg + «, Заголовок: » + linkTitle + «, Ссылка на ресурс: » + linkToRec + «<br>»;*/
}
}
//]]>
</script>
<!—
Скрипт — слайдбар
Выполняет поиск на странице блоков с ссылками
на видео, внутри которых имеются элементы с указанием количества
просмотров. На основании информации можно выделить список
топ-12 или др., что позволить в отдельном блоке-виджете, разместить
ссылки на эти видео-ролики и по клику осуществлять переход.
Внутри слайдбара отобразить пиктограмму и заголовок используемый по-умолчанию.

Слайдбар состоит из нескольких блочных элементов div

1. wrapper-base-slide-bar
2.
—>
<script type=»text/javascript»>
//<![CDATA[
function Timer(funUser, delayMillisecond) {
this.interval_millisecond = delayMillisecond; // Интервал времени в миллисекундах
this.idFunction = 0; // Идентификатор созданной функция вызываемой через опрд.промежуток времени
this.userFunction = funUser; // Пользовательская функция
// Активация таймера
this.start = function() {
this.idFunction = setInterval(this.userFunction, this.interval_millisecond);
}
// Деактивация таймера
this.stop = function() {
// Функция clearInterval для снятия с обработки вызова
clearInterval(this.idFunction);
}
this.setDelayFunction = function(funUser) {
this.userFunction = funUser;
}
this.setIntervalMillisecond = function(millisecond) {
this.interval_millisecond = millisecond;
}
}

// Массив из 12 элементов
// каждый из которых является оболочкой для вложенных изображений и текста
var array_list = []; // Массив хранит сущности
var pElement; // Ссылка на текущий первый элемент в отображенном списке
var timer1 = new Timer(animation, 12); // Таймер который управляет процессом анимации
var timerAutomat = new Timer(animation2, 8000); // Таймер, который будет автоматически переключать ссылки
var aL = true, bL = false;

//
function animation2() {
if(!regul) {
if(t1 < numes-1 && aL) {
// Переключатель
nextVideoLink();
} else {
aL = false;
bL = true;
}

if(t1 > 0 && bL) {
prevVideoLink();
} else {
aL = true;
bL = false;
}
}
}

var speed_left = 0;
var coordsList = []; // Массив координат
var ar=280;
var t1=0, t2=1;
var status = -1;
var MOTION_LEFT = 0x0001;
var MOTION_RIGHT= 0x0002;
var regul = false; // Управляет доступом к переключение ссылок на слайде
var numes = 0;
var fff = -1;
// Анимация движения блоков
function animation() {

for(var j = 0; j < array_list.length; j ++) {

array_list[j].style.left = speed_left + «px»;
//
if(speed_left == (ar*1)* t1) {
timer1.stop();
regul = false;
}
}

if(status == MOTION_LEFT) {
speed_left -= 14;
} else if(status == MOTION_RIGHT) {
speed_left += 14;
}
}

// Предыдущие несколько видео
function prevVideoLink() {
if(t1 > 0 && !regul) {
document.getElementById(‘left-button’).style.backgroundImage = «url(http://infosona.ru/wp-content/uploads/2014/11/2015/10/strelka.png)»;
document.getElementById(‘left-button’).style.borderColor = «green»;
document.getElementById(‘right-button’).style.backgroundImage = «url(http://infosona.ru/wp-content/uploads/2014/11/2015/10/strelka-1.png)»;
document.getElementById(‘right-button’).style.borderColor = «green»;
regul = true;
t1—;
//document.getElementById(‘info’).innerHTML = «t1:» + t1 + «<br>»;
status = MOTION_LEFT;
timer1.start();
} else {
document.getElementById(‘left-button’).style.backgroundImage = «url(http://infosona.ru/wp-content/uploads/2014/11/2015/10/strelka.png)»;
document.getElementById(‘left-button’).style.borderColor = «white»;
}
}
// Следующие несколько видео
function nextVideoLink() {
if(t1 < (numes — 1) && !regul) {
document.getElementById(‘right-button’).style.backgroundImage = «url(http://infosona.ru/wp-content/uploads/2014/11/2015/10/strelka-1.png)»;
document.getElementById(‘right-button’).style.borderColor = «green»;
document.getElementById(‘left-button’).style.backgroundImage = «url(http://infosona.ru/wp-content/uploads/2014/11/2015/10/strelka.png)»;
document.getElementById(‘left-button’).style.borderColor = «green»;
regul = true;
t1++;
//document.getElementById(‘info’).innerHTML = «t1:» + t1 + «<br>»;
status = MOTION_RIGHT;
timer1.start();
} else {
document.getElementById(‘right-button’).style.backgroundImage = «url(http://infosona.ru/wp-content/uploads/2014/11/2015/10/strelka-1.png)»;
document.getElementById(‘right-button’).style.borderColor = «white»;
}
}

// Инициализация состояния
function initSlideBar() {
try {
searchTopLink(); // Парсинг страницы и создание массива объектов-сущностей
sortElements(listNodes); // Отсортировать в порядке убывания
// Объект DIV-базовый для элементов-ссылок на видео
var base_element = document.getElementById(«wrapper-slide-bar-center»);
}catch(ex) {document.getElementById(‘wrapper-base-slide-bar-widget’).parentNode.style.display = «none»; document.getElementById(‘sidebar’).style.position=»relative»; document.getElementById(‘sidebar’).style.top=»-16px»;}
if(listNodes.length > 0) {

// Параметры свойств CSS объекта
base_element.style.width = «232px»; // Ширина блока
base_element.style.height = «185px»; // Высота блока
base_element.style.position = «relative»; // Тип позиционирования — относительный
base_element.style.overflow = «hidden»;
//base_element.style.border = «1px dotted blue»; // Параметры рамки,- толщина, тип линии, цвет линии

numes = (listNodes.length >= 6) ? 6 : listNodes.length; // количество элементов сортированного массива, подходящих для вывода
var num = numes — 1;

var ddd = 0;
for(var j = (listNodes.length — 1); j >= (listNodes.length — numes); j —) {
// Объект класса A-строчный, ссылочный элемент
var object_a = document.createElement(«A»);
object_a.style.display = «inline-block»;
object_a.style.position = «relative»;
object_a.style.float = «left»;
object_a.style.width = «230px»;
if(ddd < (numes — 1)) {
object_a.style.marginLeft = -(280 * num) + «px»;
num—;

} else object_a.style.marginLeft = 0 + «px»;

object_a.href = listNodes[j].linkResource;
object_a.style.textDecoration = «none»;
//object_a.style.backgroundColor = «silver»;

// Объект класса SPAN- блочный элемент
var object_span= document.createElement(«SPAN»);
object_span.style.fontFamily = «Geneva, Arial, Helvetica, sans-serif»; // Семейство шрифта
object_span.style.fontSize = «12px»; // Размер шрифта
object_span.style.width = «230px»;
object_span.style.height = «170px»; //
object_span.style.position = «relative»;
object_span.style.display = «block»;
object_span.style.top = «-25px»;
object_span.style.overflow =»hidden»;
// Объект класса IMG — изображение
var object_img = document.createElement(«IMG»); // Создание объета
object_img.width = «230»; // Ширина графической области
object_img.height= «200»; // Высота графической области
//object_img.align = «left»;
object_img.style.marginRight = «10px»;
object_img.src = listNodes[j].linkImg;

var value_header = listNodes[j].title;
var object_text_node = document.createTextNode(value_header);// Создание текстового объекта

object_span.appendChild(object_img); // Добавить элемент в конец списка

var sptemp = document.createElement(‘SPAN’);
sptemp.style.height = «60px»;
//sptemp.style.width = «280px»;
sptemp.style.color = «white»;
sptemp.style.display = «inline-block»;

sptemp.appendChild(object_text_node);
sptemp.style.position = «relative»;
sptemp.style.top = «-25px»;
//object_span.appendChild(sptemp); // Добавить элемент в конец списка
object_a.appendChild(object_span); // Добавить элемент в конец списка
object_a.appendChild(sptemp);
// Добавить в массив сущностей
array_list[ddd++] = object_a;
}

for(var j = 0; j < array_list.length; j ++) {
base_element.appendChild(array_list[j]);
}

timerAutomat.start();
}
}

// Обработчик события полной загрузки данных в окно
window.addEventListener(«load», initSlideBar, false);
//]]>
</script>

<style>
/* Селекторы свойств блочных элементов */
#left-button:hover, #right-button:hover {
cursor: pointer;
}
/* Селекторы свойств блочных элементов */
#wrapper-slide-bar-left {
width: 30px;
height: 150px;
float: left;
}
#wrapper-slide-bar-center {
width: 230px;
height: 185px;
float: left;
color: white;
}
#wrapper-slide-bar-right {
width: 25px;
height: 150px;
float: left;
}
#wrapper-slide-bar-center a:link {
color: black;
}
</style>
<!— Измененное визуальное оформленеие для слайд-бара —>
<div id=»wrapper-base-slide-bar-widget» style=»width: 290px; height: 220px; margin: 0 auto; position: relative;»>
<div id=»wrapper-slide-bar-header» style=»width: 290px; height: 30px; «><span style=»font-size: 18px; position: relative; color: green; font-weight: bold; margin-left: 30px; top: 5px;»>РЕКОМЕНДОВАННОЕ</span> <ul id=»slide-bar-list-ul»></ul></div>
<div id=»wrapper-group1″ style=»position: relative; width: 288px; height: 185px; «>
<div id=»wrapper-slide-bar-left»><span id=»left-button» style=»top: 50%; margin-top: -11px; margin-right: 5px; position: relative;display: block; width: 22px; height: 22px; float: right; border-radius: 5px 5px 5px 5px; background-image: url(‘http://infosona.ru/wp-content/uploads/2014/11/2015/10/strelka.png’); border: 1px solid green;» onclick=»prevVideoLink();»> </span></div>
<div id=»wrapper-slide-bar-center»></div> <!— В этот блок будут добавляться динамически ссылки на видео с кратким опиcанием —>
<div id=»wrapper-slide-bar-right»><span id=»right-button» style=»top: 50%; margin-top: -11px; margin-left: 3px; position: relative;display: block; width: 22px; height: 22px; border-radius: 5px 5px 5px 5px; background-image: url(‘http://infosona.ru/wp-content/uploads/2014/11/2015/10/strelka-1.png’); border: 1px solid green;» onclick=»nextVideoLink();»> </span></div>
</div>
</div>

Затем сохраняете и просматриваете. Не советую менять цвет т.к можно все поломать.

Если Вам понравится, пользуйтесь.

С уважением Вероника.

Ух ты, кнопочки! Нажми!

6 комментариев

  1. Большое спасибо, Вероника, поставил себе в блог.
    Класс!!!

  2. Огромная благодарность,Вероника! Уже сделала, Здорово.

  3. Слайдер «Популярное видео» эта классно и смотрица на блоге,и читателей приведёт куда надо. Хотелось бы поменять цвет скобочек сбоку на другой. Спасибо за замечательный слайдер.http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

  4. Вероника

    Рада за Вас, чтоВам это пригодилось. Пользуйтесь.http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif

  5. Вероника, отличный слайдер , смотрится очень красиво и самое главное удобно для наших посетителей. Спасибо огромное !

  6. Спасибо, Вероника, очень пригодилось)))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img src="" alt="" class="" width="" height="">

http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://infosona.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif