catbadger/diff-gallery.php

## diff-gallery.php
<?php

$memory = array();
function listFolderFiles( $dir='.', $root_dir=null){

    $ffs = scandir($dir);
    $dir = str_replace('./','',$dir);
    $pretty_dir = explode('/',$dir);
    $pretty_dir = $pretty_dir[0];
    $files = array();

    foreach($ffs as $ff){
        if(isset($root_dir)==false ||$root_dir==''|| $dir =='.') {
            $root_dir = str_replace('.'.DIRECTORY_SEPARATOR,'',$dir.DIRECTORY_SEPARATOR.$ff);
        }

        if ($ff != '.' && $ff != '..' && $ff != '.htaccess' && $ff != 'gal.php') {

            $new_root_dir =explode('/',$dir);
            $new_root_dir = $new_root_dir[0];
            if ( is_dir($dir.DIRECTORY_SEPARATOR.$ff) ) {
                $dir_name = $dir.DIRECTORY_SEPARATOR.$ff;
                $sub_dir_files = listFolderFiles(
                    $dir.DIRECTORY_SEPARATOR.$ff,
                    $root_dir,
                    $files);
                foreach($sub_dir_files as $r => $file_path){
                    $files[$r] = array_merge( isset($files[$r])? $files[$r]:array(), $file_path);
                }
            } else {
                $fn = $dir.DIRECTORY_SEPARATOR.$ff.'';
                $files[$new_root_dir][] = $fn;
            }
        }

    }

    return $files;
}
$memory = listFolderFiles();
/** /
echo "<pre>";
var_dump($memory);
die();
/**/
?>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>

            var dirA = null;
            var dirB = null;
            var diff = null;
            var list = <?php echo json_encode($memory); ?>;


            $(document).ready(function(){

                $('.image_row_title').click(function(e){
                    $(this).addClass('clicked');

                    var g = $(this).attr('group');
                    if(dirA == null){
                        dirA =g;
                        //console.debug(list[dirA]);
                        $('#instructions').html('Click Version B.');
                    } else if(dirB == null) {
                        dirB = g;
                        if(dirA==dirB){
                            var table = buildTable();
                            $('#image_align_table').remove();
                            $('#images_holder').append(table);
                            $('#dir_container').hide();
                           // $('#images_holder table tr.no_diff').hide();
                        }else{
                            //console.debug(list[dirB]);
                            $('#instructions').html('Click the diff.');
                        }
                    } else {
                        diff = g;
                        //console.debug(list[diff]);
                        var table = buildTable();
                        $('#image_align_table').remove();
                        $('#images_holder').append(table);
                        $('#dir_container').hide();
                        $('#images_holder table tr.no_diff').hide();
                        //$('#instructions').html('Compare the versions visually.');
                    }
                });


                $(document).on('click', '.thumb', function(e){
                    e.preventDefault();
                    window.open($(this).attr('src'), '', '');
                    //scroll to center it.
                });
            });

            function buildTable(){
                var table = $("<table>", {id: "image_align_table"});

                var d1 = list[dirA];
                var d2 = list[dirB];
                var d3 = list[diff];
                if(dirA != dirB){
                    $('#instructions').html(d3.length + " differences");
                } else{
                    $('#instructions').html(d1.length+" images");
                }

                for(var i in d1){
                    var tbody =  $("<tbody>", {id: 'row_'+just_filename, class:'no-diff'});
                    var path = d1[i];
                    var just_filename = path.split('/');
                    just_filename = just_filename[just_filename.length-1].toLowerCase();
                    var tr =  $("<tr>", {id: 'row_'+just_filename});
                    var th = $("<th>", {class: 'title', src: path, colspan:3, style:'text-align:left;'});
                    th.html(just_filename);
                    tr.append(th);
                    tr.appendTo(tbody);

                    tr =  $("<tr>", {id: 'row_'+just_filename+'_title', style:""});
                    img_1 = $("<img>", {class: 'thumb', src: path});
                    td_1 = $("<td>", {class: 'dirA', src: path});

                    td_1.append(img_1);
                    tr.append(td_1)

                    if(dirA==dirB){
                        return;
                    }

                    var d2_path = d2[i];

                    var d2_filename_pieces = d2_path.split('/');
                    var d2_just_filename = '';
                    for(var n=1; n < d2_filename_pieces.length;n++){
                        d2_just_filename += d2_filename_pieces[n];
                        if(n < d2_filename_pieces.length-1){
                            d2_just_filename +='/';
                        }
                    }
                    var d2_img = $("<img>", {class: 'thumb', src: d2_path});
                    var d2_td = $("<td>", {class: 'dirB', src: d2_path});

                    d2_td.append(d2_img);
                    tr.append(d2_td);

                    for(var i in d3){
                        var d3_path = d3[i];
                        var d3_filename_pieces = d3_path.split('/');
                        var d3_just_filename = '';
                        for(var n=1; n < d3_filename_pieces.length; n++){
                            d3_just_filename += d3_filename_pieces[n];
                            if(n<d3_filename_pieces.length-1){
                                d3_just_filename +='/';
                            }
                        }

                        var d3_img = '';
                        var d3_td = $("<td>");

                        if (d3_just_filename == d2_just_filename){
                            d3_img = $("<img>", {class: 'thumb', src: d3_path});
                            d3_td = $("<td>", {class: 'diff', src: d3_path});
                            d3_td.append(d3_img);
                            tr.append(d3_td);
                            tbody.removeClass('no-diff');
                        }
                    }
                    tr.appendTo(tbody);

                    tr =  $("<tr>", {id: 'row_'+just_filename+'_hr', style:""});
                    var hr = $("<th>", {class: 'hr', src: path, colspan:3});
                    hr.html("<hr>");
                    tr.append(hr);
                    tr.appendTo(tbody);
                    table.append(tbody);
                }


                return table

            }
        </script>
        <style>
            div, img {
                max-width:100%;
            }
            img {
                cursor:pointer;
            border:1px solid #fff;
            }
            .thumb {
                width:100%;
            }
            .image_row_title{
                cursor:pointer;
                color:blue;
            }
            .clicked{
                color:purple;
            }
            .no-diff{
                display:none;
            }
            img:hover{
            border:1px solid red;
            }
        </style>
    </head>
    <body>
        <h1>Image Diff Comparator</h1>
        <p id='instructions'>Click version A.</p>
        <div id="dir_container">
        <?php foreach ( $memory as $group=>$path_arr ): ?>
                <div class='image_row_title' group='<?php echo $group; ?>'><?php echo $group; ?></div>
        <?php endforeach;?>
        </div>
        <div id='images_holder'>

        </div>
    </body>
</html>
	<?php

	$memory = array();
	function listFolderFiles( $dir='.', $root_dir=null){

	$ffs = scandir($dir);
	$dir = str_replace('./','',$dir);
	$pretty_dir = explode('/',$dir);
	$pretty_dir = $pretty_dir[0];
	$files = array();

	foreach($ffs as $ff){
	if(isset($root_dir)==false \|\|$root_dir==''\|\| $dir =='.') {
	$root_dir = str_replace('.'.DIRECTORY_SEPARATOR,'',$dir.DIRECTORY_SEPARATOR.$ff);
	}

	if ($ff != '.' && $ff != '..' && $ff != '.htaccess' && $ff != 'gal.php') {

	$new_root_dir =explode('/',$dir);
	$new_root_dir = $new_root_dir[0];
	if ( is_dir($dir.DIRECTORY_SEPARATOR.$ff) ) {
	$dir_name = $dir.DIRECTORY_SEPARATOR.$ff;
	$sub_dir_files = listFolderFiles(
	$dir.DIRECTORY_SEPARATOR.$ff,
	$root_dir,
	$files);
	foreach($sub_dir_files as $r => $file_path){
	$files[$r] = array_merge( isset($files[$r])? $files[$r]:array(), $file_path);
	}
	} else {
	$fn = $dir.DIRECTORY_SEPARATOR.$ff.'';
	$files[$new_root_dir][] = $fn;
	}
	}

	}

	return $files;
	}
	$memory = listFolderFiles();
	/** /
	echo "<pre>";
	var_dump($memory);
	die();
	/**/
	?>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script>

	var dirA = null;
	var dirB = null;
	var diff = null;
	var list = <?php echo json_encode($memory); ?>;



	$(document).ready(function(){

	$('.image_row_title').click(function(e){
	$(this).addClass('clicked');

	var g = $(this).attr('group');
	if(dirA == null){
	dirA =g;
	//console.debug(list[dirA]);
	$('#instructions').html('Click Version B.');
	} else if(dirB == null) {
	dirB = g;
	if(dirA==dirB){
	var table = buildTable();
	$('#image_align_table').remove();
	$('#images_holder').append(table);
	$('#dir_container').hide();
	// $('#images_holder table tr.no_diff').hide();
	}else{
	//console.debug(list[dirB]);
	$('#instructions').html('Click the diff.');
	}
	} else {
	diff = g;
	//console.debug(list[diff]);
	var table = buildTable();
	$('#image_align_table').remove();
	$('#images_holder').append(table);
	$('#dir_container').hide();
	$('#images_holder table tr.no_diff').hide();
	//$('#instructions').html('Compare the versions visually.');
	}
	});


	$(document).on('click', '.thumb', function(e){
	e.preventDefault();
	window.open($(this).attr('src'), '', '');
	//scroll to center it.
	});
	});

	function buildTable(){
	var table = $("<table>", {id: "image_align_table"});

	var d1 = list[dirA];
	var d2 = list[dirB];
	var d3 = list[diff];
	if(dirA != dirB){
	$('#instructions').html(d3.length + " differences");
	} else{
	$('#instructions').html(d1.length+" images");
	}

	for(var i in d1){
	var tbody = $("<tbody>", {id: 'row_'+just_filename, class:'no-diff'});
	var path = d1[i];
	var just_filename = path.split('/');
	just_filename = just_filename[just_filename.length-1].toLowerCase();
	var tr = $("<tr>", {id: 'row_'+just_filename});
	var th = $("<th>", {class: 'title', src: path, colspan:3, style:'text-align:left;'});
	th.html(just_filename);
	tr.append(th);
	tr.appendTo(tbody);

	tr = $("<tr>", {id: 'row_'+just_filename+'_title', style:""});
	img_1 = $("<img>", {class: 'thumb', src: path});
	td_1 = $("<td>", {class: 'dirA', src: path});

	td_1.append(img_1);
	tr.append(td_1)

	if(dirA==dirB){
	return;
	}

	var d2_path = d2[i];

	var d2_filename_pieces = d2_path.split('/');
	var d2_just_filename = '';
	for(var n=1; n < d2_filename_pieces.length;n++){
	d2_just_filename += d2_filename_pieces[n];
	if(n < d2_filename_pieces.length-1){
	d2_just_filename +='/';
	}
	}
	var d2_img = $("<img>", {class: 'thumb', src: d2_path});
	var d2_td = $("<td>", {class: 'dirB', src: d2_path});

	d2_td.append(d2_img);
	tr.append(d2_td);

	for(var i in d3){
	var d3_path = d3[i];
	var d3_filename_pieces = d3_path.split('/');
	var d3_just_filename = '';
	for(var n=1; n < d3_filename_pieces.length; n++){
	d3_just_filename += d3_filename_pieces[n];
	if(n<d3_filename_pieces.length-1){
	d3_just_filename +='/';
	}
	}

	var d3_img = '';
	var d3_td = $("<td>");

	if (d3_just_filename == d2_just_filename){
	d3_img = $("<img>", {class: 'thumb', src: d3_path});
	d3_td = $("<td>", {class: 'diff', src: d3_path});
	d3_td.append(d3_img);
	tr.append(d3_td);
	tbody.removeClass('no-diff');
	}
	}
	tr.appendTo(tbody);

	tr = $("<tr>", {id: 'row_'+just_filename+'_hr', style:""});
	var hr = $("<th>", {class: 'hr', src: path, colspan:3});
	hr.html("<hr>");
	tr.append(hr);
	tr.appendTo(tbody);
	table.append(tbody);
	}


	return table

	}
	</script>
	<style>
	div, img {
	max-width:100%;
	}
	img {
	cursor:pointer;
	border:1px solid #fff;
	}
	.thumb {
	width:100%;
	}
	.image_row_title{
	cursor:pointer;
	color:blue;
	}
	.clicked{
	color:purple;
	}
	.no-diff{
	display:none;
	}
	img:hover{
	border:1px solid red;
	}
	</style>
	</head>
	<body>
	<h1>Image Diff Comparator</h1>
	<p id='instructions'>Click version A.</p>
	<div id="dir_container">
	<?php foreach ( $memory as $group=>$path_arr ): ?>
	<div class='image_row_title' group='<?php echo $group; ?>'><?php echo $group; ?></div>
	<?php endforeach;?>
	</div>
	<div id='images_holder'>

	</div>
	</body>
	</html>