Skip to content

Instantly share code, notes, and snippets.

@dgtlmoon

dgtlmoon/index.php

Last active October 19, 2017 05:44
Show Gist options
  • Save dgtlmoon/b945832352989753e87dec47638f4467 to your computer and use it in GitHub Desktop.
Save dgtlmoon/b945832352989753e87dec47638f4467 to your computer and use it in GitHub Desktop.
Download ZIP
blueimp gallery simple lister
Raw
index.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" href="../css/blueimp-gallery.css">
<link rel="stylesheet" href="../css/blueimp-gallery-indicator.css">
<link rel="stylesheet" href="../css/blueimp-gallery-video.css">
<link rel="stylesheet" href="../css/demo/demo.css">
</head>
<body>
<h2>Image gallery: <?php print filter_var(file_get_contents("../info.txt"), FILTER_SANITIZE_STRING); ?></h2>
<!-- The container for the list of example images -->
<div id="links" class="links">
<?php
foreach (glob("*.JPG") as $filename) {
echo "<a href=\"{$filename}\"> <img src=\"thumbnails/{$filename}\" > </a>\n";
}
?>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<script src="../js/blueimp-helper.js"></script>
<script src="../js/blueimp-gallery.js"></script>
<script src="../js/blueimp-gallery-fullscreen.js"></script>
<script src="../js/blueimp-gallery-indicator.js"></script>
<script src="../js/blueimp-gallery-video.js"></script>
<script src="../js/blueimp-gallery-vimeo.js"></script>
<script src="../js/blueimp-gallery-youtube.js"></script>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/jquery.blueimp-gallery.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment