Автор

Ротатор контента для сайта с помощью jQuery

Ротатор контента для сайта с помощью jQuery


 

Мультимедийные сайты широко заполонили просторы интернета, люди хотят делиться впечатлениями, изображениями и видео-файлами. Зачастую на фотосайтах или порталах можно заметить ротаторы контента, которые помогают сэкономить место на ресурсе. Ротатор весьма удобный элемент для сайта, ведь в него можно запихнуть все что душа пожелает, при этом сохранить уйму места на сайте. В данном уроке мы рассмотрим как создать замечательный автоматический ротатор контента для сайта с помощью jQuery.

 

ДЕМО
ИСХОДНИКИ

 

Идея заключается в том, что посетитель может листать слайдер не только с помощью стрелок, но и с помощью миниатюр. Также в ротаторе присутствует контейнер, в котором размещена дополнительная информация с возможностью прокрутки контента.

 

Шаг 1. HTML

Для начала мы рассмотрим разметку, в которой будет находиться контейнер с содержанием.

<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>Оглавление</h2>
 <h3>
 <span>Текст</span>
 <a href="#" class="cr-more-link">Читать далее ></a>
 </h3>
 </div>
 <div class="cr-content-text">
 <p>Some text here...</p>
 </div>
 </div>
 </div>
 <div class="cr-content-container" id="content-2">
 ...
 </div>
 ...
 </div>
 <div class="cr-thumbs">
 <div data-content="content-1" class="cr-selected">
 <img src="images/thumbs/1.jpg"/>
 <h4>Оглавление</h4>
 </div>
 <div data-content="content-2">
 <img src="images/thumbs/2.jpg"/>
 <h4>Читать</h4>
 </div>
 ...
 </div>
</div>

 

Шаг 2.  jQuery

Мы рассмотрим некоторые параметры которые присвоены по умолчанию, их можно изменить на свое усмотрение:

$('#cr-container').crotator({
 // Слайдер
 autoplay : false,
 // Интервал слайдера
 slideshow_interval : 3000,
 // Показ миниатюр сначала
 openThumbs : true,
 // Скорость появления миниатюр
 toggleThumbsSpeed : 300
});

 

Вот и все. Надеюсь у вас все получится. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Ротатор контента для сайта с помощью jQuery

Красивые эффекты заполонили сердца веб-мастеров, с выходом jQuery сайтостроение изменилось в корни, появились новые возможности, стали появляться различные плагины, подключив которые можно достичь невиданные ранее эффекты. Буквально на каждом сайте можно найти различные изображения, которые оформлены достаточно просто без всяких эффектов. В данном уроке мы рассмотрим как скрасить изображения и не только применив интересный плагин для разворота. PFold является очень экспериментальным jQuery плагином.


Ротатор контента для сайта с помощью jQuery

Большие изображения в шапке сайта часто используются в наши дни в качестве фона для сайта. Они визуально разделяют сайт на несколько важных разделов, при этом пользователи могут сосредоточиться на основных элементах — навигация, текстовая информация и призыв к действию. Изображения, зачастую, служат только визуальным украшением, но сегодня мы рассмотрим как сделать анимационную шапку сайта с эффектом зума и объемности, что будет весьма притягивать взор посетителей.


Ротатор контента для сайта с помощью jQuery

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.


Ротатор контента для сайта с помощью jQuery

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close