Назар Токар
Опубліковано: 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 Будьте в курсі. Долучайтесь до нашого каналу в Telegram.

    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    28 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

    @Назар Токарь, rel="nofollow"> вот фото

    Автор
    Назар Токар

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

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

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

    @Назар Токарь, Там что то невероятное накручено.

    z-index у флэша стоит 1, но он все равно вылазит поверх QuickBox. Или QuickBox под него залезает...

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

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

    Автор
    Назар Токар

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

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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