3

私はサムネイルが下部にあるjqueryスライダーに取り組んでおり、それらを関連するビデオにリンクさせたいと思っています。そのために私がやっていることは、管理者から投稿を追加することです。タイトルには画像のタイトルが含まれ、コンテンツ領域にはサムネイル画像が含まれ、ビデオリンクにはカスタムフィールドを追加しています。

画像のみ（ビデオではない）に対して同じプロセスを実行している場合、再びスライダーに来てください。正常に動作します。一番下のサムネイルをクリックすると、スライダーに大きな画像が表示されます。このコード行をクリックして画像のソースを取得しています

   var url = $(this).attr("src");

imgタグから画像のソースを教えてくれます。すべて順調。しかし、私の正確なポイントは、上記のコードを介してカスタムフィールドの値を取得したいということですが、インターネットからランダムに多くの方法を試したので、それを行う方法がわかりませんが、何もうまくいきません。

私が言っていることを理解していただければ幸いです。必要に応じて、コードで詳細を説明します。

どんな助けでも感謝します。

これが私の完全なコードです（phpとhtml） 

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

ここにJavaScriptのjqueryがあります

   <script type="text/javascript">
$(".video-gallery img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }

// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $('.myclass').attr('id');
alert(url);
// get handle to element that wraps the image and make it semi-transparent
var wrap = $(".image_wrap").fadeTo("medium", 0.5);

// the large image from www.flickr.com
var img = new Image();


// call this function after it's loaded
img.onload = function() {

    // make wrapper fully visible
    wrap.fadeTo("fast", 1);

    // change the image
    wrap.find("iframe").attr("src", url);

};

// begin loading the image from www.flickr.com
img.src = url;

// activate item
$(".video-gallery img").removeClass("active");
$(this).addClass("active");

  // when page loads simulate a "click" on the first image
 });
 </script>
4

2 に答える 2

2

次のように、get_post_meta()関数を使用して目的のカスタム フィールドを取得する必要があります。

$custom_field = get_post_meta($post->ID,'CustomFieldName', true);
于 2012-11-20T07:51:38.417 に答える
0

data- で始まるカスタム属性を使用できます。すべてのサムネイルを取得するときにこれを追加します。

<img data-video="get_post_meta($post->ID,'video_ulr', true);" src="...">

そして、Jquery を使用してこの「データ」を操作できます。たとえば、例でデータを取得するには、次を使用します。

var url = $('this').data('video');

詳細や例については、jQuery のドキュメントを参照してください。

于 2012-11-20T08:19:33.457 に答える