Для одного проекта необходимо сделать фотогалерею на jQuery. Для этого я решил использовать плагин для Query, который называется FancyBox (сайт плагина - fancybox.net). Подключать и использовать, его довольно легко.
Подключаем все необходимо для работы скрипта (это пишем между <head>***</head>):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a#example2").fancybox({
"overlayOpacity" : 0.8,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
(a#example2 - этот код я взял из примера, с сайта fancybox.net) ... Всегда рекомендую скачивать все с официального сайта, и последние версии. Все, это все что надо было вставить между тегами <head>***</head>
Теперь переходим непосредственно к картинкам.
<a id="example2" rel="group" title="пример титле" href="/images/foto/1.jpg">
<img src="/images/fotopreview/1.jpg" width="180px">
Здесь надо обратить внимание на то, что у тега <a>***</a>, стоит id="example2" и в ссылке указан путь к полному изображению. Плагин FancyBox позволяет делать не только красивые галереи, но и выводить модальные окна разной сложности. можно просто уведомлять о чем-то посетителя сайта, можно выводить видео в новых окнах и т.д... У этого плагина огромное количество настроек, которые вы можете посмотреть на официальном сайте.
Подключаем все необходимо для работы скрипта (это пишем между <head>***</head>):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a#example2").fancybox({
"overlayOpacity" : 0.8,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
(a#example2 - этот код я взял из примера, с сайта fancybox.net) ... Всегда рекомендую скачивать все с официального сайта, и последние версии. Все, это все что надо было вставить между тегами <head>***</head>
Теперь переходим непосредственно к картинкам.
<a id="example2" rel="group" title="пример титле" href="/images/foto/1.jpg">
<img src="/images/fotopreview/1.jpg" width="180px">
Здесь надо обратить внимание на то, что у тега <a>***</a>, стоит id="example2" и в ссылке указан путь к полному изображению. Плагин FancyBox позволяет делать не только красивые галереи, но и выводить модальные окна разной сложности. можно просто уведомлять о чем-то посетителя сайта, можно выводить видео в новых окнах и т.д... У этого плагина огромное количество настроек, которые вы можете посмотреть на официальном сайте.
