Necesito que no se vea el texto de debajo de las imagenes.
Me hago un lio que no veas. Es una animacion jquery que va de maravilla, pero no quiero que se vea el texto de abajo. Creo que hay que modificar un estilo de un archivo css que se vincula a la pagina, lo malo es que es remoto. Eso es lo único que se me ocurre, pero necesito la opinión de un experto. Si copiais pegais en el dreamweaver lo vereis enseguida,lineas 72 - 80 donde la etiqueta <pre> muchas gracias.
Os adjunto el codigo:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Intermediate Demos (Part 2)</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<style type="text/css">
#s6 { width: 300px; height: 230px; border: 1px solid #ddd; background-color: #eee; }
#s6 div { width: 270px; height: 200px; padding: 15px; color: #333; text-align: left; font-size: 16px; }
#s6 div img { float: left; margin: 0 10px 10px 0; width: 100px; height: 100px; padding: 3px; background: #fff }
#s7 { width: 230px; height: 230px; border: 1px solid #ddd; background-color: #eee; }
#s7 div { width: 200px; height: 200px; padding: 15px; color: #333; text-align: left; font-size: 16px; overflow: hidden }
#s6 div, #s7 div { top: 0; left: 0 }
#big { width: 500px; text-align: left }
td a { margin: 5px }
.nav { margin: 5px
color:#FFF;
}
#nav a, #s7 strong { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
#output { text-align: left; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;
$(function() {
// run the code in the markup!
$('table pre code').not('#skip,#skip2').each(function() {
eval($(this).text());
});
$('#s4').before('<div id="nav" class="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
});
function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log( $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
.append('<h3>' + this.alt + '</h3>');
}
</script>
</head>
<body>
<h1 id="banner"> </h1>
<div id="main">
<div id="demos">
<div align="center">
<table cellspacing="20">
<tr><td>
<h1>Prev/Next</h1>
<div id="s2" class="pics">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
</div>
<div class="nav"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
<pre><code class="mix">$('#s2').cycle({
fx: 'shuffle',
speed: '500',
timeout: 0,
next: '#next2',
prev: '#prev2'
});</code></pre>
</td></tr>
</table>
</div>
<h1>
<script type="text/javascript">
_uacct = "UA-850242-2";
urchinTracker();
</script></h1>
</div>
</div>
</body>
</html>