Главная » Файлы » Прочие скрипты » jQuery
Стильное портфолио с интересной сортировкой на HTML5, CSS и jQuery для uCoz
24.06.14, 16:35:40

Скачать файл



Очень даже неплохое портфолио со стильной сортировкой материалов

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

Моё тестирование в фидле: ДЕМО

Установка:

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

Следующий код в то место, где будет портфолио:
Код
<nav id="filter"></nav>  
  <section id="container">  
  <ul id="stage">  
  <li data-tags="Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Logo Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design,Logo Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Logo Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design,Logo Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Logo Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design,Logo Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Logo Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Logo Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design,Logo Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Logo Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design,Logo Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Logo Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Web Design,Logo Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  <li data-tags="Logo Design,Print Design">  
  <img src="Ссылка на картинку" alt="Описание" />  
  </li>  
  </ul>  
  </section>

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

Материал подготовлен и адаптирован Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: CSS, стильное, ucoz, на, JQuery, HTML5, сортировкой, интересной, для, портфолио
Просмотров: 471 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: