0

Есть картинки которые сортируются с помощью isotop. Мне нужно по клику открывать модальное окно с видео. Подходящий плагин я подобрал. Теперь моя проблема в том, чтобы видео не только открывалось но и гасилось при закрытии модального окна.

  <div id="popup_name" class="popup_block">
    <div id="for_frame" class="for_frame">    </div>
</div>

В блок с id="for_frame" с помощью javascript я вставляю следующую конструкцию в зависимости от количества изображений:

function showFun2() {
    var SummDok = document.getElementById('for_frame2'),
        SummSumm='<a  onclick="closeFun2()" title="Close" class="close" id="close2" style="color: black">X</a> <iframe src="https://www.youtube.com/embed/buEh7kKYBuA?autoplay=1" allowfullscreen="" frameborder="1" height="500" width="100%"></iframe>';
    SummDok.innerHTML = SummSumm
}
function closeFun2(){
    var SummDok = document.getElementById('for_frame2'),
        SummSumm='';
    SummDok.innerHTML = SummSumm
}
function showFun3() {
    var SummDok = document.getElementById('for_frame3'),
        SummSumm=' <a href="#close" onclick="closeFun3()" title="Close" class="close" id="close3" style="color: black">X</a> <iframe src="https://www.youtube.com/embed/buEh7kKYBuA?autoplay=1" allowfullscreen="" frameborder="1" height="500" width="100%"></iframe>';
    SummDok.innerHTML = SummSumm
}
function closeFun3(){
    var SummDok = document.getElementById('for_frame3'),
        SummSumm='';
    SummDok.innerHTML = SummSumm

Но я понимаю, что это не есть хорошо. Подскажите пожалуйста, как мне принимать по onclick значения разных id, если они отличаются лишь цифрой?(for_frame#,где # - нужная цифра) И каким образом объединить запросы от всех этих блоков к функции closeFun# ?

0

1 ответ 1

1

Подскажите пожалуйста, как мне принимать по онклику значения разных id, если они отличаются лишь цифрой?(for_frame#,где # - нужная цифра) И каким образом объединить запросы от всех этих блоков к функции closeFun#

$(".test_img").on("click", function() {

  var id = $(this).attr("rel");
  $(id).html('<a href="#close" title="Close" class="close_img" rel=' + id + ' style="color: black">X</a> <iframe id="iframe' + id + '" src="https://www.youtube.com/embed/buEh7kKYBuA?autoplay=1&enablejsapi=1 allowfullscreen="" frameborder="1" height="500" width="100%"></iframe>');
});

$(document).on("click", ".close_img", function() {
  var id = $(this).attr("rel");
  $(id).html('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup_name1" class="popup_block">
  <div id="for_frame1" class="for_frame"></div>
</div>

<div id="popup_name2" class="popup_block">
  <div id="for_frame2" class="for_frame"></div>
</div>

<div id="popup_name3" class="popup_block">
  <div id="for_frame3" class="for_frame"></div>
</div>

<img src="https://www.google.ru/logos/doodles/2015/george-booles-200th-birthday-5636122663190528.2-hp.gif" class="test_img" rel="#for_frame1">
<img src="https://www.google.ru/logos/doodles/2015/george-booles-200th-birthday-5636122663190528.2-hp.gif" class="test_img" rel="#for_frame2">
<img src="https://www.google.ru/logos/doodles/2015/george-booles-200th-birthday-5636122663190528.2-hp.gif" class="test_img" rel="#for_frame3">

JsFiddle

1
  • Спасибо большое, думаю я дальше справлюсь)
    – DaVinchi
    2 ноя 2015 в 13:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.