Skip to content

Instantly share code, notes, and snippets.

@ripsware

ripsware/test-lightbox.html

Created November 10, 2016 17:33
Show Gist options
  • Save ripsware/3e01857b37ffbf1b6814373f38ccf522 to your computer and use it in GitHub Desktop.
Save ripsware/3e01857b37ffbf1b6814373f38ccf522 to your computer and use it in GitHub Desktop.
Download ZIP
contoh lightbox
Raw
test-lightbox.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.0.0/ekko-lightbox.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.0.0/ekko-lightbox.js"></script>
<title>Test Lightbox</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="offset-sm-4 col-sm-3">
<a href="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" id="test-lightbox" data-title="A random title" data-footer="A custom footer text">
<img src="https://pbs.twimg.com/profile_images/625769159339737088/2dwpQAXA.jpg" class="img-fluid">
</a>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$('#test-lightbox').click(function(e){
e.preventDefault();
$(this).ekkoLightbox();
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment