Загрузка iframe при клике

[Absolute]

У меня похожая задача, на странице 4 картинки, по клику должен открывать фрейм, кликнув по другой картинке в том же месте (закрыв 1) открываться 2 и так далее. подскажите?

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

  <img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png" class="my_frames" data-framesrc="http://nic.ru"><br>
  <img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png" class="my_frames" data-framesrc="http://r01.ru"><br>
  <img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png" class="my_frames" data-framesrc="http://webnames.ru">

<script>
$(document).ready(function(){
  $('.my_frames').on('click', function(){
    var src = $(this).data('framesrc');
    $('.frame_control').remove();
    $('<iframe />', { class : 'frame_control', src: src }).appendTo(document.body)
  });
});
</script>

 

[Ardis]

Спасибо, супер! То что надо, атрибуты фрейма где выставить?

сделал так:
<style>
iframe {width:100%; height:500px;}
</style>

только вот когда вставлю код куда надо на страничку, фрейм добавляется в самый конец, а не под эти картинки

 

[Absolute]

сделал так:
<style>
iframe {width:100%; height:500px;}
</style>

только вот когда вставлю код куда надо на страничку, фрейм добавляется в самый конец, а не под эти картинки

Для просмотра ссылки Войди или Зарегистрируйсяможно выбрать метод добавления фрейма, который вам подойдет.
.appendTo(document.body) - это просто как демонстрация, добавляет фрейм в конец страницы (body)
Нужно после картинок, - ОК!

$(document).ready(function(){
  $('.my_frames').on('click', function(){
    var src = $(this).data('framesrc');
    $('.frame_control').remove();
    $('<iframe />', { class : 'frame_control', src: src }).insertAfter('.my_frames:last');
  });
});

То что надо, атрибуты фрейма где выставить?

Атрибуты, как можно увидеть взглянув на код, перечисляются в фигурных скобках. В данном случае фреймы будут иметь класс frame_control.

<style>
.frame_control {width:100%;  height:500px;}
</style>

 

[Ardis]

С версткой у меня беда =(
Последний див после нажатия на картинку, съезжает вниз.
Получается вообще не так как надо, скрин.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

по всей видимости я мучаюсь только потому что нет кода который вставлял бы появляющийся фрейм в определенное место (блок)

    <div style="display:inline-block;">
      <img src="img/1.jpg" class="my_frames" data-framesrc="1.html"><br>
      Цветы
    </div>
    <div style="display:inline-block;">
      <img src="img/2.jpg" class="my_frames" data-framesrc="2.html"><br>
      Животные
    </div>
    <div style="display:inline-block;">
      <img src="img/3.jpg" class="my_frames" data-framesrc="3.html"><br>
      Пейзажи
    </div>
    <div style="display:inline-block;">
      <img src="img/4.jpg" class="my_frames" data-framesrc="1.html"><br>
      Натюрморты
    </div>
<div style=»clear: both;»></div>
    <div style="display:inline-block;">
      <img src="img/5.jpg" class="my_frames" data-framesrc="2.html"><br>
      Абстракция
    </div>
    <div style="display:inline-block;">
      <img src="img/6.jpg" class="my_frames" data-framesrc="3.html"><br>
      Корабли
    </div>
    <div style="display:inline-block;">
      <img src="img/7.jpg" class="my_frames" data-framesrc="1.html"><br>
      Винтажные
    </div>
    <div style="display:inline-block;">
      <img src="img/8.jpg" class="my_frames" data-framesrc="2.html"><br>
      Города
    </div>

<br>

<style>
.my_frames {width:125px;  height:125px;}
.frame_control {width:1000px;  height:100%; border: 0px;}
</style>

<script>
$(document).ready(function(){
  $('.my_frames').on('click', function(){
    var src = $(this).data('framesrc');
    $('.frame_control').remove();
    $('<iframe />', { class : 'frame_control', src: src }).insertAfter('.my_frames:last');
  });
});
</script>

почитал 1 страницу темы и дошло как вставить

<div class="my_frames"></div>