Красивое карусель - меню на JQUERY + видео пример - Примеры на jQuery и PHP, галереи на jQuery, плагины jQuery, рецепты на jQuery

Красивое карусель - меню на JQUERY + видео пример

Красивое карусель - меню на jQuery ( 3d ).

В этом примере будет рассказано как сделать такое меню с помощью jQuery и подключаемого плагина Сloud-Сarousel. Хотя плагин изначально предназначался разработчиком для создания 3d - галереи, где при клике на миниатюру подгружалась большая картинка, но нам ничего не мешает использовать его для создания красивого объемного и легко настраиваемого меню с установкой ссылок на нужные нам страницы! Все что нужно будет сделать - это заранее подготовить изображения которые и будут иконками у карусель - меню.

В моем примере использовались иконки формата PNG разрешением 100 Х 100 пикселей, в вашем это могут быть любые изображения и любого удобного для вас размера.

Когда я впервые увидел на заграничном сайте похожую карусель, я поcмотрел исходный код и узнал, что работает такая красота на jQuery, сразу наступили бессонные ночи с книгами и поисками jQuery плагинов каруселей и вот он результат!

Эта статья подготовлена так, что сделать такое карусель меню сможет любой пользователь, с любым уровнем подготовки!

В принципе, уже готовых изображений разного жанра и размера в сети достаточно много. Да и использование самого плагина абсолютно бесплатно! Также еще есть возможность подключения плагина jquery.mousewheel, что дает дополнительный эффект, а именно прокрутка влево или вправо пунктов меню с помощью колеса мыши! Или же можно просто разместить кнопки со стрелками или надписями влево и вправо, чтобы пользователь понял, что можно прокручивать пункты меню.

Стоит учитывать, пункты меню карусели стоит дублировать где - то на странице, так как подписи к изображениям вытаскиваются из атрибута тега title или alt! Для пользователя и для разработчика в этом ничего страшного нет, а вот поисковики по таким пунктам меню пройтись не смогут с пользой для вас!

Посмотреть пример работы

Скачать архив с исходниками

Смотрите также : Шаблон с каруселью на jQuery для Joomla 1.5

Итак приступим. Как и для большинства примеров на jQuery на этом сайте не лишним будет знание HTML и CSS, а также понимания как работает Javascript. Главное, что необходимо сделать со стороны HTML - это создать общий контейнер ( <div id="wrapper"> ) для всех элементов включая контейнер с самой каруселью, кнопки для прокрутки карусели, контейнер для подписей к пунктам меню.

Внутри основного контейнера ( <div id="wrapper"> ) будут располагаться следующие элементы :

<div id="title-carusel"></div> - контейнер для подписей к пунктам меню, в этом примере он спозиционирован с помощью абсолютного позиционирования прямо над центральной иконкой меню.
<div id="carousel"></div> - контейнер для иконок карусели ( пунктов меню ), в этом примере внутри него находится 15 иконок в формате PNG. Формат PNG использовался в основном из-за альфа канала ( прозрачность) и возможности добавления тени к иконке, что добавляет более красивый визуальный эффект.В вашем случае это могут быть любые изображения.
<input type="button" id="right-but"> и <input type="button" id="left-but"> - это кнопки для прокручивания карусели влево или вправо, они также как и контейнер для подписей спозиционированы с помощью абсолютного позиционирования, относительно элемента родителя ( <div id="wrapper"> ).

Код HTML :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Красивое карусель - меню на jquery</title>
        <link rel="stylesheet" href="/css/style.css" type="text/css">
        <script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
        <script type="text/JavaScript" src="/js/cloud-carousel.1.0.5.min.js"></script>
        <script type="text/JavaScript" src="/js/jquery.mousewheel.min.js"></script>
        <script type="text/JavaScript" src="/js/script.js"></script>
    </head>
    <body>
        <div id="wrapper">
         <div id="title-carusel"> </div>
            <div id = "carousel">            
                 <a href="#"><img class = "cloudcarousel" src="/images/aperture.PNG" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/browser.png" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/download_manager.png" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/globe.png" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/alfa.png" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/gift_100x100.png" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/Image00266.png" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/rewrewr.PNG" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/ktip.png" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/magic8ball.png" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/wwww.PNG" alt="" title=""></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/time_machine.PNG" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/Image00412.PNG" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/Image00154.PNG" alt="" title="" /></a>
                 <a href="#"><img class = "cloudcarousel" src="/images/Image00016.PNG" alt="" title="" /></a>
            </div>
                <input id="left-but"  type="button" value="Влево">
                <input id="right-but" type="button" value="Вправо">
            </div>
    </body>
</html>

Из приведенной выше HTML - разметки видно, что для реализации такого же меню важно иметь хотя бы базовые навыки работы с HTML. Все изображения в <div id="carousel"></div> заключены в тег <a></a> в атрибуте href="/ " которых стоит заглушка в виде символа # ( ссылка в никуда ), в рабочей версии вместо символа # прописывайте адреса страниц, предусмотренных под конкретный пункт меню. Это не является обязательным, карусель будет работать и просто на изображениях. Обязательным же является атрибут тега class равный cloudcarousel присвоенный каждому тегу <img />( картинка ), так как он используется в самом плагине Сloud-Сarousel.

Важно не забыть подключить javascript файлы к странице, их можно взять в архиве с исходниками или скачать с официальных сайтов :

<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script> - сама библиотека jQuery.
<script type="text/javascript" src="/js/cloud-carousel.1.0.5.min.js"></script> - файл плагина Сloud-Сarousel ( сжатый ).
<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script> - файл плагина отвечающий за прокручивание карусели колесом мыши.
<script type="text/javascript" src="/js/script.js"></script> - файл, где будет осуществляться jQuery - выборка и вызов метода CloudCarousel() с передачей параметров настройки карусели.

Если тут все понятно двигаемся дальше, если же возникли какие-то сложности с подключением javascript файлов посмотрите статью : Как добавить javascript на страницу там все подробно рассказано и даже есть видео - пример.

Код CSS ( подробное описание ниже ) :

body{
    background:url(../images/bg_body.png);
}
#wrapper{
    width:1000px;
    height:500px;
    position:relative;
    margin:0px auto;
}
#carousel{
    width:1000px;
    height:500px;
    overflow:scroll;
    margin:50px auto;
    background:url(../images/bg.png) repeat-y;
    border:3px solid #F3D1D9;
    border-radius:25px 25px 25px 25px;
    box-shadow:0 0 70px rgba(53,25,69,0.7);
}
#left-but{
    position:absolute;
    top:185px;
    left:10px;
    width:105px;
    height:100px;
    background:url(../images/left-button.png)no-repeat;
    border:0px;
    cursor:pointer;

}
#right-but{
    position:absolute;
    top:185px;
    right:10px;
    width:105px;
    height:100px;
    background:url(../images/right-button.png)no-repeat;
    border:0px;
    cursor:pointer;
}
#title-carusel{
    position:absolute;
    top:185px;
    left:445px;
    width:120px;
    height:40px;
    z-index:1;
    font-size:22px;
    font-weight:bold;
    font-style:italic;
    color:#4A0F40;
    text-align:center;
}
#carousel img{
    border:0px;
}

Описанные выше CSS - правила разбираем по порядку :

body - В виде фонового изображения определяется миниатурное, размером 2 x 2 пиксела изображение в фомате PNG, которое повторяется по вертикали и горизонтали заполняя все доступное место.
#wrapper - Фиксированная ширина равная 1000 пикселей. Фиксированная высота равная 500 пикселей. Позиционирование относительное. Внешний отступ сверху и снизу 0 пикселей, слева и справо автоматом ( центрирование внутри элемента родителя ).
#carousel - Фиксированная ширина равная 1000 пикселей. Фиксированная высота равная 500 пикселей. Добавление полосы прокрутки в случае если сожержимое занимает место больше чем элемент контейнер. Внешний отступ сверху и снизу 50 пикселей, слева и справо автоматом ( центрирование внутри элемента родителя ). В виде фонового изображения полоска с градиентной заливкой шириной 1000 пикселей и высотой 10 пикселей с повторением по горизонтали. Сплошная рамка размером 3 пиксела светло - розового цвета. Скругление углов ( спецификация CSS3 работает только в современных браузерах ) по 25 пикселей с каждой стороны. Плавная тень вокруг элемента темно - фиолетового цвета ( спецификация CSS3 работает только в современных браузерах ).
#left-but - Абсолютное позиционирование относительно элемента родителя ( <div id="wrapper"> ) которому задано относительное позиционирование, от верхнего края 185 пикселей, от левого края 10 пикселей. Фиксированная ширина равная 105 пикселей ( ширина фонового изображения стрелки ). Фиксированная высота равная 100 пикселей ( высота фонового изображения стрелки ). В виде фона изображение стрелки, с отменой повторения. Удаление рамки вокруг кнопки. Курсор мыши приобретает вид руки, при наведении на кнопку.
#right -but - Абсолютное позиционирование относительно элемента родителя ( <div id="wrapper"> ) которому задано относительное позиционирование, от верхнего края 185 пикселей, от правого края 10 пикселей. Фиксированная ширина равная 105 пикселей ( ширина фонового изображения стрелки ). Фиксированная высота равная 100 пикселей ( высота фонового изображения стрелки ). В виде фона изображение стрелки, с отменой повторения. Удаление рамки вокруг кнопки. Курсор мыши приобретает вид руки, при наведении на кнопку.
#title-carusel - Абсолютное позиционирование относительно элемента родителя ( <div id="wrapper"> ) которому задано относительное позиционирование, от верхнего края 185 пикселей, от левого края 445 пикселей, в вашем случае эти значения могут быть другими в зависимости от размера изображений карусели и ее конфигурации, в данном случае этот блок позиционировался для вывода в него подписей к изображениям карусели ( пунктам меню ) прямо над центральным изображением. Фиксированная ширина равная 120 пикселей, опять же в зависимости от размера текста и его длинны эти значения необходимо будет поправить. Фиксированная высота равная 40 пикселей. Вывод элемента на передний план ( z-index ). Размер шрифта 22 пиксела, полужирный, курсив, темно фиолетового цвета. Выравнивание текста по центру.
#carousel img - удаление рамок.

Код JQUERY ( подробное описание ниже ) :

           
$(document).ready(function(){
    $("#carousel").CloudCarousel({
        xPos: 500,
        yPos: 132,
        mouseWheel: true,
        reflOpacity: 0.3,
        minScale: 0.25,
        reflHeight: 100,
        reflGap: 4,
        bringToFront: true,
        titleBox: $("#title-carusel"),
        buttonLeft: $("#left-but"),
        buttonRight: $("#right-but")
    });
});

Код JQUERY написанный выше начинается со стандартной конструкции $(document).ready(function(){ }); обеспечивающей выборку элементов, только после того как сформировалось DOM - дерево объектов и узлов. Далее следует jquery - выборка по атрибуту тега id равному carousel, а именно блок с нашими картинками и у него вызывается метод CloudCarousel, с передачей параметров в виде литерала объекта, где возможна передача сразу нескольких параметров, типа свойство : значение разделенных запятыми, в данном примере используются не все возможные параметры настройки плагина Смотри ниже таблицу всех настроек плагина.

Все параметры настройки плагина Cloud-Carousel:

Параметр	Описание от версии 1.0.0	Значение по умолчанию
minScale	Определяет минимальный размер самого дальнего изображения. Для плавного перехода в размерах от дальних изображений к ближним рекомендуемое значение 0.25.	0.5
reflHeight	Определяет высоту зеркального отражения картинок в пикселах.	0
reflGap	Определяет размер пространства между картинками и зеркальным отражением в пикселах.	0
reflOpacity	Определяет степень прозрачности зеркального отражения, где 1 = полностью непрозрачный. Шаг по 0.1.	0.5
xRadius	Определяет ширину круга карусели.	Ширина контейнера / 2.3
yRadius	Определяет угол наклона карусели.	Высота контейнера / 6
xPos	Определяет позицию карусели по горизонтали. Рекомендуемое значение 50% от ширины контейнера.	0
yPos	Определяет положение карусели по вертикали. Рекомендуемое значение 50% от высоты контейнера.	0
buttonLeft	В значении свойства этого параметра используется ссылка на элемент который будет служить кнопкой для поворота карусели влево сделанная с помощью jquery - выборки. Выбираемый элемент должен быть за пределами блока с изображениями в HTML - разметке.	null
buttonRight	В значении свойства этого параметра используется ссылка на элемент который будет служить кнопкой для поворота карусели вправо сделанная с помощью jquery - выборки. Выбираемый элемент должен быть за пределами блока с изображениями в HTML - разметке.	null
titleBox	В значении свойства этого параметра используется ссылка на элемент в котором будет отображаться содержимое атрибута тега title, в момент наведения указателя мыши на изображение. Ссылка передается в виде jquery - выборки. Выбираемый элемент должен быть за пределами блока с изображениями в HTML - разметке.	null
altBox	В значении свойства этого параметра используется ссылка на элемент в котором будет отображаться содержимое атрибута тега alt, в момент наведения указателя мыши на изображение. Ссылка передается в виде jquery - выборки. Выбираемый элемент должен быть за пределами блока с изображениями в HTML - разметке.	null
FPS	Определяет частоту кадров в секунду, при прокрутке карусели. Чем больше значение, тем более плавно происходит прокрутка. Слишком большое число в виде значения этого параметра может вызвать подвисание браузера. Значение по умолчанию равное 30 является рекомендуемой золотой серединой между производительностью и плавностью прокрутки.	30

Параметры доступные в версии 1.0.1.

Параметр	Описание от версии 1.0.1	Значение по умолчанию
speed	Определяет скорость прокрутки карусели. Рекомендуемое значение 0.1-0.3. Значения параметра должны быть больше 0 и меньше 1.	0.2
autoRotate	Определяет будет ли карусель прокручивается автоматически и в какою сторону. Возможные значения 'left' или 'right'. Автопрокрутка останавливается при наведении указателя мыши на блок с каруселью.	'no'
autoRotateDelay	Определяет задержку между прокручиванием карусели в миллисекундах. Рекомендуемое значение 1000 (одна секунда).	1500

Параметры доступные в версии 1.0.2.

Параметр	Описание от версии 1.0.2	Значение по умолчанию
mouseWheel	Определяет возможность прокрутки карусели с помощью колеса мыши. Для работы необходим плагин jquery.mousewheel. и значение параметра поставленное в true. Загрузить плагин можно по адресу: http://plugins.jquery.com/project/mousewheel	false

Параметры доступные в версии 1.0.4.

Параметр	Описание от версии 1.0.4	Значение по умолчанию
bringToFront	Определяет активность элементов на заднем плане. То есть при клике на элемент находящийся на заднем плане срабатывает анимация прокрутки. Для включения параметра необходимо значение true.	false

Автор плагина : Raff Cecco. Cайт разработчика : www.professorcloud.com

Видео - пример как сделать карусель меню на jQuery :

В этом видео примере показаны основные телодвижения, под приятную музыку.

Справочные материалы по PHP JQUERY и MYSQL

Красивое карусель - меню на JQUERY + видео пример