Ir ao conteúdo
  • Cadastre-se

Como colocar o zoom em diversar imagens


luciane Froster

Posts recomendados

Galera sou nova nesse mundo da web estou procurando adquirir conhecimento pra entrar no segmento curso sistemas para internet...

vamos la por exemplo tenho uma pagina com 5 imagens e quero que as 5 imagens aparecem com o zoom até ai tudo bem galera..

ao ver diversos tutoriais na net achei um aplicativo bem legal mbeans e claro jquery mais não sei como faço para ver as 5 imagens com o zoom pois este aplicativo so mostra com uma imagem alguém poderia me ajudar??


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zoom</title>
<head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.mlens-1.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
$("#green_monster").mlens(
{
imgSrc: $("#green_monster").attr("data-big"), // path of the hi-res version of the image
lensShape: "circle", // shape of the lens (circle or square)
lensSize: 100, // size of the lens (in px)
borderSize: 4, // size of the lens border (in px)
borderColor: "#fff", // color of the lens border (#hex)
borderRadius: 0 // border radius (optional, only if the shape is square)
});
});
</script>
</head>
<body>

<img id="green_monster" src="Imagens/jack.jpg" alt="green monster graffiti by Kotzian" data-big="Imagens/jackgrande.jpg"/>



</head>

</body>
</html>

Link para o comentário
Compartilhar em outros sites

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

APRENDA A MONTAR COMPUTADORES!

montagem2022-capa-peq.jpg

 

CLIQUE AQUI E BAIXE AGORA MESMO!