Adding a title to a displaced image rollover
<p>I have a simple image gallery (main images plus 4 thumbnails which on rollover trigger the main image swap) which needs to be extended to include a caption. The image swap function works as planned but I can't figure out how to 'tweak' the JS to allow the inclusion of a caption. Ideally I'd like to be able to add a title to the thumbnail and have it display beneath the main image.</p>

<pre><code>&lt;div class="contact"&gt;
        &lt;h1&gt;Heading&lt;/h1&gt;
        &lt;div id="gallery"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;img src="images/thumbs/img_cart1.jpg" alt="" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="images/thumbs/img_cart2.jpg" alt="" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="images/thumbs/img_cart3.jpg" alt="" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="images/thumbs/img_cart4.jpg" alt="" /&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;img src="images/img_cart1.jpg" alt="" id="main-img" /&gt;

    &lt;/div&gt;

    &lt;script type="text/JavaScript"&gt;
        // prepare the form when the DOM is ready 
        $(document).ready(function() {
            $("#gallery li img").hover(function(){
                $('#main-img').attr('src',$(this).attr('src').replace('thumbs/', ''));
            });
            var imgSwap = [];
             $("#gallery li img").each(function(){
                imgUrl = this.src.replace('thumbs/', '');
                imgSwap.push(imgUrl);
            });
            $(imgSwap).preload();
        });
        $.fn.preload = function() {
            this.each(function(){
                $('&lt;img/&gt;')[0].src = this;
            });
        }

    &lt;/script&gt;
</code></pre>

<p>Any help would be greatfully received.</p>

<p>Thanks,
@rrfive</p>
