How to make transitions smooth between images

Question

Afternoon,

I've made some code to add images into a page and was trying to work out how to transition between the images smoothly? Here is the code. Would it be worth sticking in a jquery here? I'm a total novice btw so sorry for silly question if it's easy..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Adweek</title>
        <style type="text/css">
        * {
            margin:0;
            padding:0;
            border:0;
        } 
        html, body, iframe {
            height:100%;
            width:100%;
            overflow:hidden; 
        }

        </style> 
        <script type="text/javascript"> 
            var pages = new Array(); //this will hold your pages
            pages[0] = 'page1.html';
            pages[1] = 'page2.html';
            pages[2] = 'page3.html';
            pages[3] = 'page4.html';
            pages[4] = 'page5.html';
            pages[5] = 'page6.html';
            pages[6] = 'page7.html';
            pages[7] = 'page8.html';
            pages[8] = 'page9.html';
            pages[9] = 'page10.html';
            pages[10] = 'page11.html';
            var time = 10; // set this to the time you want it to rotate in seconds   // do not edit 
            var i = 1;
            function setPage() {
                if(i == pages.length){
                     i = 0;  
                }
                document.getElementById('holder').setAttribute('src',pages[i]);
                i++; 
            } 
            setInterval("setPage()",time * 1000); // do not edit
        </script> 
    </head>   
    <body> 
        <iframe id="holder" src="page1.html" frameborder="0" scrolling="no"></iframe>
    </body>
</html>

Your setInterval function is wrong. Make it - `setInterval(function(){setPage()},time * 1000);` here: http://jsfiddle.net/754cm/ — Ani, Mar 28 '14 at 16:12
Forgive me but if I make a index.js / index.css / index.html that leaves me with a tiny thumbnail and it's not scaling through the slides? — Rich88, Mar 28 '14 at 16:17
I am not sure what you mean. But if you include your `setPage()` in `quotes` inside `setInterval()`, it won't get called. — Ani, Mar 28 '14 at 16:19
It's my fault. I really don't understand how to do this stuff. Don't even know what I'm meant to do with the jsfiddle. Presume just make index.html / index.css / index.js from the code you have supplied? Sorry. — Rich88, Mar 28 '14 at 16:23
Why do you have iframe if you are looking to change images ? — Ani, Mar 28 '14 at 16:32
Here look at this: http://stackoverflow.com/questions/3264739/image-change-every-30-seconds-loop Should help — Ani, Mar 28 '14 at 16:33

michaelward82 · Answer 1 · 2014-04-02T01:13:26.933

To transition to another image smoothly, you need to use the following procedure:

1) Load your new image behind the image you wish to swap away from. Whether you do this by loading the new image in a background on a div, or by cloning an existing image element.

2) Fade-out the current image. This will reveal the image from behind.

3) Clean-up - remove any redundant elements or css that you created along the way.

Example fiddle - click the image to cause the next to load.

I have commented the JS code with the hope that it will allow you to modify the code to suit your own purposes.

JS

(function() {
    "use strict";

    function swapImage(newIndex, preload) {
        var newImgSrc;
        var $img = $imgContainer.find('img');
        var imgIsAnimating = $img.is(':animated');

        if (!imgIsAnimating) {
            newImgSrc = images[newIndex];
            // Set background-image to new image
            $imgContainer.css({'background-image': 'url(' + newImgSrc + ')'});

            //Set data-index to the new index value
            $imgContainer.data('index', newIndex);

            // Fade old image
            $imgContainer.find('img').animate({ opacity: 0 }, function () {
                //** Callback upon fade animation completed **/
                imageSwapTidyUp(newImgSrc);
            });

        }
    }

    function imageSwapTidyUp(newImgSrc) {
        var $img = $imgContainer.find('img');
        // Change img src to new image
        $img.prop('src', newImgSrc);
        // Make img opaque
        $img.animate({ opacity: 1 }, 100);
    }

    function addArrayNextIndexSupport() {
        // Modify the Array object prototype, add nextIndex method
        if (!Array.prototype.nextIndex) {
            Array.prototype.nextIndex = function (currentIndex) {
                // currentIndex + 1 if in bounds, else 0
                return currentIndex < this.length - 1 ? currentIndex + 1 : 0;
            }
        }
    }

    //** On initialisation **//

    // Array holding all the images to be loaded
    var images = [
        'http://s30.postimg.org/8877xxo69/image.jpg',
        'http://s14.postimg.org/utnk4hm8h/image.jpg',
        'http://s22.postimg.org/4cy006wbl/firecat.jpg',
        'http://s27.postimg.org/456i0ge43/mad_baby.jpg'
    ];
    var $imgContainer;

    // Adds nextIndex to Array object
    addArrayNextIndexSupport();

    //** On DOM Ready **//
    $(function () {
        // Cache a reference to .img-container
        $imgContainer = $('.img-container');

        $imgContainer
            .data('index', 0) // Set data-index to 0 on init
            .on('click', function () {
                var newIndex = images.nextIndex($(this).data('index'));
                swapImage(newIndex);
            });
    });
}());

CSS

.img-container {
    background-repeat: no-repeat;
    background-position: top left;
    width: 620px;
    height: 465px;
}
.img-container img {
    display: block;
}

HTML

<div class="img-container">
    <img src="http://s30.postimg.org/8877xxo69/image.jpg" alt="">
</div>

Many thanks Michael, this is an absolute life saver. Had this dumped on me and I have extremely limited ability with this but I'm the most technical of a bunch of wallies! — Rich88, Mar 28 '14 at 15:56
This saved me too. I was trying to draw the first image at `(1 - opacity)` and then the next image at `opacity` for a series of images, but it would darken at some points. You have to set the background to 100% opacity, then draw the next image at (in my case) `opacity = (percent / 100 * maxImgs) % 1` (where percent is how far along you are and `maxImgs` is how many images you have. Thank you for saving me a lot of time — dylnmc, Jul 12 '18 at 21:29

How to make transitions smooth between images

1 Answers1