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

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

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

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

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

$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

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

$link = str_replace ('<a href=', '<a class="zoom" href=', $link);

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

 $selector = "gallery-{$instance}";

$output = apply_filters('gallery_style', "<div class='gallery galleryid-{$id}'>");

$i = 0;
foreach ( $attachments as $id => $attachment ) {
$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
$link = str_replace ('<a href=', '<a class="zoom" href=', $link);
$output .= "<div class='gallery-item'>";
$output .= "
<div class='gallery-icon'>
$link
</div>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<div class='gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</div>";
}
$output .= "</div>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}

$output .= "
<br style='clear: both' />
</div>n";

return $output;

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

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

/* wp-gallery */
.gallery {margin: auto;}
.gallery-item {float: left;margin-top: 10px; text-align: center;width: 33%;}
.gallery img {border: 2px solid #cfcfcf;}
.gallery-caption {margin-left: 0;}

Готово!

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

Ruslan
Оцените автора
Добавить комментарий

  1. the_R

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

    Ответить
    1. tiaurus

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

      Ответить
      1. the_R

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

        Ответить
        1. tiaurus

          Замечательно!

          Ответить
          1. zetrider

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

            rel="facebox" 

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

            rel="attachment wp-att-761" 

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

            Ответить
            1. zetrider

              tiaurus, извиняюсь опечатался с ником

              Ответить
      2. Sergey Biryukov

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

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

        function my_gallery_shortcode() {
        	...
        }
        add_filter('post_gallery', 'my_gallery_shortcode');
        

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

        	// Allow plugins/themes to override the default gallery template.
        	$output = apply_filters('post_gallery', '', $attr);
        	if ( $output != '' )
        		return $output;
        
        Ответить
  2. the_R
    function twentyten_remove_gallery_css( $css ) {
    	return preg_replace( "#(.*?)#s", '', $css );
    }
    add_filter( 'gallery_style', 'twentyten_remove_gallery_css' );

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

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

    Ответить