Cheap Phentermine Online: Sellme.ru - Плагин для WordPress: FancyBox

На что подписаться? | Управление подпиской

Sellme.ru

http://sellme.ru
рекомендовать друзьям >>

Плагин для WordPress: FancyBox
Я тут занимаюсь переделкой сайта 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.

Переслать