Мы предлагаем:У нас есть:
1 базу данных MySQL(50MB)PHP 5
Прикрепление своих доменовMySQL
Предустановленные движки сайтовPerl
Место под файлы(300MB)Ruby
Бесплатно и без рекламы!
Авторизация:
e-mail: Пароль:
Забыли пароль?    Запомнить  
Все блогиSoftware → Highslide JS - живой альбомчик на скорую руку
Rss
  • Если вы хотите показать на сайте какие-то крупные фотографии и/или рисунки
  • Если вы не боитесь немного повозиться с HTML и стилями, возможно, пытаясь отредактировать шаблон вашей CMS
  • Если галерея на вашем сайте не является самой важной его частью
  • Если вам и вашим пользователям понравится плавная анимация и отсутствие всплывающих окон
Тогда то, о чём я хочу вам рассказать, придётся вам по вкусу.

На самом деле, эта вещь достаточно старая, и встречается часто даже в плагинах к известным CMS. По сути – это небольшое (11-60 килобайт в разных комплектациях) расширение для сайта, которое позволяет демонстрировать иллюстрации в виде, удобном для пользователя. Умеет эта штука многое – плавно анимирует открытие/закрытие, имеет панель (можно всплывающую) для навигации по фотографиям, позволяет таскать уже открытые фотографии по всей странице, позволяет открывать несколько фотографий разом… Все возможности перечислять можно долго.
Дамы и господа, предлагаю вашему вниманию

Самый типичный способ использования – это поместить в статью маленькое изображение для предпросмотра, а по щелчку показывать увеличенное изображение. Лично я познакомился с этой библиотекой очень давно, но до сегодняшнего дня не думал осмотреть её вне состава каких-либо плагинов и компонентов. А видел я её в компоненте, наверное, самом известном среди фотоальбомов для Joomla – Phoca Gallery. В составе было множество вариантов отображения фотографий, но Highslide понравился мне больше всего своим минималистичным видом и интересными возможностями. Обращение с фотографиями выглядело, как будто я стоял у стола, мог взять фотографию (или две, или даже три, если бы было три руки) расположить рядом, как душе угодно, и не выцеливая кнопку закрытия мог положить обратно.

К сожалению, на сайте, над которым я работал, альбомы хоть и отчаянно выпрашивались у меня пользователями, в итоге оказались заброшены. Но опыт, я вам скажу, зря не пропадает. Совсем недавно я опознал Highslide JS на нескольких сайтиках и решил влезть на официальный сайт и вспомнить, как это работает. Когда-то я бы побоялся – но после приключений с Twitter Bootstrap стало даже интересно – стандартные иллюстрации на Highslide со стандартным Bootstrap сочетаются, пожалуй, идеально.

Итак, что он умеет? Пожалуй, хороший обзор функций можно увидеть здесь, а заодно и срезать из него те компоненты, которые вам не нужны. Обратите внимание – изначально там выставлены не все галочки, и не все примеры будут работать! Чтобы работало всё, нажмите справа “Check all” и внизу “Update”. Пройдёмся по всем пунктам:

  • Core – ядро. Убрать нельзя по понятным причинам.
  • Graphic outlines – графика по контуру. Можете сэкономить около 6 килобайт, убрав её. Вполне жизнеспособный вариант – прямоугольная рамочка с добавленной при помощи box-shadow (попробуйте!) тенью, это какая-то пара десятков байт. Первый же пример.
  • Overlays – управляющие элементы поверх открытой картинки. Очень полезная функция, позволяет добавить кнопку просмотра оригинала, или переключать фотографии в пределах альбома, и ещё некоторые полезности. Демонстрируется вторым примером.
  • Navigation – отвечает за, собственно, навигацию по фотографиям: предыдущая/следующая… Хорошо сочетается с Overlays, демонстрируется в том же втором примере. Также отвечает за управление навигацией с клавиатуры.
  • Dragging – то, что позволяет таскать картинки по странице.
  • Preload images – загружает картинки ещё до того, как их откроют – вместе со страницей.
  • Autosize – авторазмер, позволяет ужимать фотографии в размер экрана, а также стыковать подписи под фотографией с самой фотографией, чтобы они не вылазили за границы экрана.
  • Allow multiple instances – позволяет открывать несколько фотографий сразу. Если выключено, то при открытии второй фотографии, первая уедет на своё место.
  • Hide covered elements – скрывает элементы, поверх которых висит рамка. Сделано это скорее для совместимости со старыми браузерами, которые могут себя вести неадекватно, совмещая такую рамку и iframe. Да и не только фрейм, но вообще такие элементы редки. Обычно эта опция не особенно нужна…
  • Events – события для Javascript. Если не знаете Javascript – скорее всего, можно выключить и не париться.
  • Unobtrusive – размещает HTML на странице, а все скрипты в своём JS. Всё по местам.
  • Image map – позволяет отображать карты изображений, пересчитывая координаты активных областей. В общем, если вы знаете, что это, вам объяснения не требуются. Если нет – вам вряд ли это понадобится.
  • Slideshow – понятно.
  • Advanced positioning – демонстрируется примером 5, где фотография выезжает ровно в центр экрана. В общем, позволяет регулировать положение всплывания большой картинки.
  • Transitions – переход при смене картинки в рамке, в слайдшоу или при навигации.
  • Viewport overlays – аналогично Overlays, но не для отдельных фотографий, а для альбомов, и элементы управления помещаются уже не на фотографию, а на всей видимой области в браузере.
  • Thumbstrip – полосочка с эскизами других фото в альбоме, видимая при просмотре фотографии.
  • Группа HTML Extension позволяет показывать в рамке не только фото и прочую графику, но также куски HTML-кода, iFrame, флэш-объекты, код из AJAX-запроса. То есть, в такой же рамке можно без проблем разместить ютуб-плеер. Рамки эти, кстати, в чём-то даже удобнее аналогичных (popovers, modals) в Twitter Bootstrap.

Напоследок – минималистичнейший из существующих сборников примеров.
Комментарии, отзывы о Highslide JS и вопросы, как всегда, приветствуются. Только имейте в виду, что JS я знаю минимум, а с Highslide пошаманил всего пару часиков в порядке развлечения.

PS: Хо, я захватил блог Software :D

PPS: Highslide для Joomla, без галереи


Автор: Павел | Дата создания: 22 января 2013, 20:03 UTC | 0.944


Комментарии(7)
fynjybbs  23 января 2013, 13:44 UTC  #
0.0
Fynjybbs

Очень полезная вещь! Давно искал что-нибудь вроде этого, но ничего толкового на галаза не попадалось. Большое спасибо Павел ))

Павел  23 января 2013, 18:05 UTC  #
0.069
2bfe965ab5ef94a0568bc61c36b46d4c

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

ya-72480  25 января 2013, 14:38 UTC  #
0.0
556-81997

Удобно, искал подобное на Wordpress буду на локалке тестить)

ya-72480  25 января 2013, 14:39 UTC  #
0.0
556-81997

Можно поподробнее как провернуть в Wordpress, может есть плагины, сталкиался с такими через Jquery

Павел  30 января 2013, 22:29 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Конечно, есть:
http://highslide.com/#implementations

qberia  15 июня 2013, 16:28 UTC  #
0.0
Noavatar

ага, интересно.

вот примерно такое задумывал у себя. интересно если альбомы будут большие и их множество – не будет проблем с отображением?

Павел  15 июня 2013, 18:57 UTC  #
0.159
2bfe965ab5ef94a0568bc61c36b46d4c

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


Простите, Ваш браузер не поддерживает html5
Управление стрелками. Пробел - пауза.