Оригинальная «Настольная» галерея на CSS3, LightBox и jQuery
|
1 2 3 4 5 6 7 |
<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> |
2#: Следующий код в то место, где будет сама галерея:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
