jQZoom – Otimo Plugin Para jQuery
Se você ta precisando dar um zoom nas imagens, seus problemas acabaram, rsrs
Com essa belezinha aqui você fará isso e muito mais…confira no site do desenvolvedor.
Instalação
Baixe-o e insira o codigo no HTML.Obs.se você alterar a localização e os nomes faça de acordo com as suas alterações:
<script type='text/javascript' src='js/jquery-1.2.6.js'></script> <script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
E jqzoom.css – a parte do CSS.
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
Como usar
É bem simples, a unica coisa a se fazer é definir a classe para a imagem. ex:
<a href="images/AIMAGEMGRANDE.JPG" class="MINHACLASSE" title="SEI LA"> <img src="images/IMAGEMPEQUENA.JPG" title="SEI LA" /> </a>
Devemos criar tambem um script que fará tudo isso funcionar:
$(document).ready(function(){
$('.MINHACLASSE).jqzoom();
});
Script com alguns efeitos, por exemplo:
$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //e Mais Opções....
};
$('.MINHACLASSE').jqzoom(options);
});
é isso…para maiores informações visite o site do desenvolvedor…
até a próxima.
Posts Relacionados
Adeus IE6 – Plugin jQuery Hardcore Para Dar Um Fim ao Internet Explorer 6
Linha Framework – Desenvolva Front-end Com Mais Qualidade!
Quais são os melhores frameworks para PHP, Ruby, JS e CSS?
Limitar Caracteres com Jquery
Dica Rápida – Desabilitar Botão Direito do Mouse com Jquery
8 Comentários
-
Luan Muniz disse:
Adorei o plugin
ótimo pra mostrar projeto pra clientes =DD
Vou fazer uma página com isso só pra mostrar projeto pra cliente
=)Ótimo post!!
=D -
Otávio disse:
Mateus…Fala averdade essa vc pois pra mim néh rsrs.
DAlhe bahiano….abraços
DEUS continue te abençuando.
-
Mateus Souza disse:
se vc ta falando, kkkkkkkkkkkkkkkkkkkk
vlw
Deus te abençoe tb -
Gustavo Bordoni disse:
Gostei!!
-
Daniel disse:
Bom dia.
Temho um página em que possuo o controle dos botões igual ao do MAC (bottom) e coloquei o zoom . Só que os dois juntos não funcionam alguma função está bloqueando outra, quem eu chamo primeiro funciona e a outra não.
Por favor você saberia como resolver?
muito obrigado.
-
Daniel desculpa a demora pra responder..
faz o seguinte:coloca o script do Dock (MAC) antes do html dele…por exemplo:
vc coloca os scripts assim
script…
script…
o conteudo….
Dock(MAC)faça assim:
script…
o conteudo….
script… (esse script é o corespondente ao do dock)
Dock(MAC)qualquer duvida é so perguntar…
abraços e desculpa mais uma vez ai
-
Muito obrigado por sua ajuda.
Desculpe a ignorância. Só que eu não entendi muito bem quais scripts colocar e onde e como…
Eu estou utilizando uma MasterPage em ASP.Net e os scripts nela em Head:
<%–
div.notes{
font-size:12px;
}
div.notes a{
color:#990000;
}$(function() {
$(“.jqzoom”).jqzoom();
});–%>
.dock img { behavior: url(iepngfix.htc) }
.style1
{
width: 100%;
height: 100%;
}Mais abaixo eu coloco dentro do Form da MasterPAge os Scripts do DOCK:
$(document).ready(
function()
{
//$(“.jqzoom”).jqzoom();$(‘#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)$(‘#dock3′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);Depois dentro de um ContentPlaceHolder a página com os div do menu dock e na imagem o do Zoom.
Desde já muito obrigado.
-
Vou tentar responder a sua duvida com um exemplo de pagina em HTML, pois não entendo nada de ASP:
espero que com isso tenha esclarecido a sua dúvida e resolvido o seu problema…abraços
Faça um Comentário
Comentários
-
Pois é rapaz, eu vou trocar de hospedagem... No momento só tenho o código fonte do LF, da uma checada ai...mais »
-
Vinicius Almeida disse:
Opa, o site do linha framework está off! Existe algum outro lugar onde posso encontrar a documentação?Comecei um projeto com o...mais »
-
Opa Jackson, usa o plugin que o Niall Doherty's desenvolveu, é bem completo e da pra usar "duplicadamente", ai você...mais »
-
Link arrumado Guilherme, obrigado pelo aviso!
-
Boa André, por essa nem eu esperava, hehe. Grande sacada mesmo, vlw :)
© 2010 Mateus Souza – Webdesigner (Deus Seja Louvado) | Posts (RSS) | Comentários (RSS). | powered by WordPress e Linha Framework :P