fadeshow

fadeshow.php

<?php

$image_dir = '/wp-content/uploads/fadeshow/';
$images = array(
    'pillow-pile.jpg',
    'gold-couch.jpg',
    'shade-and-swag.jpg',
    'barrel-chair.jpg',
    'roman-shades.jpg',
    'blue-sofa.jpg',
    'bolster.jpg',
    'peacock.jpg',
);

?>

<style>
    .fadeshow {
        position: relative;
    }

    .fadeshow .loading {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: white;
        background-image: url("<?= $image_dir ?>/loading.gif");
        background-repeat: no-repeat;
        background-position: center center;
        z-index: 1;
    }

    .fadeshow img {
        position: absolute;
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        height: auto;
    }
</style>

<div class="fadeshow">
    <div class="loading"></div>
    <div class="images">
        <?php foreach($images as $image) { ?>
            <img alt="" data-src="<?= $image_dir . $image ?>" />
        <?php } ?>
    </div>
</div>

<script>
function isHighDensity(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}
var isHD = isHighDensity();

(function($) {
    $('.fadeshow img:gt(0)').hide();
    $('.fadeshow img:first-child').one('load', startFadeShow);

    $('.fadeshow img').each(function() {
        var src = $(this).data('src');

        if (isHD) {
            src = src.replace('.jpg', '@2x.jpg');
        }

        $(this).attr('src', src);
    });

    function showNext() {
        var currentImg = $('.fadeshow .images :first-child');
        var nextImg = currentImg.next('img');

        if (! nextImg[0].src || ! nextImg[0].complete) {
            // not loaded, just wait til next interval
            return;
        }
        
        nextImg.fadeIn(2500);
        currentImg.fadeOut(2500).appendTo('.fadeshow .images');
    }

    function startFadeShow() {
        $('.fadeshow .loading').fadeOut(1000);

        // swear to god first interval seems longer, so going to manually make first call shorter then start interval
        setTimeout(function() {
            showNext();
            setInterval(showNext, 5000);
        }, 4000);
    }

})(jQuery);
</script>