EasySlideshow

<?php
/*
    Instructions:
        Place script in the same directory as the images.
        Navigate, in a browser, to this script.

*/
$imgFiles = Array();
$dh = opendir('.');
while($file = readdir($dh)){
    $ext = strtolower(pathinfo($file,PATHINFO_EXTENSION));
    $imgExts = Array('jpg','gif','png');
    if(in_array($ext,$imgExts)){
        $imgFiles[] = $file;
    }
}

?>
<html>
    <head>
        <title>Easy Slideshow</title>
        <script type="text/javascript" language="Javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" language="Javascript">

        // Following speeds are in milliseconds ( 1 second = 1000 miliseconds);
        var aniSpeed = 500;

        // No Need to change the following variables
        var winW = 0;
        var winH = 0;
        var numOfImages = 0;
        var origWH = new Array();
        var index = 1;
        var curImg;
        var tInterval;
        var navButtonPadding;

        function screenDimensions(){
            winW = $(window).width();
            winH = $(window).height();
        }
        function imgSizer(){
            // Image Scalling To Window
            var img = $('#easySlideshow_G12 img:nth-child(' + index + ')');
            var origW = origWH[index-1][0];
            var origH = origWH[index-1][1];
            if(origW > winW || origH > winH){
                var hR = origW / winW;
                var vR = origH / winH;
                var ratio = ((hR > vR)? hR : vR);
                $(img).width(Math.round(origW / ratio));
                $(img).height(Math.round(origH / ratio));
            }else{
                $(img).width(origW);
                $(img).height(origH);
            }
            // Center the image in the window
            $(img).css({left: ((winW - $(img).width())/2), top: ((winH - $(img).height())/2)});
            // Align the Navigation Buttons
            var posLeft,posRight;
            if(($(img).width() + $('#navLeft').width() + $('#navRight').width()) < winW){
                var leftNewLeft = (parseInt($(img).css('left')) - $('#navLeft').width() - navButtonPadding);
                var rightNewLeft = (parseInt($(img).css('left')) + $(img).width());
            }else{
                var leftNewLeft = 0;
                var rightNewLeft = winW - ($('#navRight').width() + navButtonPadding);
            }
            var middle = (winH/2) - ($('#navRight').height() / 2);
            $('#navLeft').css({top: middle}).animate({left: leftNewLeft}, (aniSpeed/2));
            $('#navRight').css({top: middle}).animate({left: rightNewLeft}, (aniSpeed/2));
        }
        function slideshow(){
            if(index == numOfImages){
                index = 1;
            }else if(index < 1){
                index = (numOfImages - 1);
            }
            if(curImg != undefined && curImg != null){
                $(curImg).fadeOut(aniSpeed);
            }
            $('#easySlideshow_G12 img:nth-child(' + index + ')').fadeIn(aniSpeed+1, function(){
                curImg = this;
            });
            imgSizer();
        }
        $(function(){
            screenDimensions();
            numOfImages = $('#easySlideshow_G12 img').length;
            $('#easySlideshow_G12 img').each(function(){
                origWH.push(new Array($(this).width(), $(this).height()));
                $(this).css({position: 'absolute', left: 0, top: 0, display: 'none', cursor: 'pointer'});
            }).click(function(){
                window.open($(this).attr('src'));
            });
            $('#easySlideshow_G12 img:last').load(function(){
                slideshow();
            });
            // Varible Filling (Do not alter unless you know)
            navButtonPadding = parseInt($('#navLeft').css('border-left-width')) + parseInt($('#navLeft').css('border-right-width'));
            $('#navLeft').click(function(){
                index--;
                slideshow();
            });
            $('#navRight').click(function(){
                index++;
                slideshow();
            });
            // Window resizing listener
            $(window).resize(screenDimensions);
        });
        </script>
        <style type="text/css">
            .navButton {
                position: absolute;
                width: 25px;
                height: 25px;
                cursor: pointer;
                background-color: #666;
                border-color: #333;
                border-style: double;
                border-radius: 8px;
            }
            .navButton span {
                color: #FFF;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                position: absolute;
                left: 1px;
                vertical-align: middle;
                font-family: Impact;
                }
        </style>
    </head>
<body>
    <div id="easySlideshow_G12">
        <?php
            $c = count($imgFiles);
            for($i=0;$i<$c;++$i){
                $imgInfo = getimagesize($imgFiles[$i]);
                echo '<img src="' . $imgFiles[$i] . '" ' . $imgInfo[3] . ' />' . PHP_EOL;
            }
        ?>
    </div>
    <div class="navButton" id="navLeft"><span><<</span></div>
    <div class="navButton" id="navRight"><span>>></span></div>
</body>
</head>