Видео галерея на jQuery
Всем привет!
Помогите пожалуйста допилить код:
<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>
в данном виде при клике на картинку-превью видео открывается на полный экран, а нужно, чтобы оно открывалось внутри страницы как то, что есть в примере (вместо него) |
drcrash,
много ошибок в скрипте поэтому скрипт не работет, а работет переход по ссылке. |
Цитата:
Как бы сделать, чтоб идея заработала? Искал подобное - чтоб именно в теле документа открывалось, а что проигрывалось до этого - закрывалось - ничего готового не нашел( |
drcrash,
исправьте ошибки и получите то что хотели, но можно чуть проще. |
Цитата:
|
drcrash,
1 нет отмены клика по ссылке 2 нет кавычек у click 3 обьекта jquery нет свойства innerHTML ваш вариант рабочий, если это всё исправить |
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,
$('.block').html('<iframe width="560" height="315" src="http://www.youtube.com/embed/UMsr7qaz08o" frameborder="0" allowfullscreen></iframe>');
|
а можно ли сделать плавную прокрутку к ифрейму при клике на превьюшку? до <section class="wrapper"> к примеру
|
| Часовой пояс GMT +3, время: 04:01. |