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

Обновление: смотрите новую версию

Я несколько месяцев искал хороший "zoom" для картинок. Lightbox, Thickbox и другие — отстой. Во-первых, они затемняют фон, а я этого не хочу. Во-вторых, они совершенно некрасивые. В-третьих, многие из них очень большие. Наконец, собственно, эффекта зума нет. Я хотел что-нибудь в стиле Apple и с небольшим весом.

Кабель (имя такое — Cabel) из Паники (компания такая — Panic) сделал замечательную штуку FancyZoom. Выглядит прекрасно, но: штука платная (39 $ за один сайт) и занимает 152 Кб.

Наконец, пару недель назад я нашел чудо под названием FancyBox. Чем оно лучше? Во-первых, использует jQuery (а не нелюбимый мной prototype или чего-нибудь другое). Я и так "линкую" эту библиотеку с сайтом для других вещей, поэтому будет меньше трафика и HTTP-запросов (кроме того, jQuery включается в стандартную поставку WordPress). Во-вторых, занимает 27 Кб (в моей оптимизированной версии, включая картинки. Только CSS и JS — 12 Кб). Наконец, выглядит превосходно.

Пример (кликните. В RSS, естественно, не работает, зайдите на сайт):

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

Распаковываете, закачиваете плагин в wp-content/plugins/, активируете в админке и используете следующим образом:

<a class="fancybox" href="большая_картинка.jpg"

title="Заголовок, если надо">

<img src="маленькая_картинка.jpg">

</a>

То есть, просто добавляете class="fancybox" к ссылке на большую картинку. Все.

(Если охота использовать другим образом, поменяйте jQuery-селектор a.fancybox в 16-й строке fancybox.php. Там же можно кастомизировать FancyBox — см. сайт автора. Кстати, fancybox.css и fancybox-1.0.0.js, те которые без .min, можно удалить, я оставил их на всякий случай.)

Обновление: смотрите новую версию

Скачать fancybox.zip (26 Кб)

Нашли баги? Пишите.

P.S. Для IE6 нужен png-fix. У меня на сайте используется своя версия, поэтому я его не включил в поставку. Если нужен, он есть на сайте FancyBox. Засуньте jquery.pngFix.js в папку fancybox и добавьте в fancybox.php строчку:

wp_enqueue_script('pngfix',

'/wp-content/plugins/fancybox/jquery.pngFix.js');

где-нибудь до add_action.... Но лучше забейте на гадов, до сих пор использующих мозговыворачивающий браузер.

P.P.S. Что-то он на Sellme.biz в дурацком браузере №2 (Opera) показывается в центре всей страницы, а не текущей позиции скролла. Посмотрим... Это был баг в jQuery. Залил исправленную версию fancybox, которая нормально работает с Opera.

Ugnich Anton 2008-10-21 03:08

Не нужен тут спиннер. Пускай картинка выводится на экран естественным образом по мере загрузки. Будет и процесс видно, и отменить можно.

Такая простая вещь - вывести картинку на экран. Обернули десятками килобайт джаваскрипта, оно начало тормозить и появились проблемы с кривыми браузерами. И это всё ради гламурной рамочки и анимации?! :)

Нужен спиннер. Как картинку выводить по мере загрузки, если нужен эффект зума?

Отменить можно -- кликните на спиннер.

> Такая простая вещь - вывести картинку на экран.

Какие будут предложения?

Кстати, а как вы используете прозрачные PNG в IE6? :)

Mio 2008-10-21 04:08

Отличный плагин, спасибо большое. Его стоит отправить в официальную директорию плагинов для WP.

Mio: ага, доки напишу, добавлю pngFix и отправлю. Попозже.

А лучше, конечно, найти нормального мэйнтейнера, который потрудится написать интерфейс для настройки FancyBox, ну и будет поддерживать его :)

zencd 2008-10-21 06:08

Firefox 3 / WinXP: медведь каждый раз грузится заново. На моих 33,6 кбпс это хорошо заметно :-).

Кстати, а для чего вам нужен эффект зума?

Кстати, а для чего вам нужен эффект зума?

Для эффекта зума :)

Насчет бага — спасибо, посмотрю что там не так.

А, отбой, это не баг. Это просто Flickr каждый раз "новую" картинку выдает (добавляет ?rand=...).

А, нет, это как раз FancyBox добавляет rand=.... Странно, зачем? Завтра разберусь.

Андрей Берман 2008-10-21 06:08

Офигенный плагин! Мне очень понравилось, вот только что-то он чуть дольше грузится чем если бы картинка грузилась просто так.

И еще не привычно как-то после того как погрузилась картинка, посмотрел ее, а потом еще раз захотел, а она опять грузится. Т.е. не запоминает ее что ли.

Извините за тавтологию

OK, это автор FancyBox так исправил баг с Safari :) Я переделал, теперь должно из кэша грузится. Пока дистрибутив не выложил, только тут в блоге активировал новую версию. Проверьте, плиз, мишку с пивом в ваших браузерах (и напишите тут в комментариях, в каком браузере проверялось) -- должно работать. Не забудьте кликнуть как минимум 3 раза, чтобы убедиться в том, что все работает.

Завтра, еще сам проверю и если все ок, выложу новую версию.

Владимир 2008-10-21 10:08

Chrome всё тип-топ

NikoNiko 2008-10-21 11:08

а где зум? (фф 2.х) у меня картинка только смещается чуть чуть и всё

sanch3z 2008-10-21 11:08

Есть такой замечательный скриптик – http://highslide.com/

Работает быстрее и мягче.

Сергей 2008-10-21 12:08

В FF тоже все ок

sanch3z: Highslide проходили. Хорошо выглядит (анимация, все остальное -- плохо), но, опять же — $$$. Мне нужны open source BSD/MIT/GPL2/Apache/MPL...-решения. У Highslide вообще странная лицензия -- CC Attribution Non-commercial. Ее не рекомендуется применять к коду. Плюс еще ограничения дополнительно к этой лицензии.

bm 2008-10-21 14:08

Огромоное спасибо! Долго пытался прикрутить себе, не получилось. Теперь работает.

Внимание, вопрос.

WordPress, если вставлять картинки с помощью встроенной Media Gallery, добавляет к маленькой картинке класс size-thumbnail. Мы можем применять FancyBox к ним с помощью такого селектора: jQuery("img.size-thumbnail").parent(). То есть, при вставке маленькой картинки в редакторе WordPress, не придется указывать class="fancybox".

Как думаете, что лучше включить по умолчанию:

1. Убрать a class="fancybox" и применять FancyBox для вставленных из WordPress картинок (img class="size-thumbnail").

2. Оставить все как есть сейчас.

3. Срабатывать и на то, и на другое.

?

bm 2008-10-21 17:08

По мне так лучше третий вариант. Ну, или хотя бы инструкцию, как сделать так, чтобы это работало.

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

Сергей 2008-10-23 18:08

В IE вообще не работает, просто открывает картинку как по обычной ссылке и все. Как исправить?

Сергей: спасибо, исправил у себя, сейчас доделаю png-fix и выложу.