FancyBox - Фотогалерея

Группа картинок (галерея изображений)

ДРУГИЕ ПРИМЕРЫ

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Библиотека FancyBox (JQUERY) Фотогалерея с переходом в больших фото стрелками появляющимися при наведении на фото</title>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.gallery, a.iframe").fancybox();
url = $("a.modalbox").attr('href').replace("for_spider","content2");
$("a.modalbox").attr("href", url);
$("a.modalbox").fancybox(
{  
"frameWidth" : 400, 
"frameHeight" : 400 
});
$("a.gallery2").fancybox(
{
"padding" : 20, // отступ контента от краев окна
"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE
"zoomOpacity" : false,// изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 1000,// скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" : 1000,// скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : 700, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600, // высота окна, px(355px - по умолчанию)
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay 
"overlayOpacity" : 0.8, // Прозрачность затенения (0.3 по умолчанию)
"hideOnContentClick" :false, // Если TRUE  закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE
"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу
});
$("#menu a, .anim").hover( function() {
      $(this).animate({"paddingLeft" : "10px"}, 300)},
  function() {$(this).animate({"paddingLeft" : "0"}, 300);
});
$("a.iframe").fancybox(
{  
"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600 // высота окна, px(355px - по умолчанию)
});
});
</script>
<style>
html, body {font: normal 12px Tahoma;color: #333;}
a {outline: none;}
div#wrap {width: 500px;margin: 50px auto;}
img {border: 1px solid #CCC;padding: 2px;margin: 10px 5px 10px 0;}
.green {color:#060; font-size:14px}
</style>
</head>
<body>
<div id="wrap" style="width:800px">
<h1>FancyBox - Фотогалерея</h1>

<h3>Группа картинок (галерея изображений)</h3>
<a class="gallery" rel="group" title="это фото 1" href="https://www.03www.ru/pic/001.jpg"><img src="https://www.03www.ru/pic/001.jpg"   alt="" width="160px"/></a>
<a class="gallery" rel="group" title="это фото 2" href="https://www.03www.ru/pic/002.jpg"><img src="https://www.03www.ru/pic/002.jpg"   alt="" width="160px"/></a>
<a class="gallery" rel="group" href="https://www.03www.ru/pic/003.jpg"><img src="https://www.03www.ru/pic/003.jpg"   alt="" width="160px"/></a>

<script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>