Главная » Файлы » Прочие скрипты » 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

Категория: jQuery | Добавил: Apocalypse | Теги: Lightbox, галерея, на, JQuery, Оригинальная, CSS3
Просмотров: 216 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: