Видео галерея на 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"> к примеру
|
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;
margin-top: 1000px;
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 ($) {
$.fn.scrollTo = function (speed, easing, callback) {
$('body, html').animate({
scrollTop: this.offset().top
}, speed, easing, callback);
return this;
};
}(jQuery));
$(function (){
$('.tabs a').on('click',function(event){
event.preventDefault();
$('.block iframe').scrollTo(1200)[0].src = this.href;
});
})
</script>
</body>
</html>
|
еще нужно было сделать перемещение к указанному блоку, осилил :)
<!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;
margin-top: 1500px;
padding: 5px;
}
ul.tabs li {
border: gray solid 1px;
float: left;
margin: .25em;
padding: .25em;
}
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">
<div id="help">
<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>
<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>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.scrollTo = function (speed, easing, callback) {
$('html,body').animate({scrollTop: $('#help').offset().top}, 'slow');
return this;
};
}(jQuery));
$(function (){
$('.tabs a').on('click',function(event){
event.preventDefault();
$('.block iframe').scrollTo(1200)[0].src = this.href;
});
})
</script>
</body>
</html>
|
drcrash,
если код рабочий почему бы не добавить запуск? [HTML run]код...[/HTML] |
| Часовой пояс GMT +3, время: 13:12. |