Foros del Web » Programando para Internet » Jquery »

InnerHTML y jqzoom

Estas en el tema de InnerHTML y jqzoom en el foro de Jquery en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 19/03/2013, 14:40
 
Fecha de Ingreso: junio-2003
Mensajes: 39
Antigüedad: 20 años, 9 meses
Puntos: 1
InnerHTML y jqzoom

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>

Etiquetas: html, innerhtml, javascript, js, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:12.