Panel Gallery – Galeria de imagens
Postado por: Pedro Rogério em
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.
Referências
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Aparece tudo em branco aqui
Se a imagem ainda pudesse ser ampliada com o clique, seria bem mais completo…
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.
Ótima dica para implementar em páginas com imagens!
Um grande abraço!
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!
Muito Bom Gostei muito. Posso usar este painel, no meu site.
@Jailon Costa,
Sim, pode utilizar onde quiser.