—»     —»   Вращение контента посредством jQuery
  Раздел: Скрипты и коды   Комментариев: 1  

Вращение контента посредством jQuery



Сегодня мы хотим поделиться с вами интересным эффектом вращения контента, реализованным с помощью jQuery. Он будет отображать изображения с заголовком и подзаголовком в каждом слайде, а посетители смогут переключаться между слайдами посредством миниатюр записей. Если скрыть миниатюры, то будет отображен контейнер с текстом, а стрелочки навигации переместятся вверх.

Вращение контента посредством jQuery

Изображения, использованные в примере, были позаимствованы у замечательных фотографов Андрея и Лили (Andrey & Lili). Изображения распространяются по лицензионному соглашению Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

Мы также применим jQuery-плагин «Mousewheel» от Брэндона Аарона (Brandon Aaron), а также плагин «jScrollPane» от Кевина Лака (Kevin Luck).

Примеры

У нас есть два примера: один с автоматическим воспроизведением, второй – без:

* Пример с автоматическим воспроизведением
* Пример без автоматического воспроизведения

Что касается HTML-кода, то здесь у нас будет основной контейнер, оболочка и контейнер для миниатюр. Каждому cr-content-container нужно задать ID, который будет отвечать за каждую миниатюру с параметром data-content:

<div class="cr-container" id="cr-container">
    <div class="cr-content-wrapper" id="cr-content-wrapper">
        <div class="cr-content-container" id="content-1" style="display:block;">
            <img src="images/1.jpg"class="cr-img"/>
            <div class="cr-content">
                <div class="cr-content-headline">
                    <h2>The slide title</h2>
                    <h3>
                        <span>Some sub-title</span>
                        <a href="#" class="cr-more-link"> read more &#8594;</a>
                    </h3>
                </div>
                <div class="cr-content-text">
                    <p>Some text here...</p>
                </div>
            </div><!-- cr-content -->
        </div><!-- cr-content-container -->
        <div class="cr-content-container" id="content-2">
            ...
        </div><!-- cr-content-container -->
        ...
    </div><!-- cr-content-wrapper -->
    <div class="cr-thumbs">
        <div data-content="content-1" class="cr-selected">
            <img src="images/thumbs/1.jpg"/>
            <h4>The slide title</h4>
        </div>
        <div data-content="content-2">
            <img src="images/thumbs/2.jpg"/>
            <h4>Another slide title</h4>
        </div>
        ...
    </div><!-- cr-thumbs -->
</div><!-- cr-container -->


По умолчанию у нас будут следующие опции:

$('#cr-container').crotator({
    // slideshow on
    autoplay             : false,
    // slideshow interval
    slideshow_interval     : 3000,
    // if true the thumbs will be shown initially
    openThumbs            : true,
    // speed that the thumbs are shown / hidden
    toggleThumbsSpeed    : 300
});


Надеемся, что вам понравился наш сегодняшний эффект и вы найдете ему применение!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 6839   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 11 февраля 2012 @ 10:46
Написал: andros — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Как по мне - очень удобное новшество.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2019    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031