Сайтостроительство (8)

PHP-кодинг (25)

Веб-дизайн (9)

DHTML/JavaScript (8)

Подкастинг (1)

Безопасность в PHP (3)

Секретный раздел

Карта блога

Регистрация пользователей на PHP+MySQL

Скрипт гостевой книги с красивым дизайном

Галерея на jQuery

Простая система регистрации пользователей на сессиях

Форма обратной связи с защитой типа капча

Галерея на php+jquery

Шаблоны запросов и placeholders

Быстрое перенаправление средствами php

Flash плеер для вашего сайта

Сортировка столбцов в таблице на php+mysql

Загрузка аватаров через систему регистрации

Форматный вывод даты из базы

Каскадные листы стилей

Организация пространства страницы

Визуальный редактор на сайте (TinyMCE)

За весь период

За 2010-11

За 2009-06

За 2009-05

За 2009-04

За 2009-03

За 2009-02

За 2008-08

Бегун контекстная реклама

Ruseller видеоуроки

Letitbit файлообменник

Tak.Ru $$$ вебмастеру

WMmail почтовые рассылки

WMlink продажа трафика

Sape.Ru продажа ссылок

Главная » DHTML/JavaScript

Галерея на jQuery

Представляю вашему вниманию привлекательную галерею, которую легко внедрить в любой дизайн сайта и настроить под любые потребности.

Демо версия данной галереи находится здесь. Скачать все файлы можно тут.

Внешний вид данной галереи представлен на рисунке ниже.

Галерея на jQuery

Установка и использование галереи:

1) Подключить javascript файлы и встроенную таблицу стилей между тегами <head></head>

 <script type="text/javascript" src="Galleria Demo_files/jquery00.js"></script>
<script type="text/javascript" src="Galleria Demo_files/jquery01.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

// fade in the image & caption
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
image.css('display','none').fadeIn(1000);
}
caption.css('display','none').fadeIn(1000);

// fetch the thumbnail container
var _li = thumb.parents('li');

// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);

// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');

// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents('li');

// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';

// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});
</script>
<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}
.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}
</style>

Помните про правильный путь к файлам, если поменяете их месторасположение.

2) Прописать в теле вашего html-документа следующий код:


<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li><img src="Galleria Demo_files/flowing-.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="Galleria Demo_files/stones00.jpg" alt="Stones" title="Stones - from Apple images"></li>
<li class="active"><img src="Galleria Demo_files/grass-bl.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img src="Galleria Demo_files/ladybug0.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="Galleria Demo_files/lightnin.jpg" alt="Lightning" title="Black &amp; White"></li>
<li><img src="Galleria Demo_files/lotus000.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="Galleria Demo_files/mojave00.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
<li><img src="Galleria Demo_files/pier0000.jpg" alt="Pier" title="Proin erat nisi"></li>
<li><img src="Galleria Demo_files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>

Помните про пути к вашим картинкам, указанным в атрибуте src тэга <img>. Расположение всех картинок оформлено в виде стилизованного списка помещенного в блок с идентификатором main_image. Если будите использовать свои картинки, то измените атрибуты alt и title, а также width и height картинок для указания их размера. В представленной галереи использовались картинки размером 700 x 438 пикселей.

Навигация оформлена в виде ссылок next(следующий) и previous(предыдущий). Их работа основана на использовании обработчиков событий $.galleria.prev() и .galleria.next() соответственно, срабатывающих после одиночного щелчка мыши по навигационной ссылке.

Источник урока: http://devkick.com

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

Автор: admin | Добавлена: 22.04.2009 | Просмотров: 25537
Рейтинг: 47 | Голосов: 15

Оцените заметку: 1 2 3 4 5

Последние обновления в категории: DHTML/JavaScript

Комментарии (0)

Комментариев пока нет!

Только авторизованные пользователи могут добавлять комментарии. Зарегистрироваться.

Логин:
Пароль:
 

Регистрация

: Тема:

Заметок в базе: 56
Комментариев: 0
Всего юзеров: 114
Сейчас онлайн: 1