Youtube 视频和图像在同一个颜色框中？答案

【问题标题】：Youtube Video & Images In the SAME ColorBox?Youtube 视频和图像在同一个颜色框中？
【发布时间】：2011-08-17 21:40:38
【问题描述】：

我试图让用户点击一组拇指，这将打开一个颜色框并显示相应的图像/视频。拇指可以指图像或视频，因此颜色框应该（希望）正确显示它。我当前的实现有效，但我有两个颜色框实例，一个用于视频，一个用于图像。我希望我能找到一种方法将两者结合到同一个实例中并允许在两者之间导航......这甚至可能吗？这就是我正在做的事情：

<div id="imageGallery">
    <ul id="thumbs">
        @if (!string.IsNullOrEmpty(Model.Youtube))
        {
            <li class="galleryImage"><a href="http://www.youtube.com/embed/@YoutubeId(Model.Youtube)" class="detailColorBox" id="youtubeVideo"
            title=""><img src="http://img.youtube.com/vi/@YoutubeId(Model.Youtube)/1.jpg" alt="image thumb" /></a></li>
        }
        @foreach (var img in Model.Images)
        {
            <li class="galleryImage"><a href="@Html.ResolvePath(img, "710x560")" class="detailColorBox" 
rel="itemDetailGallery"  title=""><img src="@Html.ResolvePath(img, "135x135")" alt="image thumb" /></a></li>
        }
    </ul>
</div>

在脚本标签内：

        $("a[rel='itemDetailGallery']").colorbox();

        $("#youtubeVideo").colorbox({iframe:true, innerWidth:425, innerHeight:344});

P.S：我还尝试使用 Youtube 视频 ID 提供 iframe 并将其显示在颜色框中，但也失败了。

有什么想法吗？

【问题讨论】：

您能否接受这个问题的答案，因为它是在 Google 上找到的，这样可以避免混淆。

标签： jquery razor youtube colorbox

【解决方案1】：

试试这个……

$(".detailColorBox").colorbox({rel:'group1'});
$("#youtubeVideo").colorbox({rel:'group1',iframe:true, innerWidth:425, innerHeight:344});

【讨论】：

这行得通，应该被接受为答案。在查看如何结合 youtube 和图像时，它很容易在 Google 上弹出。

【解决方案2】：

我的工作与open:true 属性：

$("#youtubevideo").colorbox({open:true,rel:'group-video',iframe:true, innerWidth:425, innerHeight:344});

【讨论】：