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

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

ОБСУЖДЕНИЕ

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

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

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Navigation SlaiderNavigation Slaider

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

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

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...
Интересные публикации:

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

Sngine - это движок социальной платформы, с помощью его вы можете создать социальный сайт или же онлайн сообщество....

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

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

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Меню с выпадающими пунктами на css

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro - jQu...

Красивый слайдер на 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
Обновить