script-tutorials.com

Creating a Photo Slideshow (zoom fading) effect

—

by

admin
in
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
download in package

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

01 <link rel="stylesheet" href="css/main.css" type="text/css" />
02 <script src="js/script.js"></script>
03
04 <div class="example">
05     <h3><a href="#">Photo inspiration (zoom fading) example</a> <button id="mode" style="float:right">Change mode</button></h3>
06
07     <div id="panel"></div>
08     <div id="imgsource" style="display:none;">
09         <img src="data_images/pic1.jpg" />
10         <img src="data_images/pic2.jpg" />
11         <img src="data_images/pic3.jpg" />
12         <img src="data_images/pic4.jpg" />
13         <img src="data_images/pic5.jpg" />
14         <img src="data_images/pic6.jpg" />
15         <img src="data_images/pic7.jpg" />
16         <img src="data_images/pic8.jpg" />
17         <img src="data_images/pic9.jpg" />
18         <img src="data_images/pic10.jpg" />
19     </div>
20 </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

01 body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
02 .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}
03
04 #panel {
05     position:relative;
06     width: 768px;
07     height: 512px;
08     overflow: hidden;
09 }
10 #panel img {
11     position: absolute;
12     -ms-interpolation-mode:nearest-neighbor;
13     image-rendering: optimizeSpeed;
14 }

Step 3. JS

Here are our main control JS file.

js/main.js

001 var insp = {
002     iTimeInterval : 50,
003     iMaxZoom : 100, // max zoom
004     bHZoom : true, // horizontal zoom
005     bVZoom : true, // vertical zoom
006     iMode : 1, // mode (1 or 2)
007
008     iZStep : 0,
009     iImgStep : 1,
010     oPan : null,
011     iPanWidth : 0,
012     iPanHeight : 0,
013     oImgBefore: null,
014     oImgAfter: null,
015     oImgSource : null,
016
017     // main initialization function
018     init : function(iMode) {
019         this.iMode = iMode;
020         this.oImgSource = document.getElementById('imgsource').children;
021         this.oPan = document.getElementById('panel');
022         this.iPanWidth = this.oPan.offsetWidth;
023         this.iPanHeight = this.oPan.offsetHeight;
024
025         // initial properties of first img element
026         this.oImgBefore = document.createElement('img');
027         this.oImgBefore.src = this.oImgSource[0].src;
028         this.oImgBefore.style.top = (this.bVZoom ? -this.iMaxZoom : 0) + 'px';
029         this.oImgBefore.style.left = (this.bHZoom ? -this.iMaxZoom : 0) + 'px';
030         this.oImgBefore.style.width = (this.bHZoom ? this.iPanWidth + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
031         this.oImgBefore.style.height = (this.bVZoom ? this.iPanHeight + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
032         this.oImgBefore.style.filter = 'alpha(opacity=1)';
033         this.oImgBefore.style.opacity = 1;
034         this.oPan.appendChild(this.oImgBefore);
035
036         // initial properties of second img element
037         this.oImgAfter = document.createElement('img');
038         this.oImgAfter.src = this.oImgSource[1].src;
039         this.oImgAfter.style.top = '0px';
040         this.oImgAfter.style.left = '0px';
041         this.oImgAfter.style.width = this.iPanWidth + 'px';
042         this.oImgAfter.style.height = this.iPanHeight + 'px';
043         this.oImgAfter.style.filter = 'alpha(opacity=0)';
044         this.oImgAfter.style.opacity = 0;
045         this.oPan.appendChild(this.oImgAfter);
046
047         setInterval(insp.run, this.iTimeInterval);
048     },
049
050     // change mode function
051     changemode : function(){
052         this.iMode = (this.iMode == 2) ? 1 : 2;
053     },
054
055     // main loop drawing function
056     run : function(){
057         if (insp.iMaxZoom > insp.iZStep++) {
058             if (insp.bHZoom) {
059                 insp.oImgBefore.style.left = (parseInt(insp.oImgBefore.style.left) - 1) + 'px';
060                 insp.oImgBefore.style.width = (parseInt(insp.oImgBefore.style.width) + 2) + 'px';
061                 if (insp.iMode == 2) {
062                     insp.oImgAfter.style.left = (parseInt(insp.oImgAfter.style.left) - 1) + 'px';
063                     insp.oImgAfter.style.width = (parseInt(insp.oImgAfter.style.width) + 2) + 'px';
064                 }
065             }
066             if (insp.bVZoom) {
067                 insp.oImgBefore.style.top = (parseInt(insp.oImgBefore.style.top) - 1) + 'px';
068                 insp.oImgBefore.style.height = (parseInt(insp.oImgBefore.style.height) + 2) + 'px';
069                 if (insp.iMode == 2) {
070                     insp.oImgAfter.style.top = (parseInt(insp.oImgAfter.style.top) - 1) + 'px';
071                     insp.oImgAfter.style.height = (parseInt(insp.oImgAfter.style.height) + 2) + 'px';
072                 }
073             }
074             if (insp.oImgAfter.filters)
075                 insp.oImgAfter.filters.item(0).opacity = Math.round(insp.iZStep / insp.iMaxZoom * 100);
076             else
077                 insp.oImgAfter.style.opacity = insp.iZStep / insp.iMaxZoom;
078         } else {
079             insp.iZStep = 0;
080
081             if (insp.bHZoom) {
082                 if (insp.iMode == 2) {
083                     insp.oImgAfter.style.left = '0px';
084                     insp.oImgAfter.style.width = insp.iPanWidth + 'px';
085                 }
086                 insp.oImgBefore.style.left = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
087                 insp.oImgBefore.style.width = (insp.iMode == 2 ? (insp.iPanWidth + (2 * insp.iMaxZoom)) : insp.iPanWidth) + 'px';
088             }
089             if (insp.bVZoom) {
090                 if (insp.iMode == 2) {
091                     insp.oImgAfter.style.top = '0px';
092                     insp.oImgAfter.style.height = insp.iPanHeight + 'px';
093                 }
094
095                 insp.oImgBefore.style.top = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
096                 insp.oImgBefore.style.height = (insp.iMode == 2 ? (insp.iPanHeight + (2 * insp.iMaxZoom)) : insp.iPanHeight) + 'px';
097             }
098             if (insp.oImgAfter.filters)
099                 insp.oImgAfter.filters.item(0).opacity = 0;
100             else
101                 insp.oImgAfter.style.opacity = 0;
102             insp.oImgBefore.src = insp.oImgAfter.src;
103             insp.oImgAfter.src = insp.oImgSource[++insp.iImgStep % insp.oImgSource.length].src;
104         }
105     }
106 }
107
108 // page onload
109 onload = function() {
110     insp.init(); // perform initialization
111
112     document.getElementById('mode').onclick = function(){ // onclick handling
113         insp.changemode();
114     }
115 }

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
download in package

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!