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

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

HTML Розмітка

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

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

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

Ротатор тексту

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

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

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

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

Прописувати js краще в кінці сторінки, перед закриваючим тегом