Ele só tem um problema que eu não consegui resolver. Se a imagem estiver no canto direito da tela (ex. quando a tela está redimensionada p/ tamanho menor) o #zoom vai continuar abrindo à direita, criando assim uma rolagem que eu não gostaria que tivesse.
Minha ideia é que ele previsse isso, algo como:
Question
Lucas Campanille
Eai pessoal, tudo bem?
Seguinte, eu estou com esse script:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <style> img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left; display:inline; margin-right:10px; } #zoom{ position:absolute; border:1px solid #000; display:none; float:right; } </style> </head> <body> <ul> <li><a href="1.jpg" class="zoom"><img src="1.jpg" width="240" height="153" /></a></li> <li><a href="2.jpg" class="zoom"><img src="2.jpg" width="240" height="153" /></a></li> <li><a href="3.jpg" class="zoom"><img src="3.jpg" width="240" height="153" /></a></li> </ul> <script> this.imagezoom = function(){ xOffset = 30; yOffset = 10; $("a.zoom").hover(function(e){ $("body").append("<p id='zoom'><img src='"+ this.href +"'/>"+"</p>"); $("#zoom") .css("top",(event.pageY - yOffset) + "px") .css("left",(event.pageX + xOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.t; $("#zoom").remove(); }); $("a.zoom").mousemove(function(e){ $("#zoom") .css("top",(event.pageY - yOffset) + "px") .css("left",(event.pageX + xOffset) + "px"); }); }; $(document).ready(function(){ imagezoom(); }); </script> </body> </html>Ele só tem um problema que eu não consegui resolver. Se a imagem estiver no canto direito da tela (ex. quando a tela está redimensionada p/ tamanho menor) o #zoom vai continuar abrindo à direita, criando assim uma rolagem que eu não gostaria que tivesse. Minha ideia é que ele previsse isso, algo como:Se ((posição_atual_do_mouse + tamanho_do_zoom) > largura_da_janela) { xOffset = (posição_atual_do_mouse - tamanho_do_zoom)}assim daria pra, se por acaso passasse do tamanho total da janela, ele fizesse um espaçamento à esquerda e não à direita.
isso também sem ter que criar uma classe diferente pra cada link, já que as janelas podem ter tamanho diferenciado e tal...
Se alguém puder me ajudar ou dar uma dica, fico muito agradecido!
Link to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.