Tengo un problema y no encuentro le causa:
En un menú desplegable al elegir una opción se cambia con InnerHTML el contenido de una capa. Hasta ahi anda todo perfecto.
Pero dentro de lo que se manda por InnerHTML se envia una llamada así
document.getElementById('contenido_capas').innerHT ML = ' <div class="clearfix"><a href="fotos_productos/dsc_5548a.jpg" class="jqzoom2" rel=\'gal2\' title="Caofi" ><img src="fotos_productos/dsc_5548a.jpg" title="Caofi" width="230" height="267" border="0" title="triumph" style="border: 4px solid #666;"></a></div><div class="clearfix" ><ul id="thumblist" class="clearfix" ><li><a class="zoomThumbActive" href=\'javascript
:void(0);\' rel="{gallery: \'gal2\', smallimage: \'fotos_productos/dsc_5548a.jpg\',largeimage: \'fotos_productos/dsc_5548a.jpg\'}"><img src="fotos_productos/dsc_5548a.jpg" id="mainpic" name="mainpic" width="67" height="67"/></a></li><li><a href="javascript
:void(0);" title="Caofi #2" rel="{gallery: \'gal2\', smallimage: \'fotos_productos/dsc_5542a.jpg\',largeimage: \'fotos_productos/dsc_5542a.jpg\'}"><img src="fotos_productos/dsc_5542a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li><li><a href="javascript
:void(0);" title="Caofi #3" rel="{gallery: \'gal2\', smallimage: \'fotos_productos/dsc_5544a.jpg\',largeimage: \'fotos_productos/dsc_5544a.jpg\'}"><img src="fotos_productos/dsc_5544a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li></ul></div>';
estoy usando el jqzoom script (de
http://www.mind-projects.it/projects/jqzoom/)
Y eso no se ejecuta. La consola de errores no tira ningun error. Simplemente no hace nada.
Cual es la forma de llamarlo para que ande bien?
Acá dejo el código completo:
<select name="id[1]" onchange="mostrar_capa(this.value);"><option value="1">Azul - Sin stock</option><option value="15">Gris - Sin stock</option></select>
<script src="jqzoom_ev-2.3/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom_ev-2.3/css/jquery.jqzoom.css" type="text/css">
<style type"text/css">
:focus { outline: none; }
*{margin:0;padding:0;}
blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}
.clearfix:after{clear:both;content:".";display:blo ck;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}
ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
border:1px solid red;
}
.jqzoom{
text-decoration:none;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false,
xOffset: 20,
yOffset: 20
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom1').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false,
xOffset: 20,
yOffset: 20
});
});
</script>
<style>
.jqzoom1{
text-decoration:none;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom2').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false,
xOffset: 20,
yOffset: 20
});
});
</script>
<style>
.jqzoom2{
text-decoration:none;
float:left;
}
</style>
<script type="text/javascript">
function mostrar_capa (quecapa){
if (quecapa == 1) {
document.getElementById('contenido_capas').innerHT ML = ' <div class="clearfix"><a href="fotos_productos/dsc_5556a.jpg" class="jqzoom1" rel=\'gal1\' title="Caofi" ><img src="fotos_productos/dsc_5556a.jpg" title="Caofi" width="230" height="267" border="0" title="triumph" style="border: 4px solid #666;"></a></div><div class="clearfix" ><ul id="thumblist" class="clearfix" ><li><a class="zoomThumbActive" href=\'javascript
:void(0);\' rel="{gallery: \'gal1\', smallimage: \'fotos_productos/dsc_5556a.jpg\',largeimage: \'fotos_productos/dsc_5556a.jpg\'}"><img src="fotos_productos/dsc_5556a.jpg" id="mainpic" name="mainpic" width="67" height="67"/></a></li><li><a href="javascript
:void(0);" title="Caofi #2" rel="{gallery: \'gal1\', smallimage: \'fotos_productos/dsc_5549a.jpg\',largeimage: \'fotos_productos/dsc_5549a.jpg\'}"><img src="fotos_productos/dsc_5549a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li><li><a href="javascript
:void(0);" title="Caofi #3" rel="{gallery: \'gal1\', smallimage: \'fotos_productos/dsc_5550a.jpg\',largeimage: \'fotos_productos/dsc_5550a.jpg\'}"><img src="fotos_productos/dsc_5550a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li><li><a href="javascript
:void(0);" title="Caofi #4" rel="{gallery: \'gal1\', smallimage: \'fotos_productos/dsc_5551a.jpg\',largeimage: \'fotos_productos/dsc_5551a.jpg\'}"><img src="fotos_productos/dsc_5551a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li></ul></div>';
}if (quecapa == 15) {
document.getElementById('contenido_capas').innerHT ML = ' <div class="clearfix"><a href="fotos_productos/dsc_5548a.jpg" class="jqzoom2" rel=\'gal2\' title="Caofi" ><img src="fotos_productos/dsc_5548a.jpg" title="Caofi" width="230" height="267" border="0" title="triumph" style="border: 4px solid #666;"></a></div><div class="clearfix" ><ul id="thumblist" class="clearfix" ><li><a class="zoomThumbActive" href=\'javascript
:void(0);\' rel="{gallery: \'gal2\', smallimage: \'fotos_productos/dsc_5548a.jpg\',largeimage: \'fotos_productos/dsc_5548a.jpg\'}"><img src="fotos_productos/dsc_5548a.jpg" id="mainpic" name="mainpic" width="67" height="67"/></a></li><li><a href="javascript
:void(0);" title="Caofi #2" rel="{gallery: \'gal2\', smallimage: \'fotos_productos/dsc_5542a.jpg\',largeimage: \'fotos_productos/dsc_5542a.jpg\'}"><img src="fotos_productos/dsc_5542a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li><li><a href="javascript
:void(0);" title="Caofi #3" rel="{gallery: \'gal2\', smallimage: \'fotos_productos/dsc_5544a.jpg\',largeimage: \'fotos_productos/dsc_5544a.jpg\'}"><img src="fotos_productos/dsc_5544a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li></ul></div>';
}
}
</script>
<div id="contenido_capas" name="contenido_capas" style="width:235px;">
<div class="clearfix"><a href="fotos_productos/dsc_5556a.jpg" class="jqzoom1" rel='gal1' title="Caofi" ><img src="fotos_productos/dsc_5556a.jpg" title="Caofi" width="230" height="267" border="0" title="triumph" style="border: 4px solid #666;"></a></div><div class="clearfix" ><ul id="thumblist" class="clearfix" ><li><a class="zoomThumbActive" href='javascript
:void(0);' rel="{gallery: 'gal1', smallimage: 'fotos_productos/dsc_5556a.jpg',largeimage: 'fotos_productos/dsc_5556a.jpg'}"><img src="fotos_productos/dsc_5556a.jpg" id="mainpic" name="mainpic" width="67" height="67"/></a></li><li><a href="javascript
:void(0);" title="Caofi #2" rel="{gallery: 'gal1', smallimage: 'fotos_productos/dsc_5549a.jpg',largeimage: 'fotos_productos/dsc_5549a.jpg'}"><img src="fotos_productos/dsc_5549a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li><li><a href="javascript
:void(0);" title="Caofi #3" rel="{gallery: 'gal1', smallimage: 'fotos_productos/dsc_5550a.jpg',largeimage: 'fotos_productos/dsc_5550a.jpg'}"><img src="fotos_productos/dsc_5550a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li><li><a href="javascript
:void(0);" title="Caofi #4" rel="{gallery: 'gal1', smallimage: 'fotos_productos/dsc_5551a.jpg',largeimage: 'fotos_productos/dsc_5551a.jpg'}"><img src="fotos_productos/dsc_5551a.jpg" border="0" width="67" height="67" style="width:67px;height:67px;" ></a></li></div>