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

У меня есть бесконечная функция карусели, примененная к серии изображений здесь: 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 -->


person visyoual    schedule 17.08.2011    source источник


Ответы (1)


#carousel {
  padding-bottom: 62px;
}

Это должно сработать... я думаю

person Joseph Marikle    schedule 17.08.2011
comment
ВОТ ЭТО ДА. Опять же, самая маленькая вещь делает именно то, что мне нужно, отличное решение. Я думал, что текстхолдер должен быть скорректирован. Снова учился… Спасибо!! - person visyoual; 17.08.2011