我尝试过lightbox-plus,fancybox等......
但我想不出怎么做。
这些视频是带有包含Youtube视频的链接的图片帖子:
<p><a href="http://www.youtube.com/watch?v=zUN826BdvV4">
<img class="alignnone size-thumbnail wp-image-40"
title="Screenshot" src="http://localhost/custom-post-type/
wp-content/uploads/2011/01/Screenshot2-150x150.png"
alt="" width="150" height="150" /></a></p>
例如,Fancybox for Wordpress让我为图片添加一个灯箱,但如果图片链接到Youtube视频则不起作用。
有什么建议吗?
答案 0 :(得分:5)
一种简单的方法是使用PrettyPhoto(link to site,link to wordpress plugin)。激活很简单:
$('a[rel="prettyPhoto"], .myvideolinkclass').prettyPhoto();
HTML很干净:
<a href="http://youtube.com/a-real-youtube-link" rel="prettyPhoto[youtube]">My Awesome Youtube Video</a>
答案 1 :(得分:3)
你见过FancyBox博客吗?在Fancybox中有一个YouTube视频的例子:
要导入FancyBox的脚本标记:
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
绑定点击事件的JavaScript / Jquery:
$("#tip4").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
<强> HTML:强>
<a id="tip4" title="'Zombieland' Trailer"
href="http://www.youtube.com/watch?v=071KqJu7WVo&feature=player_embedded#at=41">
Try now
</a>
答案 2 :(得分:1)
我想出了how:
<div style="text-align: center;"><a class="fancybox" href="#welcomevideo"><img src="http://www.howieolson.com/wp-content/uploads/2010/04/howie-olsen-welcome-video.jpg" width="251px" height="188px" alt="Welcome To High Output"></a></div>
<div style="display:none" id="welcomevideo">
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
</div>
它似乎适用于附加了内联内容的链接。
(如果有更好的解决方案,请告诉我)。