Tema: magiczoom
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 25/01/2013, 16:45
el_loco90
 
Fecha de Ingreso: julio-2012
Mensajes: 234
Antigüedad: 11 años, 9 meses
Puntos: 9
Respuesta: magiczoom
Cita:
Iniciado por fjrueda Ver Mensaje
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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>::.. Ejemplo Iternal-Zoom ...</title>
  6. <style>
  7. img{ border: 0px; }
  8. </style>
  9. <link rel="stylesheet" href="http://www.magictoolbox.com/static/magiczoom/magiczoom.css" type="text/css" />
  10. <script src="http://www.magictoolbox.com/static/magiczoom/magiczoom.js" type="text/javascript"></script>
  11. <script>
  12. function enterPhoto(photo)
  13. {
  14.     var takeUrl = photo.src;
  15.     var image290 = takeUrl.replace("90", "290");
  16.     var image1000 = takeUrl.replace("90", "1000");
  17.     
  18.     document.getElementById('showbox').src = image290;
  19.     document.getElementById('showcase').href = image1000;
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <div>
  25. <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">
  26. <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>
  27. <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">
  28. <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>
  29. <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">
  30. <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>
  31. <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">
  32. <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>
  33. </div>
  34. <h2>Internal zoom</h2>
  35. <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>
  36. </body>
  37. </html>
amigo lo implemente a mi sistema pero no me anda

lo estoy haciendo asi
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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Zoom con javascript</title>
  6. <link rel="stylesheet" href="../includes/zoom/magiczoom/magiczoom.css" type="text/css" />
  7. <script src="../includes/zoom/magiczoom/magiczoom.js" type="text/javascript"></script>
  8. <script>
  9. function enterPhoto(photo)
  10. {
  11.     var takeUrl = photo.src;
  12.     var image290 = takeUrl.replace("90", "290");
  13.     var image1000 = takeUrl.replace("90", "1000");   
  14.     document.getElementById('imagen_mayor').src = image290;
  15.     document.getElementById('imagen_mayor').href = image1000;
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <div>
  21. <img src="<?php echo $foto1 ?>" alt="01" width="63" height="35" border="0" onmouseover="enterPhoto(this)('<?php echo $foto1 ?>').src='<?php echo $foto1 ?>'"/>
  22. <img src="<?php echo $foto2 ?>" alt="02" width="63" height="35" border="0" onmouseover="enterPhoto(this)('<?php echo $foto2 ?>').src='<?php echo $foto2 ?>'"/>
  23. <img src="<?php echo $foto3 ?>" alt="03" width="63" height="35" border="0" onmouseover="enterPhoto(this)('<?php echo $foto3 ?>').src='<?php echo $foto3 ?>'"/>
  24. <img src="<?php echo $foto4 ?>" alt="04" width="63" height="35" border="0" onmouseover="enterPhoto(this)('<?php echo $foto4 ?>').src='<?php echo $foto4 ?>'"/>
  25. </div>
  26. <img src="<?php echo $foto1 ?>" name="imagen_mayor" width="533" height="327" id="imagen_mayor" />
  27. </body>
  28. </html>

que es lo que estoy haciendo mal?

gracias