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

Дошли руки организовать нормальные модальные окна для изображений. Кончено, легчайший вариант это плагин 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', "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

8 Комментарии

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

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

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

      • Нельзя ли как-нибудь придумать фильтр или функцию какую для этого, чтобы ее вставить в 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. function twentyten_remove_gallery_css( $css ) {
    	return preg_replace( "#(.*?)#s", '', $css );
    }
    add_filter( 'gallery_style', 'twentyten_remove_gallery_css' );

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

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

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*