PANEL GALLERY - GALERIA DE IMAGENS
Postado em: 11 de janeiro de 2008 por Pedro Rogério
Panel Gallery é uma opção interessante de se mostrar nossas imagens. Ele nos permite montar uma galeria de imagens mediante painéis estilo miniaturas, onde, ao invés de você dar um clique para ver a imagem em tamanho maior, você vai navegando com o mouse por diversos pontos da imagem para vê-la. Se a explicação ficou meio confusa, dêem uma olhada no exemplo.
Exemplo de uso:
Dentro da tag <head> colocamos o seguinte script:
<script type="text/javascript">
var xm = 0;
var ym = 0;
document.onmousemove = function(e){
if (window.event) e=window.event;
xm = e.clientX;
ym = e.clientY;
}
var panel = {
speed : .006,
t : 0,
O : [],
over : false,
run : function() {
panel.t += panel.speed;
for (var i = 0, o; o = panel.O[i]; i++)
o.anim(i + panel.t);
},
init : function(){
for (var i = 0, o; o = document.images[i]; i++){
if (o.className.indexOf('panel') >= 0) {
if(o.parentNode.href != undefined) {
var div = document.createElement("a");
div.href = o.parentNode.href;
} else {
var div = document.createElement("div");
}
div.className = 'panel';
var img = document.createElement("img");
img.src = o.src;
img.className = 'imgPanel';
o.parentNode.replaceChild(div,o);
div.appendChild(img);
div.ims = img.style;
div.iw = img.width;
div.ih = img.height;
div.cx = -div.iw / 2;
div.cy = -div.ih / 2;
div.anim = function(t) {
nw = this.offsetWidth;
nh = this.offsetHeight;
if (panel.over == this){
for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
} else {
var mx = (this.iw - nw) * .5;
var my = (this.ih - nh) * .5;
var x = -mx * (1 + Math.cos(t * 1.2));
var y = -my * (1 + Math.sin(t));
}
this.cx += (x - this.cx) * .1;
this.cy += (y - this.cy) * .1;
this.ims.left = Math.round(this.cx) + 'px';
this.ims.top = Math.round(this.cy) + 'px';
}
div.onmouseover = function()
{
panel.over = this;
}
this.O.push(div);
}
}
setInterval(panel.run, 32);
}
}
onload = function ()
{
panel.init();
}
</script>
Aplicamos o CSS:
<style type="text/css">
#screen {
position: absolute;
left: 22%;
top: 20%;
width: 60%;
height: 60%;
background: #fff;
overflow: hidden;
}
.panel {
position: relative;
float: left;
width: 21%;
height: 30%;
margin: 1%;
overflow: hidden;
}
.imgPanel {
position: absolute;
border: none;
text-decoration: none;
}
</style>
E para finalizar, um simples HTML:
<div id="screen">
<img class="panel" src="images/fl01.jpg" alt="">
<img class="panel" src="images/slide110.jpg" alt="">
<img class="panel" src="images/fl01.jpg" alt="">
<img class="panel" src="images/fl01.jpg" alt="">
</div>
Download dos arquivos de exemplo.
Camilo Oliveira disse: 11.01.08 ás 09:28
Aparece tudo em branco aqui
Adriano Macêdo disse: 11.01.08 ás 09:39
Se a imagem ainda pudesse ser ampliada com o clique, seria bem mais completo…
Mateus disse: 11.01.08 ás 10:39
Muito legal. Pena que não dá para ampliar.
Mas nada que uns ajustes no script não resolva… =)
Me pareceu bem leve também…
Parabéns pelo post.
Rodrigo Teixeira disse: 13.01.08 ás 11:57
Ótima dica para implementar em páginas com imagens!
Um grande abraço!
Lucas Mezêncio disse: 14.01.08 ás 11:00
Muito interessante! Realmente, se desse pra ampliar seria melhor, mas ficou bem bacana!
Aumentando a área das DIV’s também seria bem legal!
Abraços!