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

65

Доброго дня всім!
Написати цю статтю навів мене на думку один коментар до запису про створення модального вікна.

У своєму коментарі читач задає питання, а чи можна інтегрувати, вбудувати всередину модального вікна, якийсь слайдер, і не тільки для картинок, але і для текстового змісту, щось типу не великий автоматичної листалки.

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

Дивитися Демо

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

HTML-Розмітка

Наш ротатор побудований у вигляді списку і нічого більшого, початкового тегу

    присвоєний ідентифікатор id=”tips”, кожен новий контент для прокручування розміщуємо між тегами

  • і
  • , повинно вийти приблизно наступне:

    • ... Ви дивитеся один з прикладів створення модального вікна за допомогою CSS і трохи jQuery, з можливістю вставки зображення.
    • ... В даному прикладі показано вікно шириною 500px.
    • ...Для виводу інших вікон просто привласнюєте ім'я новому вікну, прописуєте атрибута rel, типу popup1,2,3 і т. д,
    • ... і звичайно не забуваємо про ідентифікатор id, відповідно виставляємо такий же.
    • ... Встановлюєте ширину вікна в тезі <a> і c чуством непомірною гордості за себе, милуєтесь результатом.
    • … Ви дивитеся один з прикладів створення модального вікна за допомогою CSS і трохи jQuery, з можливістю вставки зображення.
    • … В даному прикладі показано вікно шириною 500px.
    • …Для виводу інших вікон просто привласнюєте ім’я новому вікну, прописуєте атрибута rel, типу popup1,2,3 і т. д,
    • … і звичайно не забуваємо про ідентифікатор id, відповідно виставляємо такий же.
    • … Встановлюєте ширину вікна в тезі <a> і c чуством непомірною гордості за себе, милуєтесь результатом.

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

    Щоб викликати вікно до роботи нам знадобиться посилання сформована таким чином:

    Відкрити Вікно - Ширина = 500px

    Відкрити Вікно – Ширина = 500px

    Ширина вікна задається безпосередньо в адресі посилання href=”#?w=500″ та обробляється за допомогою плагіна jQuery, нагадаю деякі параметри:

    • 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.3 em;
    }
    #tips li {
    padding:20px;
    display:none;
    }

    #tips, #tips li {
    margin:0;
    padding:0;
    list-style:none;
    }
    #tips {
    width:100%;
    font-size:14px;
    line-height:1.3 em;
    }
    #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">

    Прописувати js краще в кінці сторінки, перед закриваючим тегом . Тут же запускаємо плагін jQury модального вікна і ротатора контенту:

    <script type="text/javascript">
    // Модальний
    $(document).ready(function(){
    //При натисненні на посилання з класом poplight та href атрибутом тегу #
    $('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(");
    //Визначаємо маржу(запас) для вирівнювання по центру (по вертикалі і горизонталі) - ми додаємо до 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 контейнер буде прописаний перед тегом . $('#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(); });

    // Модальний
    $(document).ready(function(){
    //При натисненні на посилання з класом poplight та href атрибутом тегу #
    $(‘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(“);//Визначаємо маржу(запас) для вирівнювання по центру (по вертикалі і горизонталі) – ми додаємо до 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 контейнер буде прописаний перед тегом .
    $(‘#fade’).css({‘filter’ : ‘alpha(opacity=80)’}).fadeIn(); //напівпрозорість шару, фільтр для тупого IEreturn 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();
    });

    Ви можете весь javascript об’єднати і упакувати в окремий файл, обізвати його як-небудь, наприклад main-script.js і потім підключити до сторінки.
    На цьому все, інтеграція ротатора контенту в модальний проведена успішно і ще один корисний інструмент готовий до роботи на ваших проектах. Сподіваюся, кому-небудь та стане у нагоді, виникнуть питання або доповнення, пишіть в коментарях. Разом все у нас вийде. Ще раз дивимося приклад і при бажанні качаємо исходники:

    ДемоИсходники

    З Повагою, Андрій .

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