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 Комментарий на "Скрипт для просмотра фотографий jQuery.quickBox 0.2"

    Уведомлять
    avatar
    5000
    артем
    Гость

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

    артем
    Гость

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

    артем
    Гость

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

    Ян
    Гость

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

    balamarin
    Гость

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

    balamarin
    Гость

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

    balamarin
    Гость
    Александр
    Гость

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

    Александр
    Гость

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

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

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

    Паша
    Гость

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

    Виталий
    Гость

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

    Эмир
    Гость

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

    Виталий
    Гость

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

    Красивая девушка
    Гость

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

    wpDiscuz