qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

jquery ротатор для вывода контента

jQuery ротатор
Просмотров: 2722  Скачан: 255 раз  Комментариев в теме: 6

Jquery ротатор отлично подойдёт для вывода новостей, картинок на сайте, в довольно большом количестве, при этом сохранив драгоценное место на сайте. Если вам нужно вывести контент, и вам бы хотелось, при этом сделать это привлекательно и в тоже время компактно, спешу вас порадовать, вы нашли то, что искали. Представленный jquery Rotator подойдёт вам на все 100%.

Шаг 1 - создание разметки

 

HTML

<div class="cn_wrapper">
    <div id="cn_list" class="cn_list">
        <div class="cn_page" style="display:block;">
            <div class="cn_item selected">
                <h2>Polaroid Photobar Gallery with jQuery</h2>
                <p>Tutorial on how to create a gallery in polaroid style</p>
            </div>
            <div class="cn_item">
                <h2>Full Page Image Gallery with jQuery</h2>
                <p>Another tutorial on how to make a full page image gallery with some jQuery</p>
            </div>
            <div class="cn_item">
                <h2>Collapsing Site Navigation with jQuery</h2>
                <p>This tutorial shows how to create a stylish sliding site navigation</p>
            </div>
            <div class="cn_item">
                <h2>Thumbnails Navigation Gallery</h2>
                <p>This gallery will show images in a scrollable menu navigation</p>
            </div>
        </div>
        <div class="cn_nav">
            <a id="cn_prev" class="cn_prev disabled"></a>
            <a id="cn_next" class="cn_next"></a>
        </div>
    </div>
    <div id="cn_preview" class="cn_preview">
        <div class="cn_content" style="top:5px;">
            <img src="images/polaroidphotobar.jpg" alt=""/>
            <h1>Polaroid Photobar Gallery with jQuery</h1>
            <span class="cn_date">28/09/2010</span>
            <span class="cn_category">Tutorials</span>
                <p>
                    In this tutorial we are going to create an image gallery with a Polaroid look.
                    We will have albums that will expand to sets of slightly rotated thumbnails
                    that pop out on hover.
                </p>
            <a href="#" target="_blank" class="cn_more">Посмотреть</a>
        </div>
        <div class="cn_content">
            <img src="images/fullpageimagegallery.jpg" alt=""/>
            <h1>Full Page Image Gallery with jQuery</h1>
            <span class="cn_date">08/09/2010</span>
            <span class="cn_category">Tutorials</span>
                <p> 
                    In this tutorial we are going to create a stunning full page gallery with
                    scrollable thumbnails and a scrollable full screen preview.
                </p>
            <a href="#" target="_blank" class="cn_more">Посмотреть</a>
        </div>
        <div class="cn_content">
            <img src="images/collapsingsitenavigation.jpg" alt=""/>
            <h1>Collapsing Site Navigation with jQuery</h1>
            <span class="cn_date">06/09/2010</span>
            <span class="cn_category">Tutorials</span>
                <p> 
                    Today we will create a collapsing menu that contains vertical
                    navigation bars and a slide out content area. When hovering
                    over a menu item, an image slides down from the top and a
                    submenu slides up from the bottom.
                </p>
            <a href="#" target="_blank" class="cn_more">Посмотреть</a>
        </div>
        <div class="cn_content">
            <img src="images/thumbnailsnavigation.jpg" alt=""/>
            <h1>Thumbnails Navigation Gallery with jQuery</h1>
            <span class="cn_date">29/07/2010</span>
            <span class="cn_category">Tutorials</span>
                <p> 
                    In this tutorial we are going to create an extraordinary
                    gallery with scrollable thumbnails that slide out from a
                    navigation. We are going to use jQuery and some CSS3
                    properties for the style.
                </p>
            <a href="#" target="_blank" class="cn_more">Посмотреть</a>
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Bebas_400.font.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/buttons.js"></script>
Материалы по теме:

Kenburner слайдерKenburner слайдер

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью J...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....
Интересные публикации:

ElliotElliot

Неплохой html шаблон.сделанный с уклоном на вывод изображения, имеется два стиля (светлый и тёмный), на главной странице расположена карусель......

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

Скроллер картинокСкроллер картинок

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

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Menu»

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.
  • Текущий 1.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.3/5( Голосов 8 )

Комментариев в теме: (6)
↑ 0 ↓
Алекс
Вариант сомнительный. Теряется смысл компактности. На мой взгляд идея слайдера и должна была заключаться в том, что добавление вкладок должно быть неограниченное (ну разумное, конечно). При этом "дележка" вкладок на страницы должна возникать как бы автоматически.
В Вашем примере вкладки разделены на 2 страницы. Моих знаний недостаточно, чтобы в коде отыскать то самое место, которое отвечает за разделение вкладок на страницы.
Но в любом случае спасибо за отзывчивость.
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Прокомментировано пользователя: Алекс
Вариант сомнительный. Теряется смысл компактности. На мой взгляд идея слайдера и должна была заключаться в том, что добавление вкладок должно быть неограниченное (ну разумное, конечно). При этом "дележка" вкладок на страницы должна возникать как бы автоматически.
В Вашем примере вкладки разделены на 2 страницы. Моих знаний недостаточно, чтобы в коде отыскать то самое место, которое отвечает за разделение вкладок на страницы.
Но в любом случае спасибо за отзывчивость.

Вот, как вариант ещё один пример, тут все компактно и вкладок по больше.

Ответить Ответ с цитатой
↑ 0 ↓
Алекс
Прокомментировано пользователя: ADMIN
Вот, как вариант ещё один пример, тут все компактно и вкладок по больше.


Ну так уже поинтересней. Хотя суть описанной проблемы всё же остается.
Неужели где-то в коде жестко "зашиты" кол-во вкладок или страниц?
Всё равно спасибо. Редко, когда на сайтах можно дождаться от автора внятного ответа на свой комментарий.
Ответить Ответ с цитатой
↑ 0 ↓
Алекс
Прошу прощения. Именно на вашем сайте в исходниках в ротаторе две страницы по четыре вкладки.
Но проблема та же самая.
Как только начинаешь увеличивать контент - вся конструкция ломается.
Ответить Ответ с цитатой
↑ 0 ↓
Алекс
В этом ротаторе три страницы по четыре вкладки в каждой.
Если отлистать стрелками на последнюю страницу и в исходниках попытаться добавить, например, три вкладки, то по идее должна образоваться четвертая страница с вкладками.
Этого не происходит. Вкладки начинают "падать" куда-то вниз под стрелки навигации. Как решить эту проблему?
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Ну скролла в этом слайдере нет, но можно увеличить размер блока в css и js. Вот готовый пример.

Ответить Ответ с цитатой

Страницы: 1

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить