Сегодня мы будем учится делать модельные окна и миниатюры с помощью небольшого jQuery плагина jPhotoGrid. Его использование может очень красиво представить фотографии на Вашем сайте.
Использование
Этот плагин применяется просто и легко.
Сначала, создайте неупорядоченный список из фотографий, которые Вы хотите внести на Ваш сайт.
<ul>
<li>
<img src="source.jpg" alt="" />
<p>Caption Here</p>
</li>
...
<ul>
Теперь преобразовываем созданный список в привлекательную панель с помощью CSS.
#pg { position: relative; height: 585px; background: #000; }
#pg li { position: relative; list-style: none; width: 175px; height: 117px; overflow: hidden; float: left; z-index: 2; opacity: .3; }
#pg li.active { opacity: 1; }
#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }
#pg li img { display: block; width: 100%; }
#pg li p { color: white; margin: 10px 0; font-size: 12px; }
Последним делом нужно настроить javascript. Ключ к успеху зависит от передачи двух параметров CSS. Они подсказывают функции $.animate как работать с всплывающими окнами.
$('#pg').jphotogrid({
baseCSS: {
width: '175px',
height: '117px',
padding: '0px'
},
selectedCSS: {
top: '50px',
left: '100px',
width: '500px',
height: '360px',
padding: '10px'
}
});
В первом параметре нужно задать ширину, высоту и отступы миниатюры. Во втором параметре задаем критерии размещения всплывающего окна по отношении к панели с изображениями. Наши окна будут иметь 500 на 360 пикселей, отступ от верхнего края – 50 пикселей, от левого – 100.
Отметим, что плагин не ресайзит изображения, поэтому нужно подбирать размеры так, чтобы изображения смотрелись одинаково хорошо как в оригинале, так и в миниатюрах.
