Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Ротатор контента в модальном окне

Здравствуйте всем!
Написать эту статью навел меня на мысль один комментарий к записи о создании модального окна.

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

Меня эта идея заинтересовала и я стал искать решение, идея оказалась не нова, но что-нибудь стоящее мне на глаза не особо попадалось. Тогда я решил найти простой в исполнении слайдер или и объединить его с уже готовым модальным окном. Побродив по просторам интернета, у буржуинов отыскался подходящий по всем параметрам, простенький контента. Скачав исходники, выдернув только все самое нужное, javascript и html-каркас блока ротатора, на удивление легко прикрутил все это к модальному окну. Для разнообразия и дабы проверить возможности всей конструкции, вставил в прокрутку вместе с текстом не большое изображение, все заработало в лучшем виде.
 
Ротатор контента в модальном окне

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

HTML Разметка

Наш ротатор построен в виде списка и ничего большего, начальному тегу <ul> присвоен идентификатор id="tips", каждый новый контент для прокручивания размещаем между тегами <li> и </li>, получиться должно примерно следующее:

<ul id="tips">
        <li><img style="float: left; margin: 5px 10px 5px 0;" src="klen.png" alt="" /> ... Вы смотрите один из примеров создания модального окна с помощью CSS и немного jQuery, с возможностью вставки изображения.</li>
        <li>... В данном примере показано окно шириной 500px.</li>
        <li>...Для вывода других окон просто присваиваете имя новому окну, прописываете в атрибуте <strong>rel</strong>, типа <strong>popup1,2,3</strong> и т.д,</li>
        <li>... и конечно не забываем про идентификатор id, соответственно выставляем такой же.</li>
        <li>... Устанавливаете ширину окна в теге <code>&lt;a&gt;</code> и c чуством непомерной гордости за себя, любуетесь результатом.</li>
</ul>

 

Теперь нам остается внедрить всю эту конструкцию в блок модального окна, окно же представляет из себя стандартный div-контейнер, спрятанный до поры до времени( читайте подробности), именно в него мы и встраиваем ротатор:

 

<div id="popup_name" class="popup_block">
<h2>Ротатор текста</h2>
<ul id="tips">
        <li><img style="float: left; margin: 5px 10px 5px 0;" src="klen.png" alt="" /> ... Вы смотрите один из примеров создания модального окна с помощью CSS и немного jQuery, с возможностью вставки изображения.</li>
        <li>... В данном примере показано окно шириной 500px.</li>
        <li>...Для вывода других окон просто присваиваете имя новому окну, прописываете в атрибуте <strong>rel</strong>, типа <strong>popup1,2,3</strong> и т.д,</li>
        <li>... и конечно не забываем про идентификатор id, соответственно выставляем такой же.</li>
        <li>... Устанавливаете ширину окна в теге <code>&lt;a&gt;</code> и c чувством непомерной гордости за себя, любуетесь результатом.</li>
</ul>
<p style="text-align: right;"><a href="">Shurawi</a></p>
</div>

 

Чтобы вызвать окно к работе нам понадобится ссылка сформированная таким образом:

 

<a class="poplight" href="#?w=500" rel="popup_name">Открыть Окно - Ширина = 500px</a>

Ширина окна задаётся непосредственно в адресе ссылки href="#?w=500" и обрабатывается с помощью плагина , напомню некоторые параметры:

  • href="#?w=500" указывает ширину окна
  • rel уникальный атрибут для каждого окна
  • class="poplight" класс для показа всплывающего окна

 

CSS

Оформление ротатора через таблицу стилей сводится к минимуму, но если у кого-то есть желание и обуревает неуемная фантазия, тот может экспериментировать с параметрами сколько душе угодно, а так, все лаконично и без особых наворотов:

#tips, #tips li {
        margin:0;
        padding:0;
        list-style:none;
        }
#tips {
        width:100%;
        font-size:14px;
        line-height:1.3em;
        }
#tips li {
        padding:20px;
        display:none; 
}

 

Вот практически и всё, остается только оживить весь механизм с помощью javascript jQuery. Для этого подключаем к документу библиотеку jQuery, на мой взгляд, лучше это делать напрямую с серверов Google:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 
Прописывать js лучше в конце страницы, перед закрывающим тегом </body>. Здесь же запускаем плагин jQury модального окна и ротатора контента:
 

<script type="text/javascript">
    // Модальное окно
$(document).ready(function(){
//При нажатии на ссылку с классом poplight и href атрибутом тега <a> с #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //получаем имя окна, важно не забывать, при добавлении новых, менять имя в атрибуте rel ссылки
        var popURL = $(this).attr('href'); //получаем размер из href атрибута ссылки
 
        //запрос и переменные из href url
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //первое значение строки запроса
 
        //Добавляем к окну кнопку закрытия
        $('#' + popID).fadeIn().css({ 'max-width': Number( popWidth ) }).prepend('<a href="#" title="Закрыть" class="close"></a>');
 
        //Определяем маржу(запас) для выравнивания по центру (по вертикали и горизонтали) - мы добавляем 80 к высоте / ширине с учетом отступов + ширина рамки определённые в css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
        //Устанавливаем величину отступа
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
 
        //Добавляем полупрозрачный фон затемнения
        $('body').append('<div id="fade"></div>'); //div-контейнер будет прописан перед тегом </body>.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //полупрозрачность слоя, фильтр для тупого IE
 
        return false;
    });
 
    //Закрываем окно и фон затемнения
    $(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна, т.е. по фону...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //плавно исчезают 
    });
    return false;
   });
});
// Ротатор контента
this.randomtip = function(){
 
    var pause = 5000; // пауза между показом контента (в милесекундах) увеличивая или уменьшая регулируете скорость ротации :)
    var length = $("#tips li").length; 
    var temp = -1;          
 
    this.getRan = function(){
        // получить случайное число
        var ran = Math.floor(Math.random()*length) + 1;
        return ran;
    };
    this.show = function(){
        var ran = getRan();
        // чтобы избежать повторения необходимо проверить,
        while (ran == temp){
            ran = getRan();
        }; 
        temp = ran;
        $("#tips li").hide();      
        $("#tips li:nth-child(" + ran + ")").fadeIn("fast");               
    };
    // инициировать сценарий, а также задать интервал
    show(); setInterval(show,pause);
 
};
 
$(document).ready(function(){       
    randomtip();
});        
</script>

 
Вы можете весь javascript объединить и упаковать в отдельный файл, обозвать его как-нибудь, например main-script.js и затем подключить к странице.
На этом всё, интеграция ротатора контента в проведена успешно и ещё один полезный инструмент готов к работе на ваших проектах. Надеюсь кому-нибудь да пригодится, возникнут вопросы или дополнения, пишите в комментариях. Вместе все у нас получится. Ещё раз смотрим пример и при желании качаем исходники:

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 1

  • Маргарита: 17 августа, 2016 в 14:59

    Очень красиво и интересно!

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>