WillSquire
10/13/2015 - 10:34 PM

Fader - Fade in/out image showcase

Fader - Fade in/out image showcase

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="app.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<div id="fader">
    <div class="fader-img" style="background: url('img_1.jpg') no-repeat center center / cover;"></div>
    <div class="fader-img" style="background: url('img_2.jpg') no-repeat center center / cover;"></div>
    <div class="fader-img" style="background: url('img_3.jpg') no-repeat center center / cover;"></div>
</div>
<script src="fader.js"></script>
</body>
</html>
fader.js
content_copyfile_download
/**
 * Created by willsquire on 13/10/15.
 */

var fader_imgs = $('.fader-img');
var fade_speed = 1000;
var fade_delay = 5000;

// Only fade between images if there is more than one
if (fader_imgs.length > 1) {
    var img_index = 0;
    var z_index_show = 1;
    var z_index_hide = 0;
    fader_imgs.each(function(index, element) {
        element.style.opacity = 0;
        element.style.display = 'none';
        element.style.zIndex = z_index_hide;
    });
    _fade_in(fader_imgs[img_index]);

    function _fade_out(img) {
        $(img).fadeTo(fade_speed, 0, function() {
            img.style.display = 'none';
            img.style.zIndex = z_index_hide;
        });
    }

    function _fade_in(img) {
        img.style.zIndex = z_index_show;
        img.style.display = 'block';
        $(img).fadeTo(fade_speed, 1);
    }

    function _next_img() {
        // Remove image
        _fade_out(fader_imgs[img_index]);

        img_index++;

        if (img_index == fader_imgs.length)
            img_index = 0;

        // Add image
        _fade_in(fader_imgs[img_index]);
    }

    setInterval(_next_img, fade_delay);
}
app.css
content_copyfile_download
#fader {
    width: 100%;
    height: 500px;
}

.fader-img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}