[Resolvido] Slider com "progress bar"

[Etiqueta]

Boa tarde,

Tenho um slider que quando a imagem está activa aparece o seguinte css:

z-index: 10; display: block;

a hiperligação da imagem tem um atributo "slidesjs-index=1" e vai incrementando e subtraindo consoante o slider activo,

o que queria fazer era: Quando hiperligação da imagem tivesse com o css z-index: 10; display: block; e slidesjs-index=1, uma div fica-se com um tamanho. Quando se muda-se a imagem o tamanho desta div ida alterando consoante o tamanho que lhe desse.

Estou a fazer a seguinte maneira:

var script_tag = document.createElement('a');

  if (script_tag.setAttribute("slidesjs-index","1").css({
			    display: "block",
			    left: c * this.options.width,
			    zIndex: 10
		    });


  ){
   alert("sxfgsdfg");
  }

Isto não dá resultado. Alguém consegue dar-me umas luzes, please?

Obrigada.

[Etiqueta]

bom dia,

tenho isto:

$(document).ready(function(){
$(".nextSlide").click(function(){
$(".Dprog").addClass("blue");
});
});

quando clica na seta next, a div Dprog fica com o seguinte css

.blue
{
background-color: #0000FF;
height: 2%;
position: absolute;
width: 20%;
}

mas como faço para que no javascript diga que a Div aumenta se o next for clicado e se o slider X tiver com o css:

display: block;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10

cada imagem do slider tem uma hip+erligaçao (<a>) e esse css de cima é para a hiperligação.

Alguém me pode ajudar?

obrigada.

A div Dprog terá um tamanho diferente para casa slider activo

Edited May 28, 2014 at 09:50 AM by Etiqueta

[Etiqueta]

tenho o seguinte código:

$(document).ready(function(){
var eCap1 = $('.slidesjs-control #Cap1');
var valor = 0;
var valorProg = 0;
var contador = 0;

valor = eCap1.length;
alert(valor);
valorProg = 100 / valor;
alert(valorProg);


$(".nextSlide").click(function(){
for (var i = 0; i < valor; i++ ) {
var width = $(this).css("width");
contador += valorProg;
alert(contador);
$(".Dprog").html("<div style='width:" + contador +"%;'></div>");
}
});

});

clico no botão next e corre o ciclo todo.

O que pretendo é apresentar o valor do contador a cada cick.

alguma ajuda?

Edited May 28, 2014 at 10:51 PM by Etiqueta

[Etiqueta]

O código que tenho actualmente:

           $(".nextSlide").click(function(){
                       contador += valorProg;
                       alert(contador);
                       $(".Dprog").css("width:" + contador +"%;");
           });

o contador está a incrementar a cada botão next. O que pertendo agora é que só incremente quando as imagens tiverem o ID=Cap1.

Alguma ajuda?

Obrigada

[bioshock]

Se conseguisses colocar o código do que estás a tentar fazer no jsfiddle era o ideal para obteres ajuda.

[Etiqueta]

como verifico se uma propriedade de uma elemento tem um determinado valor?

if ($("slidesjs-control").attr("slidesjs-index") == 2)
		{
			alert("ccccccc");
		}

o HTML é assim:

<a class="slidesjs-slide" data-lightbox="roadtrip" href="img/Slider/2.png" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; display: block;" slidesjs-slide="2" slidesjs-index="2">


  <img id="Cap0" class="imgslider2" usemap="#imap_2" src="img/Slider/2.png">
</a>

Edited May 30, 2014 at 11:17 AM by Etiqueta

[yoda]

Estás bem perto, só te falta um ponto :

$(".slidesjs-control").attr("slidesjs-index")

[Etiqueta]

mesmo com essa correcção, não me aparece o alert

[yoda]

Pois, porque nem o nome da classe está bem, só agora reparei .. de resto tem de funcionar.

[Etiqueta]

já funcionou. Obrigada pela ajuda nesta parte