Фото портфолио с интересной сортировкой на uCoz

[ Скачать с сервера (20.7Kb) ]

Для ценителей стиля и качества, а так же плагинов с пометкой "шикарно" - отличная новость. Мы таки нашли один такой, который способен затмить все предыдущие и порадовать тех, кто в этом разбирается.

Так что срочно тестируйте демо-версию и забирайте на свой сайт, потому что этот плагин для создание эффектных портфолио действительно стоящая вещь. Плагин создан действительно умелыми руками специалистов по HTML5 и CSS, и не обошлось без последней версии JQueru - хороший набор инструментов всегда в арсенале у продуктов Ucoz и этот - не исключение, а скорее один из шедевров. Изображения перемешаются на экране в произвольном направлении, мягко и плавно создавая эффект перетекания информации горизонтально и центрировано. Фотографии или изображения можно отсортировать по назначению. Для первичного просмотра подойдет вкладка "Everything", дающая представление о всех изображениях на странице. Как отсортировать их дальше - уже ваша фантазия и задумка. Плагин позволяет заливать приличное количество изображений, и при этом работает он быстро, плавно и без рывков. Идеально подойдет для вставки на сайт, создаваемый для фотографа или дизайнера. За качество продукта отвечаем - не проходите мимо этой новинки от Ucoz, и, как всегда, делитесь впечатлениями!

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

Установка:

После /head на нужных страницах вставляйте:

<linkrel="stylesheet"href="/css/styles.css"/> <scriptsrc="/js/jquery.quicksand.js"></script> <scriptsrc="/js/script.js"></script>

Следующий код в то место, где будет портфолио:

<navid="filter"></nav> <sectionid="container"> <ulid="stage"> <lidata-tags="Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Logo Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design,Logo Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Logo Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design,Logo Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Logo Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design,Logo Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Logo Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Logo Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design,Logo Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Logo Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design,Logo Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Logo Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Web Design,Logo Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> <lidata-tags="Logo Design,Print Design"> <imgsrc="Ссылка на картинку"alt="Описание"/> </li> </ul> </section>