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
[sociallocker]
download in package
[/sociallocker]
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!
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:)
super super super
how to create new font style ?
plz tell me with example
Hi mahadheer,
Which font size do you mean?
This slideshow doesn’t use any fonts at all
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.
Hey, how could i make the effect more slow?
Hi Kay,
Please refer to the ‘iTimeInterval : 50’
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
Hi Goose,
You may change it in CSS styles
Ok… I figured it out in the css file. Problem is that all pictures aren\’t the same size.