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 回答