Creating a Photo Slideshow (zoom fading) effect

Creating a Photo Slideshow (zoom fading) effect

10 1946
zoom fading effect

Photo inspiration (zoom fading) effect

Today we continue JavaScript examples, and our article will about using javascript in modeling of nice fading and zoom effects for set of images. As we using pure javascript, our result will quite crossbrowser. I prepared 2 modes of switching (you can switch it using added button)

Here are sample and downloadable package:

Live Demo

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML.

This is our main page code with all samples.

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/script.js"></script>

<div class="example">
    <h3><a href="#">Photo inspiration (zoom fading) example</a> <button id="mode" style="float:right">Change mode</button></h3>

    <div id="panel"></div>
    <div id="imgsource" style="display:none;">
        <img src="data_images/pic1.jpg" />
        <img src="data_images/pic2.jpg" />
        <img src="data_images/pic3.jpg" />
        <img src="data_images/pic4.jpg" />
        <img src="data_images/pic5.jpg" />
        <img src="data_images/pic6.jpg" />
        <img src="data_images/pic7.jpg" />
        <img src="data_images/pic8.jpg" />
        <img src="data_images/pic9.jpg" />
        <img src="data_images/pic10.jpg" />
    </div>
</div>

We prepared and hide our set of using images. Plus prepared panel area for drawing.

Step 2. CSS

Here are used CSS styles.

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:770px;height:565px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#panel {
    position:relative;
    width: 768px;
    height: 512px;
    overflow: hidden;
}
#panel img {
    position: absolute;
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering: optimizeSpeed;
}

Step 3. JS

Here are our main control JS file.

js/main.js

var insp = {
    iTimeInterval : 50,
    iMaxZoom : 100, // max zoom
    bHZoom : true, // horizontal zoom
    bVZoom : true, // vertical zoom
    iMode : 1, // mode (1 or 2)

    iZStep : 0,
    iImgStep : 1,
    oPan : null,
    iPanWidth : 0,
    iPanHeight : 0,
    oImgBefore: null,
    oImgAfter: null,
    oImgSource : null,

    // main initialization function
    init : function(iMode) {
        this.iMode = iMode;
        this.oImgSource = document.getElementById('imgsource').children;
        this.oPan = document.getElementById('panel');
        this.iPanWidth = this.oPan.offsetWidth;
        this.iPanHeight = this.oPan.offsetHeight;

        // initial properties of first img element
        this.oImgBefore = document.createElement('img'); 
        this.oImgBefore.src = this.oImgSource[0].src;
        this.oImgBefore.style.top = (this.bVZoom ? -this.iMaxZoom : 0) + 'px';
        this.oImgBefore.style.left = (this.bHZoom ? -this.iMaxZoom : 0) + 'px';
        this.oImgBefore.style.width = (this.bHZoom ? this.iPanWidth + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
        this.oImgBefore.style.height = (this.bVZoom ? this.iPanHeight + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
        this.oImgBefore.style.filter = 'alpha(opacity=1)';
        this.oImgBefore.style.opacity = 1;
        this.oPan.appendChild(this.oImgBefore);

        // initial properties of second img element
        this.oImgAfter = document.createElement('img'); 
        this.oImgAfter.src = this.oImgSource[1].src;
        this.oImgAfter.style.top = '0px';
        this.oImgAfter.style.left = '0px';
        this.oImgAfter.style.width = this.iPanWidth + 'px';
        this.oImgAfter.style.height = this.iPanHeight + 'px';
        this.oImgAfter.style.filter = 'alpha(opacity=0)';
        this.oImgAfter.style.opacity = 0;
        this.oPan.appendChild(this.oImgAfter);

        setInterval(insp.run, this.iTimeInterval);
    },

    // change mode function
    changemode : function(){
        this.iMode = (this.iMode == 2) ? 1 : 2;
    },

    // main loop drawing function
    run : function(){
        if (insp.iMaxZoom > insp.iZStep++) {
            if (insp.bHZoom) {
                insp.oImgBefore.style.left = (parseInt(insp.oImgBefore.style.left) - 1) + 'px';
                insp.oImgBefore.style.width = (parseInt(insp.oImgBefore.style.width) + 2) + 'px';
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.left = (parseInt(insp.oImgAfter.style.left) - 1) + 'px';
                    insp.oImgAfter.style.width = (parseInt(insp.oImgAfter.style.width) + 2) + 'px';
                }
            }
            if (insp.bVZoom) {
                insp.oImgBefore.style.top = (parseInt(insp.oImgBefore.style.top) - 1) + 'px';
                insp.oImgBefore.style.height = (parseInt(insp.oImgBefore.style.height) + 2) + 'px';
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.top = (parseInt(insp.oImgAfter.style.top) - 1) + 'px';
                    insp.oImgAfter.style.height = (parseInt(insp.oImgAfter.style.height) + 2) + 'px';
                }
            }
            if (insp.oImgAfter.filters)
                insp.oImgAfter.filters.item(0).opacity = Math.round(insp.iZStep / insp.iMaxZoom * 100);
            else
                insp.oImgAfter.style.opacity = insp.iZStep / insp.iMaxZoom;
        } else {
            insp.iZStep = 0;

            if (insp.bHZoom) {
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.left = '0px';
                    insp.oImgAfter.style.width = insp.iPanWidth + 'px';
                }
                insp.oImgBefore.style.left = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
                insp.oImgBefore.style.width = (insp.iMode == 2 ? (insp.iPanWidth + (2 * insp.iMaxZoom)) : insp.iPanWidth) + 'px';
            }
            if (insp.bVZoom) {
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.top = '0px';
                    insp.oImgAfter.style.height = insp.iPanHeight + 'px';
                }

                insp.oImgBefore.style.top = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
                insp.oImgBefore.style.height = (insp.iMode == 2 ? (insp.iPanHeight + (2 * insp.iMaxZoom)) : insp.iPanHeight) + 'px';
            }
            if (insp.oImgAfter.filters)
                insp.oImgAfter.filters.item(0).opacity = 0;
            else
                insp.oImgAfter.style.opacity = 0;
            insp.oImgBefore.src = insp.oImgAfter.src;
            insp.oImgAfter.src = insp.oImgSource[++insp.iImgStep % insp.oImgSource.length].src;
        }
    }
}

// page onload
onload = function() {
    insp.init(); // perform initialization

    document.getElementById('mode').onclick = function(){ // onclick handling
        insp.changemode();
    }
}

Hope this code is pretty easy. During time we just enlarging images, changing its opacity. All necessary variables collected in top of object. Welcome to experiment!


Live Demo

Conclusion

Hope that you was happy to play with our javascript lessons. I hope that fading switching photos looks fine :) If is you were wondering – do not forget to thank. Will glad to listen your interesting comments. Good luck!


10 COMMENTS

  1. Hi,

    I haven’t tested this script as yet, except for the demo which looks good. I’m interested in the workings of the script so should have fun with this one. Thanks:)

  2. hello i would like to know is it possible to select other pictures in my computer folders to Add to the slideshow ?
    how can this be done?

    • Hi jojo,
      Of course you can. I hope that you already noticed that all photos are located in ‘data_images’ directory. So, you can upload your own images here and, don’t forget to use correct file names in your index.html file. That’s all.

  3. Hi,

    How can I resize the pictures after I substitute with my pics? The people are coming up fat looking.

    Also, is there a quick way of flopping the slideshow on a Facebook pic?

    Code works like a charm.

    Thanks

Leave a Reply