ashleydw
commented
8 years ago Post a full example - either a link to your site or a jsfiddle
Closed joedavis01 closed 8 years ago
ashleydw
commented
8 years ago Post a full example - either a link to your site or a jsfiddle
joedavis01
commented
8 years ago Sorry for the delay.. Here is the full example I am using just a trimmed down version of the original demo index.html file.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 Lightbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/ekko-lightbox.css" rel="stylesheet">
<style type="text/css">
/* i like padding - you can ignore this css. see the actual css / less files in the repository for styling the gallery navigation */
div.row > div > div.row {
margin-bottom: 15px;
}
body {
padding-bottom: 50px;
}
div.top-header {
margin-bottom:100px;
}
h3.page-header {
margin-top: 50px;
}
figure {
position: relative;
}
figure figcaption {
font-size: 22px;
color: #fff;
text-decoration: none;
bottom: 10px;
right: 20px;
position: absolute;
background-color: #000;
}
code {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h4>Forcing width</h4>
<h3>These Work</h3>
<p>Set the width of the video</p>
<p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox">Ghostpoet - Cash and Carry Me Home (standard)</a></p>
<p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-width="640">Ghostpoet - Cash and Carry Me Home (640 x 360)</a></p>
<p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-width="1280">Ghostpoet - Cash and Carry Me Home (1280 x 780)</a></p>
</div>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<h3 class="page-header" id="youtube-gallery">Example: Gallery of local Videos</h3>
<h3>These do not Work</h3>
<div class="row">
<a href="data/site/videos/bigcatseries.mp4" data-toggle="lightbox" data-width="1280" data-gallery="youtubevideos" class="col-sm-4">
<img src="data/site/images/bigcatseries.png" class="img-responsive" alt="data/site/images/noimage.png"/>
</a>
<a href="data/site/videos/throttle2017.mp4" data-toggle="lightbox" data-width="1280" data-gallery="youtubevideos" class="col-sm-4">
<img src="data/site/videos/throttle2017.png" class="img-responsive" alt="data/site/images/noimage.png"/>
</a>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="../dist/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>You can't link directly to an mp4 video, only youtube and vimeo videos.
You'll need to use the <video /> tag inside an a remote load call. And then you'll run into problems with browser support.
You'll be better off uploading them to youtube.
I have an mp4 instructional gallery that I would like to use this plugin for. I can get the single video link to work but not in the gallery sample. I am using the youtube gallery sample from the download and replacing them with local mp4 links...
any suggestions?