php & jquery галерея с функцией слайдшоу
P&J Gallery представляет собой средство для создания галереи изображений написанной на php и Jquery. Изображения предварительно формируются с помощью php, а затем javascript загружает их предварительно в браузер и отображает. Размеры миниатюр и эскизов легко настраиваются с помошью CSS. Присутствует функция слайдшоу, реализованая на ajax(jquery)+php, что позволяет легко интегрировать галерею с базой данных.
Пример использования галереи
Выполните несколько простых шагов:
- 1. Загрузите последнюю библиотеку Jquery
- 2. Скачайте файлы галереи.
- 3. Добавьте следующие строки внутри <head>
<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="javascripts/galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('.gallery_demo').galleria({
time :5000,
onImage : function(thumb) {
var _li = thumb.parents('li');
_li.siblings().children('img.selected').fadeTo(500,0.3);
thumb.fadeTo('fast',1).addClass('selected');
},
onThumb : function(thumb) {
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.3';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(500);
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() {
if (_li.attr("class")!='active')
{thumb.fadeTo('fast',0.3); }})}})})})
</script>
<style media="screen,projection" type="text/css">
*{margin:0;padding:0}
body{padding:5px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:800px;margin:0 auto; overflow:hidden; height:56px}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 3px;background:#000; display:block; float:left}
.gallery_demo li div{left:240px}
.thumb{cursor:pointer;top:auto;left:auto;display:block;width:68px;height:50px;}
#main_image{margin:0 auto 60px auto;height:600px;width:800px;background:black;}
#main_image img{margin-bottom:10px;}
.nav{padding-top:5px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
</style>
- 4. Создайте изображения:
<ul class="gallery_demo">
<li><img class="thumb" id="1" src="images/img1.jpg" params="images/img1.jpg" ></li>
<li><img class="thumb" id="2" src="images/img2.jpg" params="images/img2.jpg" ></li>
.............
<li><img class="thumb" id="10" src="images/img10.jpg" params="images/img2.jpg" ></li>
</ul>
Данные строки вы можете создавать на php, например:
<ul class="gallery_demo">
<? for ($i=1;$i<=10; $i++){?>
<li><img class="thumb" id="<?=$i?>" src="images/img<?=$i?>.jpg" params="images/img<?=$i?>.jpg" ></li>
<? } ?>
</ul>
Лицензии
Галерея лицензируется согласно лицензиям GPL.
|
Разработка сайтов Copyright @ 2009
