| Главная » Файлы » Прочие скрипты » jQuery |
Оригинальная галерея на css3, LightBox и jQuery
| 23.06.14, 09:28:07 | |
 Очень интересная оригинальная галерея на css3, jQuery и LightBox. Пожалуй, единственная в своём роже в плане оригинальности и качестве исполнения Для начала посмотрите ДЕМО Установка: После /head на страницах, где будет расположена данная галерея, вставляйте: Код <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> Следующий код в то место, где будет сама галерея: Код <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 Материал подготовлен Apocalypse | |
| Просмотров: 364 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |