Добавление текста (нижний колонтитул) ниже Fancybox gallery thumbnails

Question

Я пытаюсь добавить дополнительное текстовое пространство в мою галерею Fancybox (v2.0.6) под эскизами, почти как нижний колонтитул. Идеально, как зеленое пространство извести в визуальном примере, приведенном ниже.

визуальный пример того, что я пытаюсь выполнить ... http://i.stack.imgur.com/zP7fj.gif

Я верю, чтобы сделать это было бы дополнительным ДИВ в классе сНу .fancybox-тумб под списком уль, который эскизы и для этого мне нужно добавить дополнительные js в query.fancybox-thumbs.js, но мой опыт в javascript недостаточно хорош, чтобы выполнить его самостоятельно.

Спасибо!

Мой текущий HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 

<link rel="stylesheet" href="/css/jquery.fancybox.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="/js/jquery.fancybox.pack.js"></script> 

<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox-thumbs.css" /> 
<script type="text/javascript" src="/js/jquery.fancybox-thumbs.js"></script> 
<div id="gallery"> 
      <div class="gallery_row"> 
       <div class="gallery_thumbnail"> 
        <a href="/images/gal_l/TftD40.jpg" class="fancybox-thumbs" rel="gallery_cityscape" title="St. John the Divine"> 
         <img src="/images/Thumbnail/TftD40.jpg" alt="St. John the Divine"/></a> 
        </div> 
       <div class="gallery_thumbnail"> 
        <a href="/images/gal_l/TftD41.jpg" class="fancybox-thumbs" rel="gallery_cityscape" title="Cloisters"> 
         <img src="/images/Thumbnail/TftD41.jpg" alt="Cloisters"/></a> 
        </div> 
       <div class="gallery_thumbnail"> 
        <a href="/images/gal_l/TftD42.jpg" class="fancybox-thumbs" rel="gallery_cityscape" title="Reflecting Pool in Paris"> 
         <img src="/images/Thumbnail/TftD42.jpg" alt="Reflecting Pool in Paris"/></a> 
        </div> 
       <div class="gallery_thumbnail"> 
        <a href="/images/gal_l/TftD43.jpg" class="fancybox-thumbs" rel="gallery_cityscape" title="Champs-Elysees"> 
         <img src="/images/Thumbnail/TftD43.jpg" alt="Champs-Elysees"/></a> 
        </div> 
       </div> 
      </div> 

Мои текущие параметры:

<script> 
    $(document).ready(function() { 

     $('.fancybox').fancybox(); 

     $('.fancybox-thumbs').fancybox({ 
      prevEffect : 'none', 
      nextEffect : 'none', 

      closeBtn : true, 
      arrows : true, 
      nextClick : true, 

      helpers : { 
       thumbs : { 
        width : 50, 
        height : 50 
       } 
      } 
     }); 
    }); 
</script> 

Answer 1

решаемые мою собственную проблему.

Несколько изменений в jquery.fancybox-thumbs.js вместе с несколькими дополнениями к jquery.fancybox-thumbs.css сделали трюк.

Ниже приводится оригинальный раздел jquery.fancybox-thumbs.js

this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position || 'bottom').appendTo('body'); 
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap); 

Замена секции jquery.fancybox-thumbs.js

this.wrap = $('<div id="fancybox-thumbs-container"></div>').addClass(opts.position || 'bottom').appendTo('body'); 
$('<div id="fancybox-thumbs"></div>').addClass(opts.position || 'bottom').appendTo(this.wrap); 
this.list = $('<ul>' + list + '</ul>').appendTo("#fancybox-thumbs"); 
$("#fancybox-thumbs").after('<div class="gallery_slideshow_footer"><h4>Text Goes Here.</h4></div>'); 

Дополнения к jquery.fancybox-превью .css

.gallery_slideshow_footer { 
position: fixed; 
left: 0; 
bottom: 0px; 
width: 100%; 
overflow: hidden; 
z-index: 9999; 
height: 16px; 
padding: 4px; 
background-color: #4f4b4b; 
} 

.gallery_slideshow_footer h4 { 
text-align: center; 
font-weight: bold; 
font-size: 11px; 
margin-top: 2px; 
color: #FFFFFF; 
text-transform: uppercase; 
} 

#fancybox-thumbs.bottom { 
bottom: 30px; 
}