uso de variables para marquesina en jquery

[sinrazonaparente]

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.

[mayid]

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;

Para esta funcion yo sugerirìa uses clases en vez de id. Un id unico requiere listar una por una las fotos. Un class name te permite cambiar el atributo de todas las fotos de una sola vez.

En cuanto a las proporciones de la marquesina, yo a simple vista no las veo declaradas en javascript. Han de tener un documento CSS para inicializarlas.

Basta con que sepas como se llama el elemento que tiene que redimensionarse, y pasarle las nuevas proporciones de la misma manera en que se las estas pasando a las fotos en la funcion mostrarFoto(ancho, alto)

[sinrazonaparente]

Hola Mayid,

Muchas gracias por la sugerencia, tienes razon con lo de usar clases en la función. Lo cambié y al final me queda así:

Código:

function mostrarFoto(alto,ancho){
			
this.alto = alto;
this.ancho = ancho;
						
 $(".image").css("width", this.ancho);
 $(".image").css("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";
			}

El tem de cambiar el tamaño en la función que hace el movimiento de las marquesinas no es tan fácil como pensé al principio. Conseguí pasarle el tamaño cuando el usario pulsa, pero sólo me sirve para la primera vuelta, cuandolas fotos han el primer loop, vuelve a tomar el valor incial y estamos como al principio.

El movimiento de la marquesina me queda así:

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);          	  $('#marquesina').hover(function() {
  clearInterval(headline_interval);
  }, function() {
  headline_interval = setInterval(headline_rotate, 3500); headline_rotate();
            });
 	     });
   
function headline_rotate(alto) {
 this.alto = alto;
 if(this.alto == 0){//para que funcione la primera vez
 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;
  }else{
 current_headline = (old_headline + 1) % headline_count;
 $("div.headline:eq(" + old_headline + ")").animate({top: -this.alto},"slow", function(h) {
  $(this).css('top',this.alto + 'px');
  });
  $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");  
  old_headline = current_headline;
}
}

Me temo que tengo que darle un par de vueltas más.

Muchas gracias de todas formas.