Заметки кибер-хулигана n-мерного пространства.: Организация фотогалереи с помощию JCarousel

jCarousel это jQuery карусель, плагин для управления данными, отображаемых в виде горизонтального или вертикального списка. Данные могут быть представлены как обычный HTML контент или могут быть загружены с помощью AJAX. Списку можно задать прокрутку вперед или назад, с анимацией или без нее.
Установка:
-скачать архив с плагином и jquery с http://jquerylist.ru/navigation/jcarousel.html;
-подключить библиотеку jQuery, плагин и скин для него (css файл), для этого в раздел <head> индексной страницы галереи ввести следующее:

<script type="text/javascript" src="http://localhost/opencms/opencms/gallery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://localhost/opencms/opencms/gallery/jquery.jcarousel.js"></script> 
<link rel="stylesheet" type="text/css" href="/gallery/skins/ie7/skin.css"/>

-в разделе <body> организовать список из интересуемых элементов (в данном случае - картинок):

<ul id="mycarousel" class="jcarousel-skin-ie7">
    <li><a target="picture" href="/opencms/opencms/gallery/pic1.jpg"><img height="113" width="77" src="/opencms/opencms/gallery/pic1.jpg" alt="" /></a></li>
    <li><a target="picture" href="/opencms/opencms/gallery/pic5.jpg"><img height="113px" width="150px" src="/opencms/opencms/gallery/pic5.jpg" alt="" /></a></li>
    <li><a target="picture" href="/opencms/opencms/gallery/pic6.jpg"><img height="113px" width="150px" src="/opencms/opencms/gallery/pic6.jpg" alt="" /></a></li>
    <li><a target="picture" href="/opencms/opencms/gallery/pic4.jpg"><img height="113px" width="150px" src="/opencms/opencms/gallery/pic4.jpg" alt="" /></a></li>
</ul>
<p><iframe height="300" frameborder="0" width="500" name="picture"></iframe></p>

-провести инициализацию jQarousel, для этого в в раздел <head> индексной страницы галереи поместить следующий скрипт:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        buttonNextEvent: 'click',
        buttonPrevEvent: 'click'
    });
});
</script>

______________
Используемые ссылки:
http://jquerylist.ru/navigation/jcarousel.html
http://jquery.com/

Заметки кибер-хулигана n-мерного пространства.

Поиск по этому блогу

среда, 15 декабря 2010 г.

Организация фотогалереи с помощию JCarousel - установка и настройка.

Комментариев нет:

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

Постоянные читатели