Hola, estoy tocando un scritp de una marquesina en JQuery. Estoy empezando con esto y ni siquiera se si se puede hacer.
Lo que gustaria es poder controlar el tamaño de la marquesina, he conseguido hacerlo pero necesito cambiar la altura dentro de la funcion que maneja la repetición para que quede bien.
Os pongo el código:
Código:
var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline = 0;
$(document).ready(function(){
headline_count = $("div.headline").size();
$("div.headline:eq("+current_headline+")").css('top','5px');
headline_interval = setInterval(headline_rotate, 3500); // tiempo en milisegundos
$('#marquesina').hover(function() {
clearInterval(headline_interval);
}, function() {
headline_interval = setInterval(headline_rotate, 3500); // tiempo en milisegundos
headline_rotate();
});
});
function headline_rotate() {
current_headline = (old_headline + 1) % headline_count;
$("div.headline:eq(" + old_headline + ")").animate({top: -746},"slow", function(h) {
$(this).css('top','746px');
});
$("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");
old_headline = current_headline;
}
//para cambiar tamaño de las fotos
function mostrarFoto(alto,ancho){
this.alto = alto;
this.ancho = ancho;
document.getElementById('image1').width = this.ancho;
document.getElementById('image1').height = this.alto;
document.getElementById('image2').width = this.ancho;
document.getElementById('image2').height = this.alto;
document.getElementById('image3').width = this.ancho;
document.getElementById('image3').height = this.alto;
document.getElementById('marquesina').style.width = this.ancho + "px";
document.getElementById('marquesina').style.height = this.alto + "px";
document.getElementById('fotos').style.width = this.ancho + 10 + "px";
document.getElementById('fotos').style.height = this.alto + 10 + "px";
}
La funcion mostrarFoto es la que cambia el tamaño de las fotos, ahora necesito poder cambiar la altura en headline_rotate:
Código:
function headline_rotate() {
current_headline = (old_headline + 1) % headline_count;
$("div.headline:eq(" + old_headline + ")").animate({top: -746},"slow", function(h) {
$(this).css('top','746px');
});
$("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");
old_headline = current_headline;
}
exactamente aqui:
Código:
$("div.headline:eq(" + old_headline + ")").animate({top: -746},"slow", function(h) {
$(this).css('top','746px');
});
Cuando el usuario pulse en los enlaces con id 1, 2 ó 3:
Código:
<ul id="tamano">
<li><a id="3" onclick="mostrarFoto(1343,900)" href="#">3</a></li>
<li class="medio"><a id="2" onclick="mostrarFoto(1194,800)" href="#">2</a></li>
<li ><a id="1" onclick="mostrarFoto(746,500)" href="#">1</a></li>
<li class="clear"></li>
</ul>
¿Como puedo pasarle una variable a la función?
Muchas gracias por adelantado, cualquier sugerencia en el código es bienvenida.