n-wp.ru — блог о WordPress

Дошли руки организовать нормальные модальные окна для изображений

Дошли руки организовать нормальные модальные окна для изображений. Кончено, легчайший вариант это плагин Easy FancyBox. Но из-за его сильно раздутого функционала и размера я не захотел его использовать.

Я выбрал FaceBox. Это не плагин и нужно всё делать ручками. Вот тут всё и началось

1. У стандартных галерей на WP не прописан хоть какой-нибудь класс для ссылки
2.Вывод галереи создаёт невалидный код =(

Как я решил эти проблемы:
1. Лезем в wp-includes и открываем файл media.php->Ищем(ctrl+f :D ) строку:

и добавляем после этой строки, такую вот запись:

где «zoom» это класс для ссылки. Вы можете поменять на нужный, либо вообще забыть об этом.
2.Валидность. Нужна она вам или нет? Мне нужна(А.Лебедев иди на йух).
итак я получил:

надеюсь вы разобрались что тут к чему.

Но это не всё! мы же удалили стили, без них галерея превратиться в вертикальный список картинок.
поэтому добавим в наш файл css темы такой вот код:

Готово!

А вот и пройденная валидация: http://validator.w3.org/check?uri=http%3A%2F%2Fstreetball.name%2Fmedia%2Fphoto%2Fkid-dynamite&charset=%28detect+automatically%29&doctype=Inline&group=0

8 комментариев

  • на самом деле всё это можно сделать намного красивее, но как информация для размышления пойдёт

    • Отличный мануал! Большое спасибо!
      Всегда хотел приделать вывод изображений в модальном окне без wp-плагинов, ограничившись только jquery. Кстати, ссылка на скрипт FaceBox будет не лишней: http://chriswanstrath.com/facebox/
      Единственно, что показалось мне неудобным — это редактирование media.php. После обновления (кстати, WordPress 3.0.2 уже как бы есть) придется заново лезть в этот файл. Нельзя ли как-нибудь придумать фильтр или функцию какую для этого, чтобы ее вставить в functions.php?

      • я перепишу эту статью и закину сюда же в новый «вопрос». Появились новые идеи, мысли и т.д.

          • tairus, есть вопрос по поводу FaceBox, очень он понравился но бывает в некоторые изображения не вставляется

            видимо из за того что там уже присутствует тег вида:

            есть ли какой нибудь вариант чтобы это исправить?
            Спасибо

      • Нельзя ли как-нибудь придумать фильтр или функцию какую для этого, чтобы ее вставить в functions.php?

        Можно скопировать функцию gallery_shortcode() с нужными изменениями под собственным именем и использовать фильтр post_gallery:

        Только без этого фрагмента, чтобы не получилась бесконечная рекурсия:

  • ↑ удаляем CSS который вставлялся вместе с галереей.

    для валидации dl-dt надо при загрузке добавлять описания к изображениям