Criando slide show com efeito zoom

JQuery é um framework que visa facilitar a programação em javascript, tornando o código mais simples, flexível e elegante, este exemplo mostra como fazer um slide show com efeito de Zoom nas fotos.

Demonstração do Slide Show

Vamos ao código:
HTML – index.html

[code lang=”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>
[/code]

CSS – css/main.css

[code lang=”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;
}
[/code]

JS – js/main.js

[code lang=”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();
}
}
[/code]

Bons estudos e até a próxima!
Fonte: Script Tutorials