Efecto de anotación sobre una imagen utilizando jQuery. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet CSS

¡votar!

Efecto de anotación sobre una imagen utilizando jQuery

Hoy vamos a crear un efecto de superposición simple para mostrar anotaciones en, por ejemplo elementos de la cartera de una cartera de diseñadores web. Haremos uso de jQuery.

Cuando carguemos la aplicación, nos aparecerá una imagen, que al pulsar sobre ella, se capturará ese evento, apareciendo sobre ella otra capa con las anotaciones que queremos que aparezca sobre esa imagen.

Para crear el ejemplo, empezamos con la creación del código HTML.

<div class="portfolio">
<div class="portfolio_item">
<div class="image_wrap">
<img src="images/website1.jpg" alt="Website1"/>
</div>
<div class="zoom_overlay">
<img src="images/website1_notes.png" alt="Website1Notes"/>
</div>
</div>
...
</div>

Este código es muy sencillo. Lo que nosotros tendremos será un contenedor principal, donde iremos añadiendo todos las imágenes, que corresponde a la clase “portfolio_item”. Luego, dentro de este contenedro, tendremos dos contenedores, uno donde tendremos la imagen normal, y otro donde tendremos la imagen con las anotaciones. Esta última estará oculta para que no se visualice.

Ahora nos ponemos con el código de estilos y lo primero que hacemos es crear los estilos para la clase principal, donde tendremos el resto de elementos.

.portfolio{
width:500px;
margin:0 auto;
position:relative;
}

La clase de los elementos del portfolio tendrán los siguientes estilos.

.portfolio_item{
position:relative;
margin:30px auto;
}

Ahora veremos los estilos para la clase que tiene la imagen que cargará al principio. Esta imagen la queremos tener centrada, por eso a la propiedad display, le asignamos el valor table-cell.

.image_wrap{
width:500px;
height:500px;
display:table-cell;
text-align:center;
vertical-align:middle;
position:relative;
cursor:pointer;
}

Alrededor de la imagen, le asignamos una pequeña sombra. Para conseguir esto, debemos de utilizar los siguientes estilos.

.image_wrap > img{
vertical-align:middle;
margin:0 auto;
position:relative;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}

Ahora, hay que crear los estilos de la imagen que contiene las anotaciones. Para ello, con jQuery crearemos una animación, por lo que al pulsar sobre la imagen, esta se hará más pequeña y aparecerá la imagen de anotaciones. El contenedor de esta imagen, tendrá como posición Absolute, para que salga por encima de la anterior. Le asignamos el valor de 0 para la propiedad de opacity, porque queremos que se vea la imagen anterior. El código correspondiente sería el siguiente.

.zoom_overlay{
width:400px;
height:400px;
margin:-200px 0px 0px -200px;
background:transparent url(../images/overlay.png) repeat top left;
position:absolute;
top:50%;
left:50%;
display:none;
opacity:0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
cursor:pointer;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

Por último, debemos de asignar el estilo a la imagen de anotaciones, que no debe estar visible, sólo cuando se pulsa en la imagen.

.zoom_overlay img{
display:none;
}

La última parte del código corresponde al código JavaScript, que como hemos indicado, utilizaremos la librería jQuery para darle la animación correspondiente.

La idea del efecto, es hacer la pantalla más pequeña y sobreponer encima la imagen con las anotaciones.

Lo primero que hacemos es coger la referencia hacia el contenedor principal.

var $portfolio  = $('#portfolio');

Ahora definiremos lo que queremos que suceda cuando pulsamos en la pantalla. Lo que hacemos será modificar el ancho y el alto de la imagen. También le indicamos que la imagen estará centrada y le asignamos un valor de “opacity” en esa misma propiedad.

$portfolio.find('.image_wrap').bind('click',function(){
var $elem       = $(this);
var $image      = $elem.find('img:first');
$image.stop(true)
.animate({
'width' :'400px',
'height':'400px'
},250);
//the overlay is the next element
var opacity     = '1';
if($.browser.msie)
opacity = '0.5'
$elem.next()
.stop(true)
.animate({
'width'         :'500px',
'height'        :'500px',
'marginTop'     :'-250px',
'marginLeft':'-250px',
'opacity'       :opacity
},250,function(){
//fade in the annotations
$(this).find('img').fadeIn();
});
});

También hay que indicar lo que sucede cuando se pulsa sobre la imagen de las anotaciones. Lo que hay que hacer es indicarle que restablezca los valores.

$portfolio.find('.zoom_overlay').bind('click',function(){
var $elem       = $(this);
var $image      = $elem.prev()
.find('img:first');
//hide overlay
$elem.find('img')
.hide()
.end()
.stop(true)
.animate({
'width'         :'400px',
'height'        :'400px',
'marginTop'     :'-200px',
'marginLeft':'-200px',
'opacity'       :'0'
},125,function(){
//hide overlay
$(this).hide();
});
//show image
$image.stop(true)
.animate({
'width':'500px',
'height':'500px'
},250);
});

Con esto ya estaría todo listo. Pueden ver un ejemplo en el