Дошли руки организовать нормальные модальные окна для изображений. Кончено, легчайший вариант это плагин Easy FancyBox. Но из-за его сильно раздутого функционала и размера я не захотел его использовать.
Я выбрал FaceBox. Это не плагин и нужно всё делать ручками. Вот тут всё и началось
1. У стандартных галерей на WP не прописан хоть какой-нибудь класс для ссылки
2.Вывод галереи создаёт невалидный код =(
Как я решил эти проблемы:
1. Лезем в wp-includes и открываем файл media.php->Ищем(ctrl+f :D ) строку:
1
| $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); |
и добавляем после этой строки, такую вот запись:
1
| $link = str_replace ('<a href=', '<a class="zoom" href=', $link); |
где "zoom" это класс для ссылки. Вы можете поменять на нужный, либо вообще забыть об этом.
2.Валидность. Нужна она вам или нет? Мне нужна(А.Лебедев иди на йух).
итак я получил:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| $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 темы такой вот код:
1 2 3 4 5
| /* 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