31 Липень 2012
2 928
Рубрика: код

jQuery Quickbox 0.1b — простой и быстрый скрипт для создания галерей

Скрипт для просмотра увеличенных фотографий с подключением в две строки. Аналог LightBox.

UPD 2014-02-14

Привет, друзья. Обещанный ранее скрипт для зума фотографий готов и я с радостью вам его представляю.

Как это работает?

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

Во-первых, ради опыта. Постоянная работа над ошибками и доработки скриптов хочешь-не хочешь, а поднимут твои скиллы и заставят больше читать и развиваться в нужном направлении. Что уж говорить о том, что ты делаешь продукт не только для себя, а и для публичного использовнаия. Это кроме всего прочего и большая ответственность. Делаешь что-то — делай так, чтобы не было стыдно. Ну или хотя бы доводи до ума, когда уже стыдно :)

Ещё один немаловажный момент, который я хотел учесть — простота установки и настройки. Как в случае с Callme для работы требуются 4 файла, то здесь их всего два. В большинстве зум-скриптов вам потребуется распаковать и указать адрес к картинкам для листания, закрытия формы, гифки для загрузки и прочего. Я ещё до начала работы над проектом решил сделать все элементы управления без использования графики. Только HTML+CSS, только хардкор.

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

В работе скрипт выглядит примерно так:

Тактико-технические характеристики

Давайте кратко пройдёмся по характеристикам скрипта, чтобы вы могли себе представить, что это и с чем его едят.

  • работает как в mac, так и в win (часто листалки делают с использованием Ctrl + стрелка, но в маке таким сочетанием в dashboard переключаются рабочие столы и сочетание не работает);
  • работает без графики, все элементы управления текстовые;
  • для работы нужны только файл скрипта и файл css (ну и последний jQuery);
  • удобное управление: влево/вправо листание картинок, а esc закрывает окно;
  • автоматический вывод заголовка изображения, берётся из атрибута alt;
  • автоматическое построение списка изображений в случае, если их несколько (сверху выводятся номера картинок);
  • вес всего около 4Кб.

Установка

Для того, чтобы начать работу, вам надо загрузить файлы скрипта к себе на сайт и добавить в html их вызов:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/quickbox.js"></script>
<link rel="stylesheet" href="/js/quickbox.css" type="text/css">

Если jQuery у вас уже подключён, первую строчку удаляйте. Теперь, чтобы скрипт работал, к нужным изображениям добавляйте, class=’slowshow’. Например:

<a class="slowshow" title="стол компьютерный" href="/products_pictures/628_0_enl.jpg">
<img src="/products_pictures/628_0.jpg" alt="cтол компьютерный Мини">
</a>

Данные из alt автоматически выведутся под изображением.

Скачать

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

Поддержка

Скрипт распространяется бесплатно, вы вправе использовать его на своих сайтах без оплаты. Приветствуются пожертвования на развитие скрипта.

Обо всех ошибках, багах/фичах и предложениях прошу писать в комментарии. И когда ставите скрипт у себя на сайт, пишите в коменте адрес, чтобы можно было смотреть его в работе.

Успехов. Всем лета и моря!

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