RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

jQuery ротатор
Просмотров: 2480  Скачан: 238 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

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

Слайдер картинок на JqueryСлайдер картинок на Jquery

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

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

Отличный слайдер с богатым набором функций, можно использовать (видео, изображение, текст)....

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

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

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...
Интересные публикации:

GameleonGameleon

Gameleon – это отличная тема для создания игрового портала. Большой набор функций и гибкие настройки делают её очень удобной в использовании....

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

Горизонтальное меню на cssГоризонтальное меню на css

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......
  • Текущий 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
Обновить