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

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

Сегодня покажу, как установить в блог слайдер популярное видео. Может Вы видели на блогах слайдер "Популярное видео". Пользователь нажимает на понравившее видео и переходят на него. Это очень удобно. Для того, чтобы установить слайдер переходите в админку блога и нажимаете на дизайн, затем добавляете гаджит 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/strelka.png)";
document.getElementById('left-button').style.borderColor = "green";
document.getElementById('right-button').style.backgroundImage = "url(http://infosona.ru/wp-content/uploads/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/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/strelka-1.png)";
document.getElementById('right-button').style.borderColor = "green";
document.getElementById('left-button').style.backgroundImage = "url(http://infosona.ru/wp-content/uploads/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/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/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/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 не будет опубликован. Обязательные поля помечены *

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