Слайдер в блоке на главной сайта

Сообщение # 1 | 22:29:22 08 Авг 2014

Добрый вечер. Хочу в блоке на главной странице сайта организовать слайдер, который автоматически переключал бы скрипты с мониторингами серверов.
Пример скрипта мониторинга от gametracker.com :

Код

Визуальный пример проблемы:

Цитата

Задача в том, чтоб не делать десяток таких блоков с мониторингом, а вставить несколько мониторингов, которые переключались бы слайдером в одном блоке.

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

Прикрепления: 3128811.jpg (198.1 Kb)

playh4rd.tk

Сообщение отредактировал EXido0661 - Пятница, 08 Авг 2014, 22:41:02

Сообщение # 3 | 00:01:44 09 Авг 2014

Частично продвинулся в решении вопроса!
В глобальный блок "Верхняя часть сайта" добавил скрипт на вызов плагина Fade Iterator на jQuery.

Код

limit:5 - сколько строчек будут отображаться
speed:2000 - с какой скоростью будет происходить затухание элемента + смена

В блок на главной добавил код

Код

Где между <p>1</p> вместо 1, 2, 3 и т.д. можно вставить код html на что угодно, в моем случае на мониторинг.
Но окончательно это всё равно не решает проблему.
1) Даже если установлен только один код, скрипт всё-равно продолжает работу (изображение затухает и спустя время таким же образом возникает);
2) Недостаточно долгая задержка изображений. Хотелось бы, чтоб изображение менялось каждые 5-10 секунд, например, но с быстрым "затуханием" либо вообще без затухания, просто смена.
Прикладываю сам файл плагина Fade Iterator и его код сюда.

Код

/*
Jquery plugin name : Fade Iterator v 0.1
description : iterate throw some elements in a container,
            fade first then show the nex hidden and so on.
author : Emad Elsaid
Date : Feb 20 2010
Application : Dreamweaver CS4
paramters :
limit: the elements number in container default:3 (optional)
speed: elements animation speed default:1000(one second) (optional)
*/
(function($) {

      $.fn.fadeIterator = function(settings) {
        var config = $(settings).extend({limit:3,speed:1000},settings);
        if (settings) $.extend(config, settings);


        this.each(function() {
         var $cont = $(this);
           var $ele = new Array();
         //get all the elements from container
         var $elements = $cont.children().each(function(){
                    $ele.push(
                      $(this)
                      .clone()
                      .css('opacity',0)
                      )
                    $(this).remove();
                  };);
         //reverse them to be in the right order
         $ele.reverse();
         //add the initial elements to container
         for(i=0;i<config.limit && $ele.length>0 ;i++)
         {
            $ele.pop().appendTo($cont).css('opacity',1);
         }


         function step()
         {
            $cont.children(':first').animate({opacity:0},config.speed,function(){
                      $ele.reverse();
                      $ele.push( $(this).clone() );
                      $(this).remove();
                      $ele.reverse()
                      .pop()
                      .appendTo($cont)
                      .animate({opacity:1},config.speed,step);
                      };);
         }
         step();
        };);

        return this;

      };

    };)jQuery);

fade iterator скачать

UPD: Постарался применить pause_on_hover: true, но кривые руки не позволили мне это сделать weep

playh4rd.tk

Сообщение отредактировал freeviruswilly - Суббота, 09 Авг 2014, 00:20:27

Страница 1 из 1 1	Архив - только для чтения
Модератор форума: Shеriff, JonMagon, Yuri_G