Блог

Я пытаюсь разрешить пользователям нажимать на группу больших пальцев, которая откроет цветовое поле и отобразит соответствующее изображение / видео. Большой палец может ссылаться на изображение или видео, поэтому 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>
  

И внутри тега script:

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

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

P.S: Я также пытался загрузить iframe с идентификатором видео Youtube и отобразить его в цветовом поле, но это также не удалось.

Есть мысли?

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

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

Мой работает с open:true атрибутом:

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