jCarousel Lite не является заменой для плагина jCarousel, скорее всего он является легкой альтернативой для пользователей, основной упор делается не на создание полномасштабной галереи изображений. Из-за своей легкости, его можно использовать под любые нужды, к примеру если у вас есть какие-то новости, то их можно заключить в плагин, и это будет очень интересно и красиво.

Ну да ладно, на этом остановим пиар этого плагина и приступим к его установке, установка очень проста и мы уложимся в три шага:

Шаг 1:

Для начала нам нужно подключить ссылки на библиотеку jQuery и плагин jCarouselLite. Вы можете скачать jQuery и jCarouselLite соответственно здесь и здесь. Если вам нравятся интересные эффекты, то вы можете подключить облегченную версию плагина, это конечно по желанию. Также если Вам хочется чтобы карусель передвигалась при помощи колеса мышки, то нужно скачать этот плагин и соответственно его подключить.

<script src=»path/to/jquery.js» type=»text/javascript»></script>
<script src=»path/to/jcarousellite_1.0.1.js» type=»text/javascript»></script>

<!— Облегченная версия —>
<script src=»path/to/easing.js» type=»text/javascript»></script>
<!— Навигация колесиком мышки —>
<script src=»path/to/mousewheel.js» type=»text/javascript»></script>

Шаг 2:

Теперь нам нужно внести необходимый код в самом файле HTML, сделать необходимые разметки для нашей будущей карусели. Необходимо также прописать кнопки навигации, но эти кнопки не должны быть частью самой карусели. Пример кода:

<button class=»prev»> <- </button>
<button class=»next»> -> </button>

<div class=»anyClass»>
<ul>
<li><img src=»someimage» alt=»" width=»100″ height=»100″ ></li>
<li><img src=»someimage» alt=»" width=»100″ height=»100″ ></li>
<li><img src=»someimage» alt=»" width=»100″ height=»100″ ></li>
<li><img src=»someimage» alt=»" width=»100″ height=»100″ ></li>
</ul>
</div>

Шаг 3:

Теперь нам нужно добавить в код документа функцию вызова плагина и кнопок навигации. Вот пример кода:

$(function() {
$(«.anyClass»).jCarouselLite({
btnNext: «.next»,
btnPrev: «.prev»
});
});

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

Прежде всего нам необходимо подключить фреймворк и файл плагина.

<script src=»jquery-1.3.2.min.js» type=»text/javascript»></script>
<script src=»jquery.meerkat.js» type=»text/javascript»></script>

Далее производим инициализацию необходимой основной функции:

<script type=»text/javascript»>// <![CDATA[
$(document).ready(function(){
meerkat();
});
// ]]></script>

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

Последним шагом будет вставка Div с необходимым текстом где-либо в документе (лучше всего перед закрывающим тегом ). Обязательно id должно быть meerkat.

<div id=»meerkat»>Meerkat Content Goes Here</div>

Значения по умолчанию данного плагина будут такими:

meerkat({
showMeerkatOnLoad: ‘false’,
close: ‘none’,
dontShow: ‘none’,
dontShowExpire: 0,
removeCookie: ‘none’,
meerkatPosition: ‘bottom’,
animation: ‘slide’,
animationSpeed: ‘slow’,
height: ‘auto’,
background: ‘none’
});

Подробнее об опциях плагина:

showMeerkatOnLoad — принимает два значения: true или false. Когда true, плагин будет показываться при вызове функции (при загрузке страницы). Когда false, плагин будет работать только при нажатии на кнопку.
По умолчанию — «false»

close — данная опция принимает любой селектор (к примеру, «.close» или «#close»). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт.
По умолчанию — «none»

dontShow — данная опция принимает любой селектор (к примеру, «.dont-show» или «#dont-show»). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт и не будет показан до перезагрузки браузера или до истечения определенного количества дней (зависит от dontShowExpire)
По умолчанию — «none»

dontShowExpire — если Вы задаете эту опцию, у Вас есть возможность определить длительность периода «не отображения» данного плагина. Значение может быть в интервале от 0 до 365. Кроме этого можно указать 0.5 (плагин не будет показываться 12 часов). Если укажите 3, тогда не будет работать 3 дня.
По умолчанию — «0″

removeCookie — используется для удаления Cookie, которое создается опцией dontShow. Опция removeCookie принимает любой селектор (к примеру, «.remove-cookie» или «#remove-cookie»).
По умолчанию — «none»

meerkatPosition — принимает два значения top или bottom (верх или низ). Тут, я думаю, все понятно.
По умолчанию — «bottom»

animation — 2 значение — slide или fade. Можно варьировать разные типы анимации показаскрытия плагина.
По умолчанию — «slide»

animationSpeed — скорость анимации. Принимает три значения («slow», «normal», или «fast») или кол-во милисекунд для анимации (например, 1000).
По умолчанию — «slow»

height — возможно указать высоту блока с помощью всех возможных единиц измерения CSS (px, em, %, auto, и т.д.).
По умолчанию — «auto»

background — можно задать фоновый цвет или изображение. Пример: background: ‘#000 url(/path/to/bgimage.jpg) no-repeat left top’
По умолчанию — «none».

Если же вам необходимо посмотреть больше примеров, то вы можете просмотреть их здесь. Спасибо за внимание.

Для этого нам понадобится сама библиотека, скачать ее можно тут: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js, и плагин к ней ajaxContent, скачать http://www.andreacfm.com/zips/ajaxContent2.1b.zip, а для тех, кто хочет изучить возможности плагина, вот ссылка на документацию. Чтобы из формы брать данные нам нужен плагин Forms, но он лежит в архиве с предыдущим плагином, так что все нормально. Сделаем простой пример: Есть форма со следующими полями Имя, Фамилия, Должность. При нажатии кнопки отправить, нам должно вывести все эти данные ниже, причем страница не должна перезагрузится. Код формы:

<form>
<label for=»fname»>Имя:</label><input name=»fname» id=»fname»><br>
<label for=»lname»>Фамилия:</label><input name=»lname» id=»lname»><br>
<label for=»doljnost»>Должность:</label><select name=»doljnost» id=»doljnost»>
<option value=»Программист»>Программист
<option value=»Бухгалтер»>Бухгалтер
<option value=»Директор»>Директор
</form>

Шаг 1: Сначала конечно перепишем файлы jQuery.js, ajaxContent.js и forms.js в какую-нибудь папку в корне сайта, например в /jquery. Затем подключим эти файлы на странице, где хотим реализовать данны пример:

<script src=«/jquery/jquery.js» language=«javascript»></script>
<script src=«/jquery/ajaxContent.js» language=«javascript»></script>
<script src=«/jquery/jquery.form.js» language=«javascript»></script>

Шаг 2: Теперь нам нужно написать скрипт инициализации, который будет указывать какой объект страницы вызывает наш AJAX-контент, куда этот контент будет выводится и какие элементы формы передавать в качестве параметров:

$(document).ready(function() { $(‘.ajax_link’).ajaxContent({ target:‘#ajax_fild’, bind:‘#fname,#lname,#doljnost’ }); });

Тут активный элемент с классом ‘ajax_link’, результат выполнения скрипта будет показан в div’е с id=”ajax_fild”, о чем нам и говорит параметр target, а bind — это перечислены id элементов формы, которые будут переданы в качестве параметров. Шаг 3: Подошел момент написания самого скрипта для вывода на страницу. Я не буду его писать, т.к. это немного не по теме, только расскажу что там должно быть. Схема такая — вначале получаем с помощью GET параметры, которые передавались, а потом выводим их с помощью echo, та собственно, что угодно можно сделать в этом скрипте, но если он ничего не выводит, то вы ничего и не увидите. Короче файл создали и назвали его, ну скажем, ajax_content.php. А теперь переписываем его в какую-нибудь папку в корне сайта, можно и в сам корень. И еще один ньюанс, если вам необходимо подключить какой-то файл, например класс для работы с БД, то незабудьте его подключить и к этому файлу. Шаг 4: На последнем этапе остается лишь разместить на странице ссылку на файл, которы вы сделали на предыдущем шаге и указать в ней класс, который вы описали на втором шаге, в нашем случае это ‘ajax_link’. А также создаем пустой div с классом, который указан в параметре target, в нашем случае это ‘ajax_fild’. В итоге у нас должна поучится такая картина:

<html>

<head>

<script src=«/jquery/jquery.js» language=«javascript»></script>

<script src=«/jquery/ajaxContent.js» language=«javascript»></script>

<script src=«/jquery/jquery.form.js» language=«javascript»></script>

<script language=«javascript»> $(document).ready(function() { $(‘.ajax_link’).ajaxContent({ target:‘#ajax_fild’, bind:‘#fname,#lname,#doljnost’ }); }); </script>

</head>

<body>

<form>

<label for=«fname»>Имя:</label><input name=«fname» id=«fname»><br>

<label for=«lname»>Фамилия:</label><input name=«lname» id=«lname»><br>

<label for=«doljnost»>Должность:</label><select name=«doljnost» id=«doljnost»>

<option value=«Программист»>Программист

<option value=«Бухгалтер»>Бухгалтер

<option value=«Директор»>Директор <br><br>

<a class= «ajax_link» href= «ajax_content.php»><b>Нажми</b></a>

</form>

<div id=«ajax_fild»></div>

</body>

</html>