Я взялся за доделку сайта на движке Wordpress с темой Thimefy parallax 1.3.5. Первое что требовалось это обновить wordpress и все плагины до актуальных версий. И потом устранить мелкие ошибки в админке. Например не работала галерея. Галерея не работала из-за не подключенного модуля jquery-ui resizable. Немного повозившись я нашел место где вставить загрузку этого модуля и галерея заработала как надо.
Еще одно важное пожелание заказчика была переделка работы слайдшоу в разделе портфолио. Работало там все как надо, как и задумывали разработчики этой темы. Только у заказчика было свое видение, просто он хотел там простое слайдшоу, без сопроводительного текста расположенного справа. И я с помощью CSS свойств спрятал правый блок и расширил левый до оптимального размера. Посмотрев изменения заказчик был удовлетворен, но как оказалось не полность. Ему необходимо было сделать так что-бы галерея открывалась поверх основного окна как в fancybox или lightbox.
В теме уже использовался javascript библиотека Lightbox, точнее ее клон prettyPhoto от Stephane Caron. И я решил не тащить еще одну javascript библиотеку fancybox, хотя ее я предпочитаю использовать во всех своих проектах где необходимо выводить изображения, галереи или любой другой контекст поверх основного окна. Прежде всего в fancybox мне понравилась хорошая документация и примеры! Прочитав документацию на сайте по prettyPhoto решил повторить с группировкай картинок через тег REL. Ко всем ссылкам добавил тег rel="prettyPhoto[_XXX]", где XXX это уникальный номер документа(<?php the_ID(); ?>). Но галерея перестала работать совсем, не выводились даже картинки.
Тогда решил я использовать встроенное решение от авторов темы. На поиски ушло более 4 часов копания в коде. Первое пришлось добавить свою функцию в файл theme-class.php.
function portfolio_image2($attachment_id, $size = 'large')
{
$size = apply_filters( 'themify_portfolio_image_size', $size );
$img = wp_get_attachment_image_src($attachment_id, $size);
return $img[0];
}
Функция просто возращает путь до картинки.(Да простят меня программисты знающие wordpress)
В файле includes/loop-portfolio.php изменил вывод.
<li class="gallery-icon"> <?php if ( 'yes' != $themify->unlink_image ) : ?> <a href="<?php echo $themify->theme->portfolio_image2($gallery_image->ID); ?>"> <?php echo $themify->theme->portfolio_image($gallery_image->ID, $themify->width, $themify->height); ?> <?php themify_zoom_icon(); ?> </a> <?php else : ?> <?php echo $themify->theme->portfolio_image($gallery_image->ID, $themify->width, $themify->height); ?> <?php endif; // unlink slider image ?> <?php if ( is_singular( 'portfolio' ) ) { if ( '' != $img_caption = $gallery_image->post_excerpt ) { ?> <div class=slider-image-caption><?php echo $img_caption; ?></div> <?php } } ?> </li>
Красным выделены мои изменения. Код отвечающий за вывод галереи находится в файле themify/js/themify.gallery.js. Есть еще другой файл js/themify.gallery.js. Так самое главное оказалось что надо проставить родительскому елементу ссылки class - gallery-icon. И всё заработало как надо.
Надеюсь это поможет кому нибудь не копаться долго в коде в поисках нужного решения. Конечно с fancybox тоже самое можно было сделать за час, но тогда бы пришлось подключать дополнительный javascript файл, а их в этой теме и так много.
