Tema: magiczoom
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 25/01/2013, 11:40
Avatar de fjrueda
fjrueda
 
Fecha de Ingreso: marzo-2008
Ubicación: Bucaramanga
Mensajes: 313
Antigüedad: 12 años, 10 meses
Puntos: 35
Respuesta: magiczoom

Loco 92, buenas tardes.

Le pongo un ejempoo que realice en base a los ejemplos de la web de MagicZoom, no es muy complicado, puede intentarlo y yo se que puede lograr su objetivo.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>::.. Ejemplo Iternal-Zoom ...</title>
  5. img{ border: 0px; }
  6. <link rel="stylesheet" href="http://www.magictoolbox.com/static/magiczoom/magiczoom.css" type="text/css" />
  7. <script src="http://www.magictoolbox.com/static/magiczoom/magiczoom.js" type="text/javascript"></script>
  8. function enterPhoto(photo)
  9. {
  10.     var takeUrl = photo.src;
  11.     var image290 = takeUrl.replace("90", "290");
  12.     var image1000 = takeUrl.replace("90", "1000");
  13.    
  14.     document.getElementById('showbox').src = image290;
  15.     document.getElementById('showcase').href = image1000;
  16. }
  17. </head>
  18. <div>
  19. <a href="http://www.magictoolbox.com/static/images/magiczoom/r6-red-1000.jpg" rel="zoom-id:showcase" rev="http://www.magictoolbox.com/static/images/magiczoom/r6-red-290.jpg">
  20. <img id="1" src="http://www.magictoolbox.com/static/images/magiczoom/r6-red-90.jpg" alt="1" width="90" height="51"  onmouseover="enterPhoto(this);" /></a>
  21. <a href="http://www.magictoolbox.com/static/images/magiczoom/r6-white-1000.jpg" rel="zoom-id:showcase" rev="http://www.magictoolbox.com/static/images/magiczoom/r6-white-290.jpg">
  22. <img id="2" src="http://www.magictoolbox.com/static/images/magiczoom/r6-white-90.jpg" alt="2" width="90" height="51" onmouseover="enterPhoto(this);" /></a>
  23. <a href="http://www.magictoolbox.com/static/images/magiczoom/r6-blue-1000.jpg" rel="zoom-id:showcase" rev="http://www.magictoolbox.com/static/images/magiczoom/r6-blue-290.jpg">
  24. <img id="3" src="http://www.magictoolbox.com/static/images/magiczoom/r6-blue-90.jpg" alt="3" width="90" height="51" onmouseover="enterPhoto(this);" /></a>
  25. <a href="http://www.magictoolbox.com/static/images/magiczoom/r6-black-1000.jpg" rel="zoom-id:showcase" rev="http://www.magictoolbox.com/static/images/magiczoom/r6-black-290.jpg">
  26. <img id="4" src="http://www.magictoolbox.com/static/images/magiczoom/r6-black-90.jpg" alt="4" width="90" height="51" onmouseover="enterPhoto(this);" /></a>
  27. </div>
  28. <h2>Internal zoom</h2>
  29. <a id="showcase" href="http://www.magictoolbox.com/static/images/magiczoom/r6-red-1000.jpg" class="MagicZoom" rel="selectors-change: mouseover; zoom-position: inner;" title=""><img id="showbox" src="http://www.magictoolbox.com/static/images/magiczoom/r6-red-290.jpg" width="290" height="165" alt="5" /></a>
  30. </body>
  31. </html>
__________________
I am ME, Soo Who You ?? ... You Not me.
Web
@fjrueda_fmurdah