Динамичная галерея jCarousel и PHP

Здравствуйте, уважаемые читатели!

Хочу сегодня опубликовать для вас, а точнее поделиться скриптом галереи jCarousel и выводом с помощь php фотографий из папки на вашем сервере. Долго думал, куда бы поместить этот урок, но все-таки помещу его в раздел «Создание сайтов«, потому что библиотека галереи не нова и не мною написана.
Итак, задача состоит в том, чтобы динамично выводить изображения из папки на сервере, используя для отображения галерею “Карусель”. Я хочу, чтобы человек мог не принимать участия в прокрутке картинок, т.е., например, на страничке нашего сайта будет стоять галерея с самопрокручивающимся наполнением, картинки будут того размера, которого захочу я и оформление самой галереи будет зависеть от меня.

Шаг №1 – создадим в корне сервера или там, где вы хотите, папочку с нашими обработанными и красивыми изображениями.
Шаг №2 – скачаем скрипты галереи.
Шаг №3 – распакуем архив, зальем на сервер (у меня папка /js) и подключим нужные скины, стили и скрипты галереи в хэдер нашей странички:

<link href=»/js/style.css» rel=»stylesheet» type=»text/css» />
<script type=»text/javascript» src=»/js/lib/jquery-1.4.2.min.js»></script>
<script type=»text/javascript» src=»/js/lib/jquery.jcarousel.min.js»></script>
<link rel=»stylesheet» type=»text/css» href=»/js/skins/tango/skin.css» />
<script type=»text/javascript»>
function mycarousel_initCallback(carousel)
{
carousel.buttonNext.bind(‘click’, function() {
carousel.startAuto(0);
});

carousel.buttonPrev.bind(‘click’, function() {
carousel.startAuto(0);
});

carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery(‘#mycarousel’).jcarousel({
auto: 2,
wrap: ‘last’,
initCallback: mycarousel_initCallback
});
});
</script>

Шаг №4 – напишем вывод наших картинок:

<div id=»wrap»>
<ul id=»mycarousel» class=»jcarousel-skin-tango»>
<?php
$dir = $_SERVER['DOCUMENT_ROOT'].’/pict/mini/’; //путь к картинкам
if (is_dir($dir))
{
if ($dh = opendir($dir))
{
while (($file = readdir($dh)) !== false)
{
if($file!=’.’ AND $file!=’..’)//убираем мусор
{
//вывод картинок из папки уже в галерею
echo ‘<li><img src=»/pict/mini/’.$file.’» width=»150″ height=»150″ alt=»" /></li>’;
}
}
closedir($dh);
}
}
?>
</ul>
</div>

Шаг №5 – поработаем со стилями:

//удалите из этого файла все лишнее, а лишнее там почти все
<link href=»/js/style.css» rel=»stylesheet» type=»text/css» />

//мой вид этого файла, можете поставить как у меня
ul, ol {
margin-left 0;
}

ul ul {
margin-bottom: 20px;
}

#wrap {
color: #363636;
/*margin: 0 12%;*/
margin: 25px 0px;
}

pre, code, tt, dt {
font: 100% monospace;
margin: 20px 0;
}

pre, blockquote {
padding: 15px;
background-color: #f0f0f0;
margin: 20px 0;
-moz-border-radius: 10px;
}

td pre {
font: 85% monospace;
padding: 5px;
margin: 5px 0;
}

Теперь влезем в скины, я выбрала Tango скин, поэтому открываем файл

<link rel=»stylesheet» type=»text/css» href=»/js/skins/tango/skin.css» />

  • Изменяем фон и обводку нашего контейнера галереи

.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px;
background: #232323;
border: 1px solid #346F97;
}

  • Изменяем ширину нашей галереи, чтобы не была мелкой:

.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 640px;
padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 640px;
height: 150px;
}

  • Изменяем высоту нашей галереи, чтобы не была узкой:

.jcarousel-skin-tango .jcarousel-container-vertical {
width: 75px;
height: 245px;
padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
width: 75px;
height: 245px;
}

  • Изменяем ширину и высоту элементов галереи (я выбрала 150*150), тут мы уже изменили высоту

.jcarousel-skin-tango .jcarousel-clip-horizontal
.jcarousel-skin-tango .jcarousel-item {
width: 150px;
height: 150px;
}

  • Итак, все отлично, только осталось поставить кнопки прокрутки на свое место, для этого правим:

.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 78px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 78px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

Ну вот и все )
Надеюсь, мой скромный скрипт поможет вам в ваших проектах и начинаниях.

Похожие записи:

  1. Загрузка фотографий на сайт
  2. Галерея картинок на JavaScript Highslide
  3. Как заставить работать Ваш блог
  4. Визуальный редактор для админки WordPress
  5. Устанавливаем captcha на сайт
Запись опубликована в рубрике Создание сайтов с метками , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий