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

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

ОБСУЖДЕНИЕ

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

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

Rotator на css и jQueryRotator на css и jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

LibertyLiberty

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

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...
  • Текущий 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
Обновить