Бесконечная модификация заголовка карусели - PullRequest
Новая
       27

Бесконечная модификация заголовка карусели

2 голосов
/ 17 августа 2011

У меня есть бесконечная функция Карусели, примененная к серии изображений здесь: http://nokkam.com/showcase.html У меня была просьба сделать так, чтобы подписи появлялись «из образа»… тьфу. Так как div текстового поля, созданный сценарием, основан на высоте изображений, мой метод попытки изменить его позиционирование потерпел неудачу (я предполагаю, что его сбой основывался на математике высоты, не уверен). Я нашел текстодержатель в firebug и попытался дать ему значение "bottom: -80px", но безрезультатно. Кажется, он просто исчез за каким-то другим элементом. Кажется, он все еще там, просто не виден. Затем я подумал, что я могу быть элементом «слайд-контейнера», препятствующим его видимости, поэтому я довольно резко отрегулировал его высоту, чтобы обнаружить, что он все еще не виден. Мой вопрос: возможно ли каким-то образом изменить какой-либо аспект скрипта или его переменных, чтобы получить текстодержатель под фактическим слайд-шоу? Любая помощь, как всегда, очень ценится.

ПРЕДСТАВЛЯЮЩИЕ ЧАСТИ СКРИПТА 

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

1 Ответ

1 голос
/ 17 августа 2011 
#carousel {
  padding-bottom: 62px;
}

Это должно сделать это ... Я думаю,

...