Foros del Web - Ver Mensaje Individual

fjrueda · #8 (**permalink**) 25/01/2013, 11:40

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::.. Ejemplo Iternal-Zoom ...</title>
<style>
img{ border: 0px; }
</style>
<link rel="stylesheet" href="http://www.magictoolbox.com/static/magiczoom/magiczoom.css" type="text/css" />
<script src="http://www.magictoolbox.com/static/magiczoom/magiczoom.js" type="text/javascript"></script>
<script>
function enterPhoto(photo)
{
    var takeUrl = photo.src;
    var image290 = takeUrl.replace("90", "290");
    var image1000 = takeUrl.replace("90", "1000");
    
    document.getElementById('showbox').src = image290;
    document.getElementById('showcase').href = image1000;
}
</script>
</head>
<body>
<div>
<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">
<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>
<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">
<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>
<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">
<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>
<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">
<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>
</div>
<h2>Internal zoom</h2>
<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>
</body>
</html>