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

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

ОБСУЖДЕНИЕ

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

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

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

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

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

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....
Интересные публикации:

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

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

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

Kenburner слайдерKenburner слайдер v1.1

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

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....
  • Текущий 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
Обновить