Skip to content

Instantly share code, notes, and snippets.

@NoUsername
Created March 2, 2014 15:38
Show Gist options
  • Select an option

  • Save NoUsername/9308327 to your computer and use it in GitHub Desktop.

Select an option

Save NoUsername/9308327 to your computer and use it in GitHub Desktop.
Simple image viewer, which loads all images from an html directory listing.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<img id="viewer" src="" width="800px"/>
<div id="info"> </div>
<script>
$(function() {
var baseUrl = "/images/";
var pictureIndex = 0;
var pictures = [];
function getFiles() {
$.ajax(baseUrl).success(function(data) {
pictures = [];
$(data).find("a[href]").each(function() {
var href = $(this).attr('href');
if (href.indexOf('.jpg') > 0 || href.indexOf('.png') > 0 || href.indexOf('.jpeg') > 0) {
pictures.push(href);
}
});
console.log(pictures.length + " pictures loaded!");
changePicture(0);
});
}
function changePicture(indexOffset) {
pictureIndex += indexOffset;
if (pictureIndex >= pictures.length) {
pictureIndex = 0;
} else if (pictureIndex < 0) {
pictureIndex = pictures.length - 1;
}
$('#viewer').attr('src', baseUrl + pictures[pictureIndex]);
$('#info').text((pictureIndex + 1) + "/" + pictures.length);
}
getFiles();
$(document).keydown(function(e){
var left = -1, right = 1;
if (e.keyCode == 37) {
changePicture(left); return false;
} else if (e.keyCode == 39) {
changePicture(right); return false;
}
});
});
</script>
</body>
</html>
@radioman-00
Copy link

radioman-00 commented Jul 19, 2020

for me I get the every image twice so I have made a fork to the code to fix that.

Copy link

ghost commented May 12, 2021

for me I get the every image twice so I have made a fork to the code to fix that.

can i get the fork link?

Copy link

ghost commented May 12, 2021

found it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment