Главная » Файлы » Прочие скрипты » jQuery
Простая адаптивная галерея S Gallery на CSS3 и jQuery для вашего сайта
[ Скачать с сервера (11.2 Kb) ] 19.09.14, 17:17:07



Набрёл на очень простую, но современную и адаптивную галерею. Думаю, многим она придётся по душе

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

После < /head > на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="/css/styles.css" />


Сама разметка галереи оформляется следующим образом. Вставляйте в нужное место:
Код
<div id="gallery-container">
   
  <ul class="items--small">
  <li class="item"><a href="#"><img src="Ссылка на маленькую картинку" alt="" /></a></li>
  <li class="item"><a href="#"><img src="Ссылка на маленькую картинку" alt="" /></a></li>
  <li class="item"><a href="#"><img src="Ссылка на маленькую картинку" alt="" /></a></li>
  </ul>
  <ul class="items--big">
  <li class="item--big">
  <a href="#">
  <figure>
  <img src="Ссылка на большую картинку" alt="" />
  <figcaption class="img-caption">
  Заголовок
  </figcaption>
  </figure>
  </a>
  </li>
  <li class="item--big">
  <a href="#">
  <figure>
  <img src="Ссылка на большую картинку" alt="" />
  <figcaption class="img-caption">
  Заголовок
  </figcaption>
  </figure>
  </a>
  </li>
  <li class="item--big">
  <a href="#">
  <figure>
  <img src="Ссылка на большую картинку" alt="" />
  <figcaption class="img-caption">
  Заголовок
  </figcaption>
  </figure>
  </a>
  </li>
  </ul>
  <div class="controls">
  <span class="control icon-arrow-left" data-direction="previous"></span>  
  <span class="control icon-arrow-right" data-direction="next"></span>  
  <span class="grid icon-grid"></span>
  <span class="fs-toggle icon-fullscreen"></span>
  </div>
  </div>


Сразу после предыдущего кода вставляйте:
Код
<script src="/js/plugins.js"></script>
  <script src="/js/scripts.js"></script>
  <script>
  $(document).ready(function(){
  $('#gallery-container').sGallery({
  fullScreenEnabled: true
  });
  });
  </script>


Скрипты из прикреплённого архива залейте в папку js, картинку в папку img и файл стиля в папку css

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: галерея, Простая, на, JQuery, Вашего, CSS3, адаптивная, gallery, для, сайта
Просмотров: 1188 | Загрузок: 291 | Рейтинг: 3.0/2
Всего комментариев: 0
Имя *:
Email: