Youtube видео и изображения в том же ColorBox? - PullRequest
Новая
       19

Youtube видео и изображения в том же ColorBox?

4 голосов
/ 03 мая 2011

Я пытаюсь разрешить пользователям нажимать на группу больших пальцев, которая откроет цветовую коробку и отобразит соответствующее изображение / видео. Большой палец может ссылаться на изображение или видео, поэтому colorbox должен (будем надеяться) отображать его правильно. Моя текущая реализация работает, но у меня есть два экземпляра colorbox, один для видео и один для изображений. Я надеялся, что смогу найти способ объединить оба в один и тот же экземпляр и учесть навигацию между ними ... Это вообще возможно? Вот что я делаю: 

<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 .: Я также пытался добавить iframe с идентификатором видео на YouTube и отобразить его в палитре, но это тоже не удалось.

Есть мысли?

Ответы [ 2 ]

10 голосов
/ 23 ноября 2011

Попробуйте это ... 

$(".detailColorBox").colorbox({rel:'group1'});
$("#youtubeVideo").colorbox({rel:'group1',iframe:true, innerWidth:425, innerHeight:344});
0 голосов
/ 22 апреля 2015

Шахта работает с атрибутом open:true: 

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