Adding text (footer) below Fancybox gallery thumbnails

Question

I am attempting to add an additional text space to my Fancybox (v2.0.6) gallery under the thumbnails almost like a footer. Ideally like the lime green space in the visual example linked below.

A visual example of what I'm attempting to accomplish ... https://i.stack.imgur.com/zP7fj.gif

I belive to accomplish this it would be an additional div within the .fancybox-thumbs div class under the ul list which is the thumbnails and to do that I would need to add additional js to query.fancybox-thumbs.js but my expertiese in javascript isn't good enough to accomplish it on my 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 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>

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>

Answer 1

Solved my own problem.

A few changes to the jquery.fancybox-thumbs.js along with a few additions to the jquery.fancybox-thumbs.css did the trick.

Below is the 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 to 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;
}