Hola a todos!
tengo una problema con los imagines garndes de una funcion preview. Lo que me gustaria que la imaginen de abajo no salga de la ventana de navigador, que no se desplaza la barra de navegador.
tengo colgado aqui:
[URL="http://ans.byvioleta.net/curs_jquery/pruebas/preview1.htm"]http://ans.byvioleta.net/curs_jquery/pruebas/preview1.htm[/URL]
Código HTML:
/* CSS: (StyleSheet) */
#imgPreviewWithStyles {
background: #CCC;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
padding: 3px;
z-index: 999;
border: none;
}
/* Text below image */
#imgPreviewWithStyles span {
color: #FFF;
text-align: center;
display: block;
padding: 5px 0 3px 0;
}
Código HTML:
<div id="contain">
<h2>jQuery : imgPreview</h2>
<div>
<ul id="fifth">
<li><a href="jolie.htm" rel="../img/angelina_jolie-1.jpg" title="Angelina Jolie"><img src="http://www.forosdelweb.com/f127/img/angelina_jolie-1.jpg" alt="" width="150" height="150" border="0"/></a></li>
<li><a href="brad.htm" rel="../img/brad-pitet.jpg" title="Brad Pitet"><img src="http://www.forosdelweb.com/f127/img/brad-pitet.jpg" alt="" width="150" height="150" border="0"/></a></li>
<li><a href="pitch.htm" rel="../img/pitch_brushman.jpg" title="Pitch Brushman"><img src="http://www.forosdelweb.com/f127/img/pitch_brushman.jpg" alt="" width="150" height="150" border="0"/></a></li>
</ul>
</div>
</div>
Código:
<script language="javascript" type="text/javascript">
$('ul#fifth a').imgPreview({
containerID: 'imgPreviewWithStyles',
srcAttr: 'rel', // Change srcAttr to rel
imgCSS: {
height: 500 // Limit preview size
},
onShow: function(link){ // When container is shown
$('<span>' + link.title + '</span>').appendTo(this);
},
onHide: function(link){ // When container hides
$('span', this).remove();
}
});
</script>
si alquien me podria ayudar porfa.
saludos