3 Лютий 2013
7 077
Рубрика: код

Скрипт для просмотра фотографий jQuery.quickBox 0.2

Скрипт зума? Чаще всего это SlimBox или LightBox. Вместо 6 файлов, которые требуются для LightBox, мой скрипт требует всего два: один CSS и один JS. Для его работы не нужны картинки, а фотографии он предзагружает перед выводом на экран и весит при этом 6,5 Кб.

UPD 2014-02-14

Помните, я полгода назад поделился скриптом для просмотра фотографий quickBox? Я ещё хвалился, что он мало весит, быстро работает и вообще он красавчик. Действительно ли это так, можно судить разве что со стороны, а я дам вам ещё пару доводов в пользу скрипта. Сегодня предлагаю вашему вниманию его усовершенствованную версию – quickBox 0.2.

quickbox 0.2 preview

Почему quickBox?

Чуть более, чем все пользуются скриптами, ставшими традиционной нормой. Если где-то есть скрипт зума, то это в половине случаев SlimBox или LightBox. Вместо 6 файлов, которые требуются для LightBox, мой скрипт требует всего два: один CSS и один JS. Для его работы не нужны картинки, а фотографии он предзагружает перед выводом на экран и весит при этом 6,5 Кб.

Вот его основные характеристики:

  • никакой графики, всё построено на HTML+CSS
  • для работы требуются два файла + jQuery
  • предзагрузка фотографий перед выводом
  • управление стрелками “влево”, “вправо” и кнопкой Esc (работает как в Win, так и MacOS). Увеличив фотографию, можно перейти к следующей или предыдущей, нажав курсор на клавиатуре, а чтобы закрыть окно – Esc или ссылку “Закрыть” сверху справа.
  • автоматическое построение галерей: если на странице больше одной фотографии, которую вы хотите открывать для увеличенного просмотра, скрипт автоматически создаст галерею и выведет список картинок сверху слева. Такого ни LightBox, ни SlimBox не умеют.
  • если для фотографий заполнены атрибуты title, они автоматичеки будут отображаться под каждым фото в качестве описания.
  • скрипт проверяет, подключён ли jQuery и если нет, то загружает

Как это выглядит?

Я таки сделаю вам смешно, но визуальных отличий от первой версии никаких, кроме стиля открытия окна. Выглядит скрипт в работе вот так:

jquery quickBox 0.2

Пример

Увидеть скрипт в работе вы можете на страничке с демо.

Как устанавливать

Установка занимает 1 минуту. Вам потребуется загрузить файлы в любую папку на вашем хостинге через ftp.

– Как устанавливать?
– Очень просто.
– Спасибо, вы мне очень помогли.

Загружаем содержимое архива в корневую папку /js/. В head документа перед закрывающимся тегом </HEAD> прописываем строку:

<script type="text/javascript" src="/js/quickbox.js"></script>

Если у вас не подключён jquery, просто загрузите его по адресу: /jquery.js. А для того, чтобы скрипт мог обрабатывать ваши фотографии. нужно добавить им атрибут: class=’quickbox’. В качестве примера вот вам 4 фотографии:

<a class="quickbox" href="01.jpg" title="Без проблем, ты тоже можешь быть вегетарианцем"><img src="01s.jpg"></a>
<a class="quickbox" href="02.jpg" title="Интересно, в каком банке реально смогут сделать прекрасную?"><img src="02s.jpg"></a>
<a class="quickbox" href="03.jpg" title="Очень старая футболка"><img src="03s.jpg"></a>
<a class="quickbox" href="04.jpg" title="И правда, зачем пытаться?"><img src="04s.jpg"></a>

Скачать

Скрипт бесплатный, пользуйтесь им и радуйтесь жизни. Пожалуйста, не пытайтесь его продать, не нарушайте здравый смысл :-).

Как всегда, жду ваших комментариев и советов :).

Тепер я хочу бачити коментарі 28