"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : 700, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600, // высота окна, px(355px - по умолчанию)
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay
"overlayOpacity" : 0.2, // Прозрачность затенения (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>
<title>Art-SV</title>
</head>
<body >
<div class="clearfix"></div>
<table height="768" align="center">
<tr>
<td height="100"><img src="images/1_01.jpg" height="201" /></td>
</tr>
<tr>
<td height="40">
<div id="menu_wrapper" class="black">
<div class="center"></div>
<? include 'inc/menu.php'; ?>
</div>
<br>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td class="krug"
<p class="p">
<p>
<H1><CENTER> <font color="#003366"> Лучшие картины </font></CENTER></H1>
<br>
</p>
<p>
<strong>
3 место:Гарасюта Прохор-Бабочка-40 000 руб.
</strong> <br>
</p>
<div style="text-align: center">
</div>
<center>
<a class="gallery" rel="group" href="images/w12.jpg">
<img src="images/w12.jpg" title=" Бабочка " style="width:400px; height:500px" />
</a>
</center>
<p>
<strong>
2 место: Коробкина Диана - 135 000 руб.
</strong> <br>
</p>
<div style="text-align: center">
</div>
<center>
<a class="gallery" rel="group" href="images/w2.jpg">
<img src="images/w2.jpg" title=" Карелия . Хвойный " style="width:429px; height:250px" />
</a>
</center>
<p>
<strong>
1 место: Харченко Виктория- 400 000 руб.
</strong> <br>
</p>
<div style="text-align: center">
</div>
<center>
<a class="gallery" rel="group" href="images/w33.jpg">
<img src="images/w33.jpg" title=" Долгий путь " style="width:429px; height:700px" />
</a>
</center>
</p></td>
</tr>
<tr>
<td
<? include 'inc/b_menu.php' ?>
</td>
</tr>
</table>
</body>
</html>
Далее создаем страницу Великие художники. На ней публикуются лучшие художники разных эпох. Создаем ссылку на ФИО. При нажатии на нее, переходим на страницу с биографией автора. Также при нажатии на картину, она открывается в новом окне и можно просмотреть все картины автора.
Рисунок 11 – Страница Великие художники
Код страницы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="stylemenu.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancybox/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.gallerys").fancybox(
{
"padding" : 20, // отступ контента от краев окна
"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE
"zoomOpacity" : false, // изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 1000, // скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" : 1000, // скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)