Основная проблема заключается в том, что ваш скрипт жестко кодирует URL-адрес изображения в javascript до последнего изображения, на которое вы ссылались в цикле ($sImageUrl установлено в вашем цикле for). Посмотрите на источник сгенерированной страницы, если вы не понимаете, о чем я.
В качестве общего подхода я бы использовал логику обмена изображениями на простой странице HTML, а затем применил бы ее к WordPress.
к специфике:
Я бы избавился от пузыря. Это не повлияет на ваш вывод, но упростит ваш код. Согласно кодексу для get_children , аргументы такие же, как get_posts , который в свою очередь использует WP_Query , который имеет параметры orderby и order , Это предполагает, что вы хотите, чтобы они сортировались таким образом - я заметил, что сортировка пузырьков происходит со страницы, на которую вы ссылались.
WordPress поставляется с копией jQuery - поместив ее в свой шаблон, вы можете без необходимости включать его дважды или хуже, включая две конфликтующие версии. Проверьте функцию wp_enqueue_script и вызовите ее в хуке действия wp_enqueue_scripts в вашем functions.php. Потому что это в комплекте с WordPress,
wp_enqueue_script('jquery');
должно быть достаточно. Кроме того, если вы хотите использовать версию Google (неплохая идея), вы можете использовать плагин Use Google Libraries .
Я бы однажды получил вложения и использовал результаты в двух функциях. WordPress выполняет больше работы, чем нужно (возможно, выполняет два одинаковых запроса к базе данных).
Я бы, наверное, показал бы и эскиз для отображаемого изображения. Это упростит логику отображения (вам не придется менять эскиз старого основного изображения на место нового).
Я убрал жестко запрограммированные значения ширины и высоты на изображениях (только для моего тестирования). Вы можете посмотреть функцию wp_get_attachment_image_src , если хотите установить их динамически.
Я не эксперт по jQuery (без сомнения, есть более подходящие подходы, чем "onclick", который пуристы не добавят в HTML), но мне подходит следующее.
В functions.php:
add_action('wp_enqueue_scripts', 'so_enqueue_scripts');
function so_enqueue_scripts() {
wp_enqueue_script('jquery');
}
и в вашем файле шаблона:
<?php
/**
Template Name: Gallery
original: http://www.rlmseo.com/blog/get-images-attached-to-post/
*/
function so_get_attached_images($post_id) {
return get_children( array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_parent' => $post_id,
'orderby' => 'menu_order',
'order' => 'ASC'
) );
}
function so_show_first_image($image) {
$sImageUrl = wp_get_attachment_url($image->ID);
$sImgString = '<a href="'.$sImageUrl.'" class="btw_fullimage">'.'<img src="'.$sImageUrl.'" alt="Big Image" title="Big Image" />'.'</a>';
echo $sImgString;
}
function so_show_thumbnails($images) {
if (empty($images)) {
return;
}
echo '<ul id="btw_gallery">';
foreach($images as $image) {
$sThumbUrl = wp_get_attachment_thumb_url($image->ID);
$sImageUrl = wp_get_attachment_url($image->ID);
$sImgString = '<a href="#" onclick="setImage(\''.$sImageUrl.'\'); return false;"><img src="'.$sThumbUrl.'" alt="Thumbnail Image" title="Thumbnail Image" class="btw_thumb"/></a>';
echo '<li>'.$sImgString.'</li>';
}
echo '</ul>';
}
get_header();
?>
<script>
function setImage(sImageUrl) {
jQuery("a.btw_fullimage").attr("href", sImageUrl ).attr("title", this.title);
jQuery(".btw_fullimage img").attr("src", sImageUrl ).attr("alt", this.alt).attr("title", this.title);
}
</script>
<div id="primary">
<div id="content" role="main">
<?php while (have_posts()) :
the_post();
$images = so_get_attached_images($post->ID);
if (! empty($images)) {
$first_image = current($images); // first image from the array
so_show_first_image($first_image);
}
get_template_part('content', 'page');
so_show_thumbnails($images);
endwhile; // end of the loop. ?>
<hr />
</div><!-- #content -->
</div><!-- #primary -->
<?php
get_footer();
?>