3D Карусель Для Сайта : Nick

3D Карусель Для Сайта

Добро пожаловать на моем сайте.Я опять пишу интересные статьи для своих читателей, а рассмотрим мы сегодня возможность создания 3D каруселях для сайта.Для чего может понадобиться карусель? все очень просто, для динамического взаимодействия с читателем вашего интернет ресурса, и плюс к этом он выглядит роскошно,привлекает внимание "неосторожнйих" посетителей и его можно легко переделать под свой нужды.Итак давайте опишем процедуру для быстрого создания 3D каруселя.

Данное изобретение идет с сайта professorcloud.com.На сайте подробно описано процедура создания каруселя, но мы рассмотрим быструю и внятную методику его генерирования на страницах собственного сайта или блога.

1.Шаг первый
.Для начала нам нужен HTML каркас каруселя, ниже я привожу пример полной HTML страницы которая содержит весь необходимый код разметки а также скрипты языка Javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Carusel 3d</title>


<script type="text/javascript" src="js/jquery.js"></script>


<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>

<script>
$(document).ready(function(){

// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
xPos: 360,
yPos: 70,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text")
}
);
});

</script>
</head>

<body>

<div id = "carousel1" style="width:750px; height:400px;background:#2D342C; border:2px solid #3AE2CE; border-radius:4px; overflow:scroll;">


<img class = "cloudcarousel" src="logotip.png" alt="Free Templates For CMS" title="Nick Templates" />
<img class = "cloudcarousel" src="music-is-my-life.png" alt="Music Is My Life Template" title="Music Category" />
<img class = "cloudcarousel" src="comunications.png" alt="Comunications Template" title="Relations Category" />
<img class = "cloudcarousel" src="car-wash.png" alt="Luxury Car" title="Cars Category" />
<img class = "cloudcarousel" src="artefact.png" alt="Artefact Template" title="History Category" />
<img class = "cloudcarousel"src="big city.png" alt="Big City Template" title="Social Category" />
<img class = "cloudcarousel"src="template_preview.png" alt="Counter - Strike Template" title="Games Category" />
</div>


<input id="left-but" type="image" src="left.png" value="Left" />
<input id="right-but" type="image" src="right.png" value="Right" />


<div style=" width:750px; padding-left:10px; color:#D0FF00; height:80px;background:#2D342C; border:2px solid #3AE2CE; border-radius:4px; overflow:hidden;">
<p id="title-text"></p>
<p id="alt-text"></p>
</div>
</body>
</html>

2.Шаг второй.
Теперь нам нужно подключить библиотеку JQuery и библиотеку cloud-carousel.1.0.5 для правильного отображения каруселя.JQuery подключаем таким оброзом, между тегами <head> ... </head> пишем данную строку:
<script type="text/javascript" src="http://ajax.googleapis.com/ajах/libs/jquery/1.3.2/jquery.min.js"> </script> .Это означает что мы подключили JQuery с стороннего сайта.Не забываем подключить также библиотеку cloud-carousel.1.0.5 таким оброзом:

<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
В атрибуте src пишем правельный адрес до этого javascript файла.У меня в примере src="js/cloud-carousel.1.0.5.js"> файл находится в папке js.

3.Шаг третий.
На этом этапе мы подключим свои картинки для их отображения в каруселе, рекомендую подготовить их заранее, и желательно чтоб все они были единого размера.между тегами <body>....</body> ищем тег <img /> и для атрибута пишем src="полный адрес картинки" .Привожу пример:
<img class = "cloudcarousel" src="myhosting/images/template1.png" alt="Template 1 Description" title="Template 1 Title" />
Заметьте что для атрибута src пишем полный адрес до вашей картинки, в атрибуте alt пишем описание данной картинки, а в title ее заголовок, хотя это совсем не обязательно.Если вам нужны 5 картинок в каруселе, у вас должны быть 5 тегов <img />.

4.Шаг четвертый .
Настройка каруселя под своего сайта.После tega <body > находим следующий комментарии:

 это контейнер карусели, а на одну строку ниже находим параметры тега <div > и выглядит это строка так, <div id = "carousel1" style="width:750px; height:400px; background:#0f0; overflow:scroll;">

Для атрибута id ничего не меняем, иначе он не будет работать правильно или совсем не будет слушаться.Менять мы будем значения атрибутов width, height, background, и owerflow.Width это ширина каруселя, height это его высота, background это цвет фона, owerflow определяет что делать с контентом если он не влизает в задание параметры ( например у вас контейнер с шириной и высотой в 600x400 пикселей, а в нем картинка 640x410 px.).В моем примере скрол означает что контент если видит из заданных приделов он будет показываться с помощью полос прокрутки, также сушествуют значения hidden (скрытый) и auto (определять автоматически).Таким образом мы настроили внешний вид каруселя.

5.Шаг пятый .
Далее будем настраивать следующие параметры каруселя, расстояние между картинками ориентируясь по осям X и Y.Зададим параметр автоматического ворошения картинок, интервал вращения и его скорость .

- Расстояние между картинками следуем менять окутано ориентируясь по осям, для этого нам нужно сделать следующее:
Находим в HTML каркасе комментарии // This initialises carousels on the container elements specified, in this case, carousel1.Чуть ниже видим значения: (Пример xPos: 360 и yPos: 70).Нам придется поиграться с этими зачениями пока не получается красивое пропорциональное распределение картинок карусели.Далее открываем с помощью блокнота файл cloud-carousel.1.0.5 и прокручиваем его до самого конца, и выгладит он таким образом:

// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
$.fn.CloudCarousel = function(options) {

this.each( function() {

options = $.extend({}, {
reflHeight:0,
reflOpacity:0.5,
reflGap:0,
minScale:0.3,
xPos:0,
yPos:0,
xRadius:350,
yRadius:90,
altBox:null,
titleBox:null,
FPS: 30,
autoRotate: 'yes',
autoRotateDelay: 1000,
speed:0.01,
mouseWheel: false,
bringToFront: false
},options );
// Create a Controller for each carousel.
$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
});
return this;
};

})(jQuery);

Теперь меняем значения xRadius:350, и yRadius:90, для создания пространства между картинок и определения угла их отоброжения.Если чтото непонятно, попробуйте поиграться с этими значениями и сами все поймете.

- Ниже наим строку autoRotate: 'yes', это означает что мы выбрали режим автопрокручивания картинок, если вместо yes писать no то картинки сами не будут крутиться.

- Параметр autoRotateDelay: 1000, определяет через какое время должно повториться прокручивание в миллисекундах.Если вы желаете чтоб они крутились каждые 2 секунды, пишем вместо 1000, 2000.

- Параметр speed:0.01, определяет скорость прокручивания картинок.В маем слчии он оптимальный, вы с ним тоже можете поиграться.

* Теперь важной пункт оформления каруселя.Для прокрутки картинок используются кнопки left и right, я подумал что будет красивее если туда вместо классических кнопок поставить красивые яркие картинки, и соглоситесь что смотрятца лучше.Дале мы можем кросиво выводит ниже стрелок передвижения, имя картинки и ее описание.Для боле професианального уровня можем поставить как background красибю картинку, но это уже на ваше расмотрение.Ну вот и все, мы создали очень красивый и яркий карусель картинок.Исходные материалы вы можете скачать

Если всео прошло успешно и вы просто довольны статьой  то не поленитесь и посоветуйте ее кому то из друзей или оставьте ваш скромный LIKE на официальной Facebook странице Nick Templates.