1. ホーム
  2. 質問と答え
  3. jqueryギャラリーのワードプレス添付からのヘルプが必要

jqueryギャラリーのワードプレス添付からのヘルプが必要

2011-12-20 4 views
0

私はクライアントのWordPressのサイトのためのより具体的なjqueryギャラリーを作成したい！jqueryギャラリーのワードプレス添付からのヘルプが必要

考え方は次のとおりです。

  • 私たちは、ページ「ギャラリー」魔女は、ページテンプレート「ギャラリー-TPL」を使用しますとしましょう！

  • ページテンプレート "Gallery-tpl"には、ヘッダーウィッチの1つの大きな画像が最初の投稿添付のフルサイズです！私はすべての添付ファイル

  • TUMBNAILサイズの順不同リストを<のdiv>を持ち、体内の

  • いくつか！

  • このリストには、1つの行のスライダー

  • でなければならないと私はどのようにこの記事Get Attachments to postで見つかった

  • サムネイルをクリックヘッダーで大きな画像がクリックされたサムネイルのフルバージョンを変更するとき、私はしたいです最初の添付ファイルを取得し、それらのすべてを取得する方法！

    • イメージをjQueryに置き換える1つの方法が見つかりました。私の「ギャラリー-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枚の画像だけここ

のために働きますこれを行うための正しい、職業的な方法とそれは動作します！

私にこれを手伝ってくれる人がいれば、私にお答えください！

出典

2011-12-20 bogastyle

答えて

0

主な問題は、ループ内で参照した最後の画像（$sImageUrlがforループに設定されています）にJavaScriptの画像URLをハードコードするスクリプトです。私が何を意味するのか分からない場合は、生成されたページのソースを表示してください。

一般的なアプローチとして、画像交換ロジックを単純なHTMLページで動作させてからWordPressに適用します。

詳細： 私は気泡の種類を取り除くでしょう。それはあなたの出力に違いはありませんが、あなたのコードを簡素化します。 the codex for get_childrenによれば、引数はget_postsと同じで、orderbyとorderのパラメータを持つWP_Queryが使用されます。それはあなたがそれらの方法でソートされたものと仮定しています - 私はバブルソートがあなたが参照したページから来ていることに気付きます。

WordPressにはjQueryのコピーが付属しています。テンプレートに入れておくと、不必要に2回、または悪いことに2つの競合するバージョンが含まれることがあります。 the wp_enqueue_script functionを確認し、functions.phpのwp_enqueue_scriptsアクションフックで呼び出してください。WordPressに同梱されているので、 wp_enqueue_script('jquery'); で十分です。さて、もしあなたが悪い考えではなく、Googleのバージョンを使用したい場合は、Use Google Librariesプラグインを使用することができます。

添付ファイルを一度取得して、2つの機能で結果を使用します。あなたはWordPressにもっと必要な作業をさせている（おそらく2つの同じデータベースクエリを実行している）。

可能であれば、表示されている画像のサムネイルも表示されます。これは、表示ロジックを簡素化します（古いメインピクチャのサムネイルを新しいピクチャの位置に入れ替える必要はありません）。

画像のハードコードされた幅と高さを取り出しました（私のテスト用です）。動的に設定する場合は、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(); 
?>

出典

2011-12-21 13:42:22 Hobo

関連する問題

 関連する問題