obrazki/obrazki.js

var imglist = null;
var dirname = null;
var filename = null;
var currId = 0;
const urlPrefix = '/obrazki/';

function setLinks(e) {
	var doPush = false;

	/* browser navigation handling */
	if (e === undefined || e.type != 'popstate') {
		doPush = true;
	} else {
		currId = e.state;
	}

	/* replace the content */
	filename = imglist[currId].name;
	if (currId > 0) {
		$('#poprz').attr('href', urlPrefix + 'image.php?dir=' + dirname + '&file=' + imglist[currId-1].name);
		$('#poprz').show();
	} else {
		$('#poprz').hide();
	}
	if (currId < imglist.length - 1) {
		var url = urlPrefix + 'image.php?dir=' + dirname + '&file=' + imglist[currId+1].name;
		$('#nast').attr('href', url);
		$('#imagelink').attr('href', url);
		$('#nast').show();
	} else {
		$('#nast').hide();
		$('#imagelink').removeAttr('href');
	}
    var image = $("#image");
 //   image.fadeTo('fast', 0.2, function () {
 	image.css('opacity', '0.2');
        image.attr('src', urlPrefix + dirname + '/' + filename);
		image.on('load', function() {
//		    image.fadeTo('fast', 1);
			image.css('opacity', '1');
		});
        if (doPush)
		window.history.pushState(currId, '', urlPrefix + 'image.php?dir=' + dirname + '&file=' + filename);
//    });
}

function nextImage(e) {
	if (e)
		e.preventDefault();
	if (currId >= imglist.length - 1)
		return;
	currId++;
	setLinks();
}

function prevImage(e) {
	if (e)
		e.preventDefault();
	if (currId == 0)
		return;
	currId--;
	setLinks();
}

function imglistReceived(data) {
	imglist = data;
	/* find current id by url */
	var found = false;
	for (var i=0; i<data.length; i++) {
		file = data[i];
		if(file.name == filename) {
			currId = file.id;
			found = true;
			break;
		}
	}
	if (!found) /* don't know where i am */
		return;
	$('#poprz').click(prevImage);
	$('#imagelink').click(nextImage);
	$('#nast').click(nextImage);
	window.onpopstate = setLinks;
	window.history.replaceState(currId, '', urlPrefix + 'image.php?dir=' + dirname + '&file=' + filename);
}

function getImgList() {
	var queryString = window.location.search;
	if (URLSearchParams === undefined)
		return; /* browser not supported */
	var urlParams = new URLSearchParams(queryString);
	dirname = urlParams.get('dir');
	filename = urlParams.get('file');
	if (dirname === null || filename === null) /* invalid params */
		return;
	var args = 'dir=' + dirname;
	$.ajax({
		dataType: 'json',
		url: urlPrefix+'dirlist.php?'+args,
		success: imglistReceived
	});
}

$(document).keydown(function(e) {
	switch (e.which) {
		case 37:
			prevImage();
			return false;
		case 39:
			nextImage();
			return false;
	}
});

$(document).ready(function() {
	getImgList();
	$('body').on('swipeleft', nextImage);
	$('body').on('swiperight', prevImage);
});