Автор

05 04.2013
Ротатор контента для сайта с помощью 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
});

 

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


vk.com/club.ssdru

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


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

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

На некоторых сайтах вы, наверное, не разе замечали так называемые «Хлебные крошки», которые сохраняют путь пройденного вами пути на сайте. Это достаточно удобно, ведь позволяет быстро вернуться в необходимый раздел сайта. Но зачастую такие крошки достаточно не приметные, и пользователь не обращает на них внимание, при этот данный элемент на сайте теряет свою значимость. В данном уроке мы рассмотрим как стилизовать данные следы на сайте, чтобы они отлично привлекали взор посетителя и при этом выполняли свое задание.


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

Если вы хотите объедение приятное с красивым на своем блоге то этот  урок станет вам весьма полезен. Мы рассмотрим процесс создания простого автоматического слайдера с прикрепленным к нему аккордеоном вкладок с плавным раскрытием и выводом дополнительной информации. Для этого мы будем использовать плагин Slidorion. Имеется несколько опций, которые дают возможность настроить время показа слайдов, эффекты переходов между слайдами и включить/выключить автоматическое проигрывание.


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

Предлагаю Вам очень, на мой взгляд, интересный вариант Captcha. Но как готовый модуль его использовать можно только в том случае, если страница с формой  не перезагружается. Да и вообще это больше идея с которой еще надо поковыряться чтобы применить для Captcha. Хотя человеку со знанием JavaScript это будет делом 5-10 минут!


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close