2

ここで、一連の画像に無限のカルーセル機能を適用しています: http://nokkam.com/showcase.html キャプションを「画像の邪魔にならないように」表示するようにというリクエストがありました…うーん。スクリプトによって作成されたテキストホルダー div は画像の高さに基づいているため、その位置を変更しようとする私の方法は失敗しました (高さの計算に基づいて失敗したと仮定していますが、よくわかりません)。firebug でテキストホルダーを見つけ、「bottom:-80px」の値を指定しようとしましたが、無駄でした。他の要素の背後に消えているようです。目に見えないだけで、まだそこにあるように見えます。次に、「slidecontainer」要素が表示されないようにしているのではないかと考えたので、高さをかなり大幅に調整して、まだ表示されていないことを確認しました。私の質問は：実際のスライドショーの下にテキストホルダーを生成するために、スクリプトまたはその変数の一部を変更することは可能ですか? いつものように、どんな助けでも大歓迎です。

スクリプトの関連部分

   (function($){
    $.fn.extend({ 
        infiniteCarousel: function(options)
        {
            var defaults = 
            {
                transitionSpeed : 1000,
                displayTime : 6000,
                textholderHeight : .15,
                displayProgressBar : 1,
                displayThumbnails: 0,
                displayThumbnailNumbers: 0,
                displayThumbnailBackground: 0,
                thumbnailWidth: '20px',
                thumbnailHeight: '20px',
                thumbnailFontSize: '.65em'
            };

// Build textholder div thats as wide as the carousel and 20%-25% of the height
$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
$('#textholder'+randID).width(imgWidth-(correctTHWidth*2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#ccc','opacity':'0.9'});                showtext($('li:eq(1) p', obj).html());

HTML

<div id="slidecontainer">
<div id="carousel">
<ul>
  <li><img alt="midrar sports logo design, custom bag and banner" src="/assets/images/1.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Midrar Sports Management LLC, Jordan <br/>
    <span>Category:</span> Brand Consultancy<br/>
    <span>Description:</span> Branding Strategy and Collateral Printed Materials</p>
  </li>
  <li><img alt="Nissan North America large format poster on white wall" src="/assets/images/2.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Nissan North America <br/>
    <span>Category:</span> Design and Large Format Printing<br/>
    <span>Description:</span>  Nissan Poster Design and Large Format Printing</p>
    </li>
    <li><img alt="Natural Pick Tea packaging design cinnamon and green tea varieties" src="/assets/images/3.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Natrual Pick Brand | Sri Lanka and USA <br/>
    <span>Category:</span> Brand Consultancy, Package Design<br/>
    <span>Description:</span> Naming, Design Strategy for the Development of Brand Identity and Packaging Design for 13 Varieties of Tea</p>
    </li>
    <li><img alt="" src="/assets/images/4.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Plateau Systems<br/>
    <span>Category:</span> Conferences and Trade Shows<br/>
    <span>Description:</span> Conference at San Francisco | Designed entire look/feel/tone/collateral materials + Printing &amp; Execution of entire package including Large format posters, Name Tags, Backdrops and Conference Guide</p>
    </li>   
    </ul>
</div> <!-- END CAROUSEL -->

4

1 に答える 1

1 
#carousel {
  padding-bottom: 62px;
}

それはそれを行う必要があります...私は思う

于 2011-08-17T17:02:17.937 に答える