Загрузите iframe в Colorbox при щелчке по изображению

У меня есть два плагина: Tiles Gallery и Colorbox - очень простая настройка галереи, щелкните по миниатюре -> загрузите полный размер в Colorbox. Тем не менее, я хотел бы иметь возможность щелкнуть изображение галереи и загрузить веб-страницу в iframe во всплывающем окне Colorbox.Загрузите iframe в Colorbox при щелчке по изображению

Вот как регулярная галерея элементы/изображения загружаются (отлично работает):

<article class="tile category"> 
    <a href="path/to/image.jpg"> 
    <img class="item" src="path/to/thumbnail.jpg" /> 
    <div class="caption"></div> 
    </a> 
</article>

А вот как я безуспешно пытаюсь загрузить IFRAME:

<article class="tile iframe" data-type="html"> 
    <a class="tile iframe" href="http://google.com"> 
    <img class="item" src="path/to/thumbnail.jpg" /> 
    </a> 
</article>

Вот является JQuery:

<script> 
    //instantiate Final Tiles Gallery 
    $("#gallery-name").finalTilesGallery({ 
     minTileWidth: 120, 
     margin: 1, 
    }); 
    // colorbox image size setup 
    $(".tile a").colorbox({rel:'group1', maxWidth:'95%', maxHeight:'95%' 
    }); 
    // colorbox iframe setup 
    $(".tile iframe").colorbox({iframe:true, innerWidth:600, innerHeight:700}); 

</script>

Каждый должен иметь класс «плитке что-то ", чтобы плагин Gallery Tiles работал. Согласно галерея документации Tiles, видео YouTube загружаются с помощью IFRAME следующим образом:

<article id="video" class="tile ftg-set-2" data-type="video"> 
<iframe class="item" width="540" height="300" src="http://www.youtube.com/embed/M4yCwlDxPtY" frameborder="0" allowfullscreen></iframe> 
</article>

однако я не хочу, чтобы IFrame, который будет отображаться в самой галерее, я хочу уменьшенное изображение, чтобы привести к нему и только для отображения в Colorbox.

Дайте мне знать, если вам нужна дополнительная информация. Любая помощь будет оценена!

источник

2013-06-02 L Petkov

Что вы пытаетесь выбрать с помощью $ ("плитка IFRAME.")? В jQuery это захватит элементы с tagName «iframe», которые спускаются из элемента с классом «tile», который не относится к каким-либо элементам вашей разметки. Смотрите эту скрипту для демонстрации селектора: http://jsfiddle.net/R2vHD/ –

@AaronK за ваш комментарий. Я должен был объяснить дальше. $ (". tile iframe") используется для захвата моего

с классом «tile iframe», моя другая «плитка»

s вызывается с разными именами. класс «плитка» является требованием плагина Tiles. –

Хорошо, чтобы захватить статью, попробуйте использовать $ (". Tile.iframe"), $ (". Tile iframe") не будет работать для статьи –

мне удалось решить эту проблему так:

 <article class="tile category"> 
      <a class="className" href="http://iframe-address.com"> 
       <img class="item" src="path/to/thumbnail.jpg" /> 
       <div class="caption"></div> 
      </a> 
    </article>

JQuery:

$(".className").colorbox({iframe:true, innerWidth:'99%', innerHeight:'99%'});

источник

2013-06-12 22:08:24

Загрузите iframe в Colorbox при щелчке по изображению

ответ

Смежные вопросы