jquery - Adding text (footer) below Fancybox gallery thumbnails -

i attempting add additional text space fancybox (v2.0.6) gallery under thumbnails footer. ideally lime green space in visual example linked below.

a visual example of i'm attempting accomplish ... http://i.stack.imgur.com/zp7fj.gif

i belive accomplish additional div within .fancybox-thumbs div class under ul list thumbnails , need add additional js query.fancybox-thumbs.js expertiese in javascript isn't enough accomplish on own.

thanks!

my current 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 divine">                         <img src="/images/thumbnail/tftd40.jpg" alt="st. john 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> 

my current options:

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

solved own problem.

a few changes jquery.fancybox-thumbs.js along few additions jquery.fancybox-thumbs.css did trick.

below original section of 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); 

the replacement section of 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>'); 

the additions jquery.fancybox-thumbs.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; }