Я тут занимаюсь переделкой сайта 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/, активируете в админке и используете следующим образом:
То есть, просто добавляете
(Если охота использовать другим образом, поменяйте jQuery-селектор
Обновление: смотрите новую версию
Скачать fancybox.zip (26 Кб)
Нашли баги? Пишите.
P.S. Для IE6 нужен png-fix. У меня на сайте используется своя версия, поэтому я его не включил в поставку. Если нужен, он есть на сайте FancyBox. Засуньте jquery.pngFix.js в папку fancybox и добавьте в fancybox.php строчку:
Что-то он на Sellme.ru в дурацком браузере №2 (Opera) показывается в центре всей страницы, а не текущей позиции скролла. Посмотрим... Это был баг в jQuery. Залил исправленную версию fancybox, которая нормально работает с Opera.
Я написал для WordPress плагинчик, чтобы включать FancyBox без заморочек.
Распаковываете, закачиваете плагин в wp-content/plugins/, активируете в админке и используете следующим образом:
<a class="fancybox" href="большая_картинка.jpg" title="Заголовок, если надо"> <img src="маленькая_картинка.jpg"> </a>
class="fancybox" к ссылке на большую картинку. Все.
a.fancybox в 16-й строке fancybox.php. Там же можно кастомизировать FancyBox — см. сайт автора. Кстати, fancybox.css и fancybox-1.0.0.js, те которые без .min, можно удалить, я оставил их на всякий случай.)
wp_enqueue_script('pngfix',
'/wp-content/plugins/fancybox/jquery.pngFix.js');
где-нибудь до add_action.... Но лучше забейте на гадов, до сих пор использующих мозговыворачивающий браузер.
P.P.S. 
Не нужен тут спиннер. Пускай картинка выводится на экран естественным образом по мере загрузки. Будет и процесс видно, и отменить можно.
Такая простая вещь - вывести картинку на экран. Обернули десятками килобайт джаваскрипта, оно начало тормозить и появились проблемы с кривыми браузерами. И это всё ради гламурной рамочки и анимации?! :)
Нужен спиннер. Как картинку выводить по мере загрузки, если нужен эффект зума?
Отменить можно -- кликните на спиннер.
> Такая простая вещь - вывести картинку на экран.
Какие будут предложения?
Кстати, а как вы используете прозрачные PNG в IE6? :)
Отличный плагин, спасибо большое. Его стоит отправить в официальную директорию плагинов для WP.
Mio: ага, доки напишу, добавлю pngFix и отправлю. Попозже.
А лучше, конечно, найти нормального мэйнтейнера, который потрудится написать интерфейс для настройки FancyBox, ну и будет поддерживать его :)
Firefox 3 / WinXP: медведь каждый раз грузится заново. На моих 33,6 кбпс это хорошо заметно :-).
Кстати, а для чего вам нужен эффект зума?
Насчет бага — спасибо, посмотрю что там не так.
А, отбой, это не баг. Это просто Flickr каждый раз "новую" картинку выдает (добавляет ?rand=...).
А, нет, это как раз FancyBox добавляет rand=.... Странно, зачем? Завтра разберусь.
Офигенный плагин! Мне очень понравилось, вот только что-то он чуть дольше грузится чем если бы картинка грузилась просто так.
И еще не привычно как-то после того как погрузилась картинка, посмотрел ее, а потом еще раз захотел, а она опять грузится. Т.е. не запоминает ее что ли.
Извините за тавтологию
OK, это автор FancyBox так исправил баг с Safari :) Я переделал, теперь должно из кэша грузится. Пока дистрибутив не выложил, только тут в блоге активировал новую версию. Проверьте, плиз, мишку с пивом в ваших браузерах (и напишите тут в комментариях, в каком браузере проверялось) -- должно работать. Не забудьте кликнуть как минимум 3 раза, чтобы убедиться в том, что все работает.
Завтра, еще сам проверю и если все ок, выложу новую версию.
Chrome всё тип-топ
а где зум? (фф 2.х) у меня картинка только смещается чуть чуть и всё
Есть такой замечательный скриптик – http://highslide.com/
Работает быстрее и мягче.
В FF тоже все ок
sanch3z: Highslide проходили. Хорошо выглядит (анимация, все остальное -- плохо), но, опять же — $$$. Мне нужны open source BSD/MIT/GPL2/Apache/MPL...-решения. У Highslide вообще странная лицензия -- CC Attribution Non-commercial. Ее не рекомендуется применять к коду. Плюс еще ограничения дополнительно к этой лицензии.
Огромоное спасибо! Долго пытался прикрутить себе, не получилось. Теперь работает.
Внимание, вопрос.
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. Срабатывать и на то, и на другое.
?
По мне так лучше третий вариант. Ну, или хотя бы инструкцию, как сделать так, чтобы это работало.
А по-хорошему, наверное, нужен какой-то небольшой конфигуратор к плагину, чтобы можно было выбрать. Сразу говорю, не знаю, насколько это трудоёмкий процесс.
В IE вообще не работает, просто открывает картинку как по обычной ссылке и все. Как исправить?
Сергей: спасибо, исправил у себя, сейчас доделаю png-fix и выложу.