ekko-lightbox eklenti özniteliklerine sahip bir Bootstrap modelinde youtube videosunu nasıl başarılı bir şekilde oynattığınızı öğrenmeye/anlamaya çalışıyorum. Vimeo bağlantısının çalışmasını sağlamayı başardım, ancak YouTube bağlantısı videoyu almayacak ve düğme görüntüleri (dış bağlantılar) görünmeyecek. İş dosyalarım masaüstüme/yerel olarak kaydedilir. YouTube ve görüntü linklerinin çalışması için dosyamı ISP'ye yüklemem gerekir mi? İnternete güvenmek zorunda kalmadan videoların modalda nasıl oynanacağını da bilmek isterim. Bu şekilde bir web sitesi konseptini sunmak ve internet erişimi olmaması durumunda, hala işlevselliğe sahip olabilirim.Ekko-Lightbox'taki sorun YouTube videolarını/bağlantılı görüntüleri oynatmıyor
Dizinimdeki dosyada göründüğü gibi kod. Sadece Vimeo video bağlantısı ve statik şelale görüntü bağlantıları çalışır. Düğme görüntü bağlantıları da görünmez. Lütfen yardım et!!!
<!DOCTYPE html>
<html>
<head>
<title>Mixed Lightbox Gallery in Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ekko-lightbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3 class="page-header" id="mixed-gallery">Mixed gallery</h3>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div class="row">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
</a>
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
</a>
<a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ekko-lightbox.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
// navigateTo
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return $(this).ekkoLightbox({
onShown: function() {
lb = this;
$(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
});
</script>
</body>
</html>