Comment utiliser jquery pour ajuster les légendes des diaporamas à la volée?

Question

Je suis encore en train d'apprendre jquery et javascript alors s'il vous plait, gardez-moi. J'ai utilisé un tutoriel dans jquery pour créer un diaporama en utilisant la fonction cycle de jquery.

C'est génial et cela me permet de faire pivoter des div individuels contenant une image et une légende.

$(document).ready(function() { 
$('#gallery').cycle({ 
    fx: 'scrollRight', 
    timeout: 5000, 
    speed: 500, 
    delay: -2000, 
    pager: '#pager', 
    next: '#next', 
    prev: '#prev' 
}); 




$('#playControl').text('Play'); 

$('.credit imAgE (I had to change this because of rules for newbies').each(function(){ 
var widthSpacer = $(this).attr('width'); 
$('.credit p').css('width', widthSpacer + 10); 
}); 


$('#playControl').toggle(

     function() { 
      $('#gallery').cycle('resume'); 
      $(this).text('Pause'); 

     }, 
     function() { 
      $('#gallery').cycle('pause'); 
      $(this).text('Play'); 

     }); 

}); // end ready() 
</script> 

<div style="width: 640px;"> 


    <div id="contentWrap"> 
    <div id="main"> 

    <div id="controls"> 
    <span id="prev" class="control">Previous</span> 
    <span id="pager"></span> 
    <span id="next" class="control">Next</span> 
    <span id="playControl" class="control">Pause</span> 
    </div> 
    <div id="gallery"> 

<div class="credit"><image tag 1> 
    <p>Pic one caption</p> 
    </div> 

    <div class="credit"><image tag n"> 
    <p >Pic caption n</p> 
    </div> 

Le problème est que la largeur de la légende reste celle du conteneur. C'est correct avec des images qui couvrent toute la largeur du conteneur, mais pas si elles sont étroites.

J'ai essayé de modifier la balise <p> dans le div de sorte que sa largeur est la même que l'image, mais il ne fixe que la propriété largeur une fois pour chaque <p> dans tous les « crédit » classe div s, plutôt que cyclisme à travers chacun à son tour.

Answer 1

Vous devez donner à votre conteneur un ensemble min-width dans le CSS, et peut-être définir le width:auto. J'espère que cela pourra aider. Jouez avec votre CSS, il semble que vous pourriez être en mesure de résoudre ce problème en utilisant CSS plutôt que individuellement pour chaque diapositive en utilisant jQuery.