04:21
Очень интересная оригинальная галерея на css3, jQuery и LightBox. Пожалуй, единственная в своём роже в плане оригинальности и качестве исполнения
Для начала посмотрите ДЕМО
Установка:
После /head на страницах, где будет расположена данная галерея, вставляйте:
Code
<link rel="stylesheet" type="text/css" href="/css/demo.css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox-1.2.6.css" />
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
Следующий код в то место, где будет сама галерея:
Code
<div id="gallery">
<div id="pic-1" class="pic" style="top:249px;left:25px;background:url(Ссылка на маленькое изображение) no-repeat 50% 50%; -moz-transform:rotate(35deg); -webkit-transform:rotate(35deg);">
<a class="fancybox" rel="fncbx" href="Ссылка на большое изображение" target="_blank">colosseum</a>
</div>
<div id="pic-2" class="pic" style="top:258px;left:504px;background:url(Ссылка на маленькое изображение) no-repeat 50% 50%; -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg);">
<a class="fancybox" rel="fncbx" href="Ссылка на большое изображение" target="_blank">industrial-mech</a>
</div>
<div id="pic-3" class="pic" style="top:35px;left:207px;background:url(Ссылка на маленькое изображение) no-repeat 50% 50%; -moz-transform:rotate(-40deg); -webkit-transform:rotate(-40deg);">
<a class="fancybox" rel="fncbx" href="Ссылка на большое изображение" target="_blank">4-green-beach</a>
</div>
<div id="pic-4" class="pic" style="top:10px;left:561px;background:url(Ссылка на маленькое изображение) no-repeat 50% 50%; -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg);">
<a class="fancybox" rel="fncbx" href="Ссылка на большое изображение" target="_blank">2-breast-stroke</a>
</div>
<div id="pic-5" class="pic" style="top:280px;left:243px;background:url(Ссылка на маленькое изображение) no-repeat 50% 50%; -moz-transform:rotate(7deg); -webkit-transform:rotate(7deg);">
<a class="fancybox" rel="fncbx" href="Ссылка на большое изображение" target="_blank">sands-of-life</a>
</div>
</div>
<div class="clear"></div>
Прошу вас обратить внимание на параметр -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg);
1deg - Угол поворота картинки
Осталось лишь залить три скрипта из прикреплённого архива в папку js и три стиля в папку css
