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>

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript"  src="js/jquery.js"></script>

<!-- Load the CloudCarousel JavaScript file -->
<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>
<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:750px; height:400px;background:#2D342C; border:2px solid #3AE2CE; border-radius:4px; overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <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>
        
        <!-- Define left and right buttons. -->
        <input id="left-but"  type="image" src="left.png" value="Left" />
        <input id="right-but" type="image" src="right.png" value="Right" />
        
        <!-- Define elements to accept the alt and title text from the images. -->
        <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 > находим следующий комментарии:

<!-- This is the container for the carousel. --> это контейнер карусели, а на одну строку ниже находим параметры тега <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.

0 Коментариев к “3D Карусель Для Сайта ”

Отправить комментарий

Все права зашищены Nick - Templates | Blogger Template by Bloggermint