[Resolvido] Um código mais simples

[marcelo2605 10]

Uso o seguinte código no plug-in Cycle

 

$('#slide02').click(function() { 
   $('#slideshow').cycle(1); 
   return false; 
}); 

 

O problema é que são 50 slides. Existe uma forma de usar um mesmo código para todos eles, ao invés de ficar repetindo o código e trocando o nome do id e o número da sua ordem?

[Kakashi_Hatake 267]

JQuery :seta: Selectors

[marcelo2605 10]

Carlos, obrigado pela ajuda, mas estou começando jquery agora. Você poderia ser mais específico?

[Kakashi_Hatake 267]

:seta: http://api.jquery.com/attribute-contains-prefix-selector/

Attribute Contains Prefix Selector [name|=value]

 

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

 

:seta: http://api.jquery.com/attribute-contains-selector/

Attribute Contains Selector [name*=value]

 

Selects elements that have the specified attribute with a value containing the a given substring.

 

:seta: http://api.jquery.com/attribute-contains-word-selector/

Attribute Contains Word Selector [name~=value]

 

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

 

:seta: http://api.jquery.com/attribute-ends-with-selector/

Attribute Ends With Selector [name$=value]

 

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

 

:seta: http://api.jquery.com/attribute-equals-selector/

Attribute Equals Selector [name=value]

 

Selects elements that have the specified attribute with a value exactly equal to a certain value.

 

:seta: http://api.jquery.com/attribute-not-equal-selector/

Attribute Not Equal Selector [name!=value]

 

Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.

 

:seta: http://api.jquery.com/attribute-starts-with-selector/

Attribute Starts With Selector [name^=value]

 

Selects elements that have the specified attribute with a value beginning exactly with a given string.

 

Vamos ver como um deles([name^=value]) funciona...

 

$(document).ready( function( ){
$( 'button[class^="button"]' ).click( function( ){
	alert( $( this ).val( ) );
});
});

 

<button class="button1" value="1">Botão 1
<button class="button2" value="2">Botão 2
<button class="button3" value="3">Botão 3
<button class="button4" value="4">Botão 4
<button class="other" value="4">Botão 5

 

Ele vai "pegar" todos os buttons que possuem o atributo class com com um valor inicial expecífico, neste caso seria o button.

 

Todos os buttons criados que não possuem este valor inicial(button) no atributo class, não serão incluidos.

[marcelo2605 10]

Tentei isso:

 

var $container = $('#mycarousel')

$container.children().each(function(i) { 
   $('.button0' +(i+1)).click(function(){
$('#slideshow').cycle(i);	
return false;  
});});

 

mas não deu certo.

[William Bruno 1501]

mostre como é o seu html.

[marcelo2605 10]

 <div id="slideshow">
   <div><img src="images/slide00.jpg" width="1024" height="672"/></div>
   <div><img src="images/slide01.jpg" width="1024" height="672"/></div>
   <div><img src="images/slide02.jpg" width="1024" height="672"/></div>
   <div><img src="images/slide03.jpg" width="1024" height="672"/></div>
   <div><img src="images/slide04.jpg" width="1024" height="672"/></div>
</div>

<div id="menu">
 <ul id="mycarousel" class="jcarousel-skin">
   <li id="slide00"><img src="images/thumb00.jpg" width="84" height="55"/></li>
   <li id="slide01"><img src="images/thumb01.jpg" width="84" height="55"/></li>
   <li id="slide02"><img src="images/thumb02.jpg" width="84" height="55"/></li>
   <li id="slide03"><img src="images/thumb03.jpg" width="84" height="55"/></li>
   <li id="slide04"><img src="images/thumb04.jpg" width="84" height="55"/></li>
   <li id="slide05"><img src="images/thumb05.jpg" width="84" height="55"/></li>
   <li id="slide06"><img src="images/thumb06.jpg" width="84" height="55"/></li>
</ul>
</div>

[William Bruno 1501]

quem é o elemento #slide02 ?

e oque tem a ver o carousel com o cycle ?

[marcelo2605 10]

Estou usando os dois Plug-ins: o Cycle para o slideshow e o Caroussel para os thumbs das imagens do slidehow

 

Cada li do Caroussel é o thumb da respectiva imagem do div do Cycle. O id #slide + número usei para o código:

 

$('#slide00').click(function() { 
   $('#slideshow').cycle(0); 
   return false; 
}); 

[William Bruno 1501]

Ok, entendi.

 

Teste o seguinte:

$('#mycarousel li').click(function(){
    $('#slideshow').cycle( $( this ).index() ); 
});

[marcelo2605 10]

Funcionou! Valeu!