从wordpress附件需要jquery画廊的帮助

时间：2011-12-20 15:51:03

标签： jquery wordpress wordpress-theming

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

这个想法是：

  • 我们有页面“画廊”女巫将使用页面模板“Gallery-tpl”，说吧！

  • 在页面模板“Gallery-tpl”中，我在标题中有一个大图像女巫是第一个帖子附件的全尺寸！

  • 我体内的一些地方＆lt; div>所有附件的无序列表

  • TUMBNAIL SIZE！

  • 此列表必须是一行滑块

  • 我想点击缩略图时标题中的大图片会随着点击的缩略图的完整版本而改变

  • 我在这篇文章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 个答案:

答案 0 :(得分：0)

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

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

具体细节： 我摆脱了泡沫排序。它不会对您的输出产生影响，但它会简化您的代码。根据{{​​3}}，参数与the codex for get_children相同，后者又使用get_posts，其中包含orderby和order参数。假设您希望它们按照这种方式排序 - 我注意到冒泡排序来自您引用的页面。

WordPress附带了jQuery的副本 - 通过将其放入模板中，您可能会不必要地将其包括两次，或者更糟，包括两个冲突的版本。查看WP_Query并在wp_enqueue_scripts的{​​{1}}操作挂钩中调用它。因为它与WordPress捆绑在一起， functions.php 应该够了。顺便说一句，如果你想使用谷歌版本（不是一个坏主意），你可以使用the wp_enqueue_script function插件。

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

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

我已经取出了图像上的硬编码宽度和高度（仅供我测试）。如果要动态设置它们，可以查看Use Google Libraries。

我不是jQuery专家（毫无疑问有比“onclick”更好的方法，纯粹主义者不会放入HTML），但以下内容适用于我。

在functions.php中：

wp_enqueue_script('jquery');

并在您的模板文件中：

add_action('wp_enqueue_scripts', 'so_enqueue_scripts');

function so_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
相关问题
最新问题