JQueryを使用して、その場でスライドショーキャプションを調整するにはどうすればよいですか？

Question

私はまだjqueryとjavascriptを学んでいるので、私と一緒に我慢してください。 jQueryのチュートリアルを使用して、jQueryのサイクル関数を使用してスライドショーを作成しました。

それは素晴らしく、画像とキャプションを含む個々のDIVを回転させることができます。

$(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>   

問題は、キャプション幅がコンテナの幅のままであることです。容器全体の幅にまたがる画像では問題ありませんが、狭い場合はそうではありません。

私は微調整しようとしてきました <p> div内のタグ幅が画像と同じになるようにしますが、幅のプロパティを1回だけ設定します <p> すべての「クレジット」クラスで divs、それぞれを順番にサイクリングするのではなく。

Answer 1

コンテナにセットを付ける必要があります min-width CSSで、そしておそらく設定します width:auto. 。それが役立つことを願っています。

CSSを使用して遊んでください、JQueryを使用して各スライドに対して個別にではなく、CSSを使用してこれを一般的に修正できるように聞こえます。