Внимание! Данный раздел закрыт и доступен только для чтения в связи с запуском нового проекта uВопросы, на котором Вы можете найти ответ или задать любой интересующий вопрос по системе uCoz. Задавайте вопросы, ищите ответы и помогайте найти ответы другим пользователям системы! Получайте баллы и открывайте новые достижения. Подробнее в блоге...

Перейти на новый сайт помощи по uCoz


Страница 1 из 11
Архив - только для чтения
Модератор форума: Shеriff, JonMagon, Yuri_G 
Сообщество uCoz » Архивариус » Вопросы новичков (первые шаги в системе) » Слайдер в блоке на главной сайта
Слайдер в блоке на главной сайта
EXido0661
Сообщений: 13
Репутация: 3

Сообщение # 1 | 22:29:22
Добрый вечер. Хочу в блоке на главной странице сайта организовать слайдер, который автоматически переключал бы скрипты с мониторингами серверов.
Пример скрипта мониторинга от gametracker.com :
Код
<a href="http://www.gametracker.com/server_info/91.217.254.206:27016/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/91.217.254.206:27016/b_160_400_1_ffffff_c5c5c5_ffffff_000000_0_1_0.png" border="0" width="160" height="248" alt=""/></a>
Визуальный пример проблемы:

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


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

playh4rd.tk
Сообщение отредактировал EXido0661 - Пятница, 08 Авг 2014, 22:41:02
webanet
Личный менеджер
Сообщений: 22849
Репутация: 4857

Сообщение # 2 | 23:18:14
EXido0661, вам надо поискать в гугле или яндексе по запросу ротатор контента

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
freeviruswilly
Сообщений: 13
Репутация: 3

Сообщение # 3 | 00:01:44
Частично продвинулся в решении вопроса!
В глобальный блок "Верхняя часть сайта" добавил скрипт на вызов плагина Fade Iterator на jQuery.

Код
<script type="text/javascript" src="/js/jquery.fadeIterator.js" ></script>      
     <script type="text/javascript" >      
     $(function(){      
     $('.cont').fadeIterator({limit:5,speed:2000};);      
     };);      
     </script>

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

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

Код
<div class="cont" >      
     <p>1</p>      
     <p>2</p>      
     <p>3</p>      
     <p>4</p>      
     <p>5</p>      
     <p>6</p>      
     <p>7</p>      
     <p>8</p>      
     <p>9</p>      
     </div>
Где между <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
Сообщество uCoz » Архивариус » Вопросы новичков (первые шаги в системе) » Слайдер в блоке на главной сайта
Страница 1 из 11
Поиск: