Форум

drcrash · #1 (**permalink**) 21.12.2015, 22:11

Всем привет!
Помогите пожалуйста допилить код:

<head>
	<style>
body {
  background: gray;
  font-family: sans-serif;
}
.wrapper {
  background: white;
  margin: auto;
  padding: 1em;
  width: 50%;
}
h1 {
  text-align: center;
}
ul.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.tabs li {
  border: gray solid 1px;
  border-bottom: none;
  float: left;
  margin: 0 .25em 0 0;
  padding: .25em .5em;
}
ul.tabs li a {
  color: gray;
  font-weight: bold;
  text-decoration: none;
}
ul.tabs li.active {
  background: gray;
}
ul.tabs li.active a {
  color: white;
}
.clr {
  clear: both;
}
  </style>
</head>
<body>
<section class="wrapper">
  <h1>Simple Video Gallery with jQuery (beta)</h1>
  <div class="clr"></div>
    <section class="block">
      <iframe width="560" height="315" src="http://www.youtube.com/embed/UMsr7qaz08o" frameborder="0" allowfullscreen></iframe>
  </section>
  <ul class="tabs">
    <li><a href="http://www.youtube.com/v/UMsr7qaz08o" id="tab1"><img src="http://i3.ytimg.com/vi/UMsr7qaz08o/default.jpg" /></a></li>
    <li><a href="http://www.youtube.com/v/7myVThB3BMo" id="tab2"><img src="http://i3.ytimg.com/vi/7myVThB3BMo/default.jpg" /></a></li>
      <li><a href="http://www.youtube.com/v/F2k_oySjtN8" id="tab3"><img src="http://i3.ytimg.com/vi/F2k_oySjtN8/default.jpg" /></a></li>
  </ul>
  <div class="clr"></div>
</section>
<script type="text/javascript">
$(function (){
  $('#tab1').on(click,function(){
    $('.block').innerHTML='<iframe width="560" height="315" src="http://www.youtube.com/embed/UMsr7qaz08o" frameborder="0" allowfullscreen></iframe>';
  });
})
</script>
</body>

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

рони · #2 (**permalink**) 21.12.2015, 22:27

drcrash,
много ошибок в скрипте поэтому скрипт не работет, а работет переход по ссылке.

drcrash · #3 (**permalink**) 21.12.2015, 22:44

Сообщение от рони

drcrash,
много ошибок в скрипте поэтому скрипт не работет, а работет переход по ссылке.

Этот скрипт скорее макет того, что хочется сделать. А я только html да css немного освоил. Еще с php на уровне подправить. Js вообще пока темный лес

Как бы сделать, чтоб идея заработала?

Искал подобное - чтоб именно в теле документа открывалось, а что проигрывалось до этого - закрывалось - ничего готового не нашел(

рони · #4 (**permalink**) 21.12.2015, 22:49

drcrash,
исправьте ошибки и получите то что хотели, но можно чуть проще.

drcrash · #5 (**permalink**) 21.12.2015, 22:55

Сообщение от рони

drcrash,
исправьте ошибки и получите то что хотели, но можно чуть проще.

а ошибки в js только?

рони · #6 (**permalink**) 21.12.2015, 22:56

drcrash,
1 нет отмены клика по ссылке
2 нет кавычек у click
3 обьекта jquery нет свойства innerHTML
ваш вариант рабочий, если это всё исправить

рони · #7 (**permalink**) 21.12.2015, 23:03

drcrash,

<!DOCTYPE HTML>

<html>

<head>
	<style>
body {
  background: gray;
  font-family: sans-serif;
}
.wrapper {
  background: white;
  margin: auto;
  padding: 1em;
  width: 50%;
}
h1 {
  text-align: center;
}
ul.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.tabs li {
  border: gray solid 1px;
  border-bottom: none;
  float: left;
  margin: 0 .25em 0 0;
  padding: .25em .5em;
}
ul.tabs li a {
  color: gray;
  font-weight: bold;
  text-decoration: none;
}
ul.tabs li.active {
  background: gray;
}
ul.tabs li.active a {
  color: white;
}
.clr {
  clear: both;
}
  </style>
</head>
<body>
<section class="wrapper">
  <h1>Simple Video Gallery with jQuery (beta)</h1>
  <div class="clr"></div>
    <section class="block">
      <iframe width="560" height="315" src="http://www.youtube.com/embed/UMsr7qaz08o" frameborder="0" allowfullscreen></iframe>
  </section>
  <ul class="tabs">
    <li><a href="http://www.youtube.com/v/UMsr7qaz08o" id="tab1"><img src="http://i3.ytimg.com/vi/UMsr7qaz08o/default.jpg" /></a></li>
    <li><a href="http://www.youtube.com/v/7myVThB3BMo" id="tab2"><img src="http://i3.ytimg.com/vi/7myVThB3BMo/default.jpg" /></a></li>
      <li><a href="http://www.youtube.com/v/F2k_oySjtN8" id="tab3"><img src="http://i3.ytimg.com/vi/F2k_oySjtN8/default.jpg" /></a></li>
  </ul>
  <div class="clr"></div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
  $('.tabs a').on('click',function(event){
    event.preventDefault();
    $('.block iframe')[0].src = this.href;
  });
})
</script>
</body>


</html>

drcrash · #8 (**permalink**) 21.12.2015, 23:06

Спасибо Вам большое! Я сам только отмену клика поправить смог))

рони · #9 (**permalink**) 21.12.2015, 23:35

drcrash,

$('.block').html('<iframe width="560" height="315" src="http://www.youtube.com/embed/UMsr7qaz08o" frameborder="0" allowfullscreen></iframe>');

drcrash · #10 (**permalink**) 22.12.2015, 22:47

а можно ли сделать плавную прокрутку к ифрейму при клике на превьюшку? до <section class="wrapper"> к примеру

Форум

Справочник

Discord чат

Курсы javascript