需要来自 wordpress 附件的 jquery 库帮助答案

【问题标题】：need help for jquery gallery from wordpress attachments需要来自 wordpress 附件的 jquery 库帮助
【发布时间】：2012-01-27 19:07:24
【问题描述】：

我想为客户的 wordpress 网站创建更具体的 jquery 库！

想法是：

我们有页面“画廊”女巫将使用页面模板“画廊-tpl”，比方说！
在页面模板“Gallery-tpl”中，我在标题中有一个大图片，女巫是第一个帖子附件的全尺寸！
我在正文中的某些地方有

，其中包含所有附件的无序列表
缩略图大小！
此列表必须是一排滑块
我希望当点击缩略图时，标题中的大图像会随着点击缩略图的完整版本而改变
我在这篇帖子Get Attachments to post找到了如何获取第一个附件以及如何获取所有附件！
- 我找到了一种用 jQuery 替换图像的方法。
- 然后我尝试将所有代码组合在一起，但它仅适用于一张图片

这是我的“Gallery-tpl”

    <?php
/**
Template Name: Gallery

original: http://www.rlmseo.com/blog/get-images-attached-to-post/
*/

function bdw_get_first_image() {

    // Get the post ID
    $iPostID = $post->ID;

    // Get images for this post
    $arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );

    // If images exist for this page
    if($arrImages) {

       // Get array keys representing attached image numbers
       $arrKeys = array_keys($arrImages);

       /******BEGIN BUBBLE SORT BY MENU ORDER************/
       // Put all image objects into new array with standard numeric keys (new array only needed while we sort the keys)
       foreach($arrImages as $oImage) {
          $arrNewImages[] = $oImage;
       }

       // Bubble sort image object array by menu_order TODO: Turn this into std "sort-by" function in functions.php
       for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
          for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
             if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
                $oTemp = $arrNewImages[$j];
                $arrNewImages[$j] = $arrNewImages[$j + 1];
                $arrNewImages[$j + 1] = $oTemp;
             }
          }
       }

       // Reset arrKeys array
       $arrKeys = array();

       // Replace arrKeys with newly sorted object ids
       foreach($arrNewImages as $oNewImage) {
          $arrKeys[] = $oNewImage->ID;
       }
       /******END BUBBLE SORT BY MENU ORDER**************/

       // Get the first image attachment
       $iNum = $arrKeys[0];

       // Get the thumbnail url for the attachment
       $sThumbUrl = wp_get_attachment_thumb_url($iNum);

       // UNCOMMENT THIS IF YOU WANT THE FULL SIZE IMAGE INSTEAD OF THE THUMBNAIL
       $sImageUrl = wp_get_attachment_url($iNum);

       // Build the <img> string
       $sImgString = '<a href="' .$sImageUrl . '" class="btw_fullimage">' .
                       '<img src="' . $sImageUrl . '" width="600" height="200" alt="Big Image" title="Big Image" />' .
                    '</a>';

       // Print the image
       echo $sImgString;
    }
}

function bdw_get_images() {

    // Get the post ID
    $iPostID = $post->ID;

    // Get images for this post
    $arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );

    // If images exist for this page
    if($arrImages) {

       // Get array keys representing attached image numbers
       $arrKeys = array_keys($arrImages);

       /******BEGIN BUBBLE SORT BY MENU ORDER************/
       // Put all image objects into new array with standard numeric keys (new array only needed while we sort the keys)
       foreach($arrImages as $oImage) {
          $arrNewImages[] = $oImage;
       }

       // Bubble sort image object array by menu_order TODO: Turn this into std "sort-by" function in functions.php
       for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
          for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
             if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
                $oTemp = $arrNewImages[$j];
                $arrNewImages[$j] = $arrNewImages[$j + 1];
                $arrNewImages[$j + 1] = $oTemp;
             }
          }
       }

       // Reset arrKeys array
       $arrKeys = array();

       // Replace arrKeys with newly sorted object ids
       foreach($arrNewImages as $oNewImage) {
          $arrKeys[] = $oNewImage->ID;
       }
       /******END BUBBLE SORT BY MENU ORDER**************/
       // izpolzvai do ili for
       echo '<ul id="btw_gallery">';
       for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {

           // Get the first image attachment
           $iNum = $arrKeys[$i];

           // Get the thumbnail url for the attachment
           $sThumbUrl = wp_get_attachment_thumb_url($iNum);

           // UNCOMMENT THIS IF YOU WANT THE FULL SIZE IMAGE INSTEAD OF THE THUMBNAIL
           $sImageUrl = wp_get_attachment_url($iNum);

           // Build the <img> string
           $sImgString = '<img src="' . $sThumbUrl . '" alt="Thumbnail Image" title="Thumbnail Image" class="btw_thumb" />';

           // Print the image
           echo '<li>'.$sImgString.'</li>';
       } 
       echo '</ul>';
       echo '
       <script>
        $("#btw_gallery li img").live("click", function() {
            $("a.btw_fullimage").attr("href", \''.$sImageUrl.'\').attr("title", this.title);
           $(".btw_fullimage img").attr("src", \''.$sImageUrl.'\').attr("alt", this.alt).attr("title", this.title);
        });
        </script>
       ';
    }
}

get_header(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <div id="primary">
            <div id="content" role="main">

                <?php while ( have_posts() ) : the_post(); ?>

                    <?php bdw_get_first_image(); ?>

                    <?php get_template_part( 'content', 'page' ); ?>

                    <?php bdw_get_images(); ?>
                <?php endwhile; // end of the loop. ?>

                <hr />



            </div><!-- #content -->
        </div><!-- #primary -->


<?php get_footer(); ?>

我相信有更正确和专业的方法可以做到这一点，它会奏效！

如果有人可以帮助我，请回答我！

【问题讨论】：

【解决方案1】：

主要问题是您的脚本将 javascript 中的图像 URL 硬编码为您在循环中引用的最后一张图像（$sImageUrl 在您的for 循环中设置）。如果您不明白我的意思，请查看生成页面的来源。

作为一种通用方法，我会在一个简单的 HTML 页面中使用图像交换逻辑，然后将其应用到 WordPress。

具体来说：我会摆脱冒泡排序。它不会对您的输出产生影响，但会简化您的代码。根据the codex for get_children，参数与get_posts相同，后者又使用WP_Query，后者具有orderby和order参数。假设您希望它们以这种方式排序 - 我注意到冒泡排序来自您引用的页面。

WordPress 附带 jQuery 的副本 - 通过将其放入模板中，您可能会不必要地包含它两次，或者更糟，包括两个相互冲突的版本。查看the wp_enqueue_script function 并在functions.php 的wp_enqueue_scripts 操作挂钩中调用它。因为它已经与 WordPress 捆绑在一起， wp_enqueue_script('jquery'); 应该足够了。顺便说一句，如果您想使用 Google 版本（不是一个坏主意），您可以使用 Use Google Libraries 插件。

我会检索一次附件，然后在两个函数中使用结果。您让 WordPress 完成了它需要做的更多工作（可能运行两个相同的数据库查询）。

如果可以的话，我可能还会显示所显示图片的缩略图。它将简化显示逻辑（您不必将旧主图片的缩略图交换到新主图片的位置）。

我已经删除了图像上硬编码的宽度和高度（仅用于我的测试）。如果您想动态设置它们，可以查看the wp_get_attachment_image_src function。

我不是 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();
?>

【讨论】：