catbadger/single-file-image-gallery

## single-file-image-gallery
<?php

$memory = array();

function listFolderFiles($dir){
    $ffs = scandir($dir);
    $files = array();
    foreach($ffs as $ff){
        if($ff != '.' && $ff != '..'){
            if( is_dir($dir.DIRECTORY_SEPARATOR.$ff) ) {
                $files = array_merge($files, listFolderFiles($dir.DIRECTORY_SEPARATOR.$ff));
            } else {
                //echo $dir.DIRECTORY_SEPARATOR.$ff."";
                $files[] = $dir.DIRECTORY_SEPARATOR.$ff.'';
            }
        }
    };
    return $files;
}
$memory = listFolderFiles('./');

$url = './'.($_GET['v'])?$_GET['v']:'';
$memory = listFolderFiles(url);


?>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $n = 0;
            $(document).ready(function(){
                var list = <?php echo json_encode($memory); ?>;
                var handle = null;
                var go = true;
                //$('#container').prepend(list);
                next();

                function next(i){
                    if ( i == undefined ) {
                        i =0;
                    }

                    display(i);

                    handle = window.setTimeout(function(){
                        console.debug('loop: '+i);
                        i++;
                        $n = i;
                        if ( i >= list.length ){
                            i = $n = 0;
                        }
                        next(i);
                    },1500);
                }

                function display(i){
                    var path = list[i];
                    var a = "<a href='"+ path +"'>"+i+': '+ path +"</a>";

                    $('#container img').attr('src', path);
                    $('#meta').html(a);
                }

                $('img#display_image').click(function(e){
                    e.preventDefault();
                    if ( go ) {
                        console.debug('stopped.');
                        go = false
                        window.clearTimeout(handle);
                    } else {
                        if ( e.shiftKey ) {
                            if ( $n < list.length-1 ) {
                                $n++;
                            }
                            console.debug('next.');
                        } else if( e.ctrlKey ) {
                            next($n);
                            console.debug('restart carousel.');
                        } else {
                            if ($n > 0 ) {
                                $n--;
                            }
                            console.debug('prev.');
                        }
                        display($n);
                    }
                });
            });
        </script>
        <style>
            /**
            inline styles
            **/
            div, img {
                max-width:100%;
            }
            img {
                cursor:pointer
            }
        </style>
    </head>
    <body>
    <div id='instructions'>Click image to stop carousel, click again to go back, shift-click image to go to next image ctrl+click restarts the carousel.</div>
    <div id='container'>
        <img src='#' id='display_image'>
        <div id='meta'></div>
    </div>
    </body>
</html>
	<?php

	$memory = array();

	function listFolderFiles($dir){
	$ffs = scandir($dir);
	$files = array();
	foreach($ffs as $ff){
	if($ff != '.' && $ff != '..'){
	if( is_dir($dir.DIRECTORY_SEPARATOR.$ff) ) {
	$files = array_merge($files, listFolderFiles($dir.DIRECTORY_SEPARATOR.$ff));
	} else {
	//echo $dir.DIRECTORY_SEPARATOR.$ff."";
	$files[] = $dir.DIRECTORY_SEPARATOR.$ff.'';
	}
	}
	};
	return $files;
	}
	$memory = listFolderFiles('./');

	$url = './'.($_GET['v'])?$_GET['v']:'';
	$memory = listFolderFiles(url);


	?>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script>
	$n = 0;
	$(document).ready(function(){
	var list = <?php echo json_encode($memory); ?>;
	var handle = null;
	var go = true;
	//$('#container').prepend(list);
	next();

	function next(i){
	if ( i == undefined ) {
	i =0;
	}

	display(i);

	handle = window.setTimeout(function(){
	console.debug('loop: '+i);
	i++;
	$n = i;
	if ( i >= list.length ){
	i = $n = 0;
	}
	next(i);
	},1500);
	}

	function display(i){
	var path = list[i];
	var a = "<a href='"+ path +"'>"+i+': '+ path +"</a>";

	$('#container img').attr('src', path);
	$('#meta').html(a);
	}

	$('img#display_image').click(function(e){
	e.preventDefault();
	if ( go ) {
	console.debug('stopped.');
	go = false
	window.clearTimeout(handle);
	} else {
	if ( e.shiftKey ) {
	if ( $n < list.length-1 ) {
	$n++;
	}
	console.debug('next.');
	} else if( e.ctrlKey ) {
	next($n);
	console.debug('restart carousel.');
	} else {
	if ($n > 0 ) {
	$n--;
	}
	console.debug('prev.');
	}
	display($n);
	}
	});
	});
	</script>
	<style>
	/**
	inline styles
	**/
	div, img {
	max-width:100%;
	}
	img {
	cursor:pointer
	}
	</style>
	</head>
	<body>
	<div id='instructions'>Click image to stop carousel, click again to go back, shift-click image to go to next image ctrl+click restarts the carousel.</div>
	<div id='container'>
	<img src='#' id='display_image'>
	<div id='meta'></div>
	</div>
	</body>
	</html>