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>

Скачать

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

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

Коменти

Oleg

Простите. А где находятся мануалы по ошибкам?

Назар Токарь

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

артем

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

артем

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

Назар Токарь

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

артем

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

Назар Токарь

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

Ян

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

balamarin

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

Назар Токарь

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

balamarin

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

Назар Токарь

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

balamarin

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

Назар Токарь

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

Назар Токарь

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

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

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

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

Александр

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

Назар Токарь

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

Александр

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

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

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

Дедушка

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

Паша

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

Виталий

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

Дедушка

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

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

Дедушка

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

Эмир

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

Дедушка

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

Виталий

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

Дедушка

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

Красивая девушка

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