Назар Токар
Опубліковано: 3 Лютого 2013
Оновлено: 6 Травня 2017

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>

Скачать

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

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

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.
← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket
Обговорення

  1. Максим

    Добрый день. У меня в href стоит ссылка на большое фото, в img src маленькое. Как сделать, чтоб фото из href не грузились сразу, а грузились по одной, когда открываешь?

    1. Для этого погуглите любой из скриптов lazy load.

  2. артем

    Приветствую. Ищу ошибку подключения 2 ой день. Не могу найти. Подключал подобные скрипты- эффект тот же: открывается картинка вверху слева и нет стрелок для листания.

  3. артем

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

    1. @артем, вероятно, недоступны файлы скрипта или он неправильно подключён

    2. артем

      @Назар Токарь, Что проверить? Куда копать?

    3. У меня к вам неожиданный встречный вопрос: ДЛЯ КОГО написаны мануалы по ошибкам?

  4. Ян

    Здравствуйте! Скрипт отличный, но возникла такая проблема: когда открывается фотография, отсутствуют “стрелочки” по бокам, а при щелчке на фото появляется анимация загрузки и все. Т.е. фотографии не листаются. Как это можно исправить?

  5. balamarin

    Здравствуйте! я написал вам на форуме в теме по данному
    скрипту. откликнитесь пожалуйста!

    1. Ок. А с какой целью вы написали сюда?

    2. balamarin

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

    3. Фото можно выкладывать и здесь. Когда будет время, я обязательно прочту ваш комментарий.

    4. balamarin

      @Назар Токарь, вот фото

    5. Мне просто интересно, вы правда считаете, что дважды заданный вопрос быстрее получит ответ? :)

    6. Я сейчас смотрю все с телефона. Когда буду у компьютера, зайду как на форум, так и в блог и на все отвечу.

      Угадайте, какое желание возникает к меня, если я вижу одинаковый вопрос от одного и тог же человека и на форуме, и в блоге? А еще бывает на форуме в разных темах одно и то же… Желание быстрее ответить, потому что человеку срочно? Вряд ли.

      Скорее нежелание вообще связываться, так как человек не уважает ни свое рабочее время, ни моё, заставляя читать одно и то же. Более того, требуя бесплатной помощи.

      Когда есть время, я без исключения читаю все комментарии в блоге и на форуме.

  6. Привет. Спасибо за скрипт. Все пашет, но фотки открываются не в той части экрана где расположена миниатюра а вверху сайта, плюс на хроме у меня swf ролик перекрывает фотки (оказывается поверх них). Можно как то побороть открытие фоток вверху экрана?

    1. @Александр, форма с фотками центрируется посредине экрана, она и должна там отображаться. По поводу флеша: вам надо посмотреть, какой z-index у блока с роликом и сделать его ниже, чем у QuickBox.

    2. @Назар Токарь, Там что то невероятное накручено.
      z-index у флэша стоит 1, но он все равно вылазит поверх QuickBox. Или QuickBox под него залезает…

      “форма с фотками центрируется посредине экрана”

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

  7. Паша, хм, пока никак, но я подумаю, как такое сделать.

  8. Паша

    Подскажите, а если на странице 20 фото, и при клике на одну из них, показывается все 20 пунктов (нумерация в квадратиках). Как разбить все это на группы? Например есть 20 фото, но это 4 группы. При клике на первую фото, показывается при увеличении только 5 фото (нумерация в квадратиках). Спасибо!

  9. Я про демо на вашем сайте говорил.

    1. Виталий, разберусь, в чём дело, спасибо. Вероятно, в тестовом варианте не сохранился код как надо. На мебельном у вас все работает?

      http://www.mebel-nova.ru/product/mini/

  10. Виталий, дайте сслку на страницу, где установлен скрипт, надо смотреть. Проверьте, все ли фалы закачаны и подключены, не вызывается ли повторно jquery, указан ли правильный класс для ссылок с фото.

  11. Эмир

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

    1. Эмир, скрипт совершенно не повлияет на индексацию изображений, потому что у вас на сайте остаётся обычная живая ссылка на каждую картинку и она продолжает быть в индексе. Скрипт же обрабатывает открытие изображения в браузере клиента. Бояться нечего.

  12. Я не могу сказать почему, но у меня в хроме и опере скрипт в демо не работает – открываются картинки просто в новом окне.

  13. Девушка, поделитесь пож-та впечатлениями от работы с ним.

  14. Спасибо, добавлю в закладки, много хорошего говорят о quickBox