Я тут занимаюсь переделкой сайта 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.ru в дурацком браузере №2 (Opera) показывается в центре всей страницы, а не текущей позиции скролла. Посмотрим... Это был баг в jQuery. Залил исправленную версию fancybox, которая нормально работает с Opera.
—
21.10.2008
| 22 Comments