Change jquery thumbnail viewer to show background instead of image to write text over it
<p>I found a thumbnail viewer jquery utility on the web.  It works great except I need to put text over the image that shows on hover.  The only way I know to do this is to make it display the image as background and then I can write text over it.  I cannot figure out how to modify this code to make that happen.  Also, the dimensions of each image could be different.  Can I make the background image keep the aspect ratio?  This is the code:</p>

<pre><code>jQuery.noConflict()

jQuery.thumbnailviewer2={
        loadmsg: '&lt;img src="spinningred.gif" /&gt;&lt;br /&gt;Loading Large Image...', //HTML for loading message. Make sure image paths are correct

    /////NO NEED TO EDIT BEYOND HERE////////////////

    dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
    buildimage:function($, $anchor, setting){
        var imghtml='&lt;img src="'+$anchor.attr('href')+'" style="border-width:0" /&gt;'
        if (setting.link)
            imghtml='&lt;a href="'+setting.link+'"&gt;'+imghtml+'&lt;/a&gt;'
        imghtml='&lt;div&gt;'+imghtml+((setting.enabletitle!='no' &amp;&amp; $anchor.attr('title')!='')? '&lt;br /&gt;'+$anchor.attr('title') : '')+'&lt;/div&gt;'
        return $(imghtml)
    },

    showimage:function($image, setting){
        $image.stop()[setting.fxfunc](setting.fxduration, function(){
            if (this.style &amp;&amp; this.style.removeAttribute)
                this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
        })
    }

}


jQuery.fn.addthumbnailviewer2=function(options){
    var $=jQuery

    return this.each(function(){ //return jQuery obj
        if (this.tagName!="A")
            return true //skip to next matched element

        var $anchor=$(this)
        var s=$.extend({}, $.thumbnailviewer2.dsetting, options) //merge user options with defaults
        s.fxfunc=(s.fx=="fade")? "fadeIn" : "show"
        s.fxduration=(s.fx=="none")? 0 : parseInt(s.fxduration)
        if (s.preload=="yes"){
            var hiddenimage=new Image()
            hiddenimage.src=this.href
        }
        var $loadarea=$('#'+s.targetdiv)
        var $hiddenimagediv=$('&lt;div /&gt;').css({position:'absolute',visibility:'hidden',left:-10000,top:-10000}).appendTo(document.body) //hidden div to load enlarged image in
        var triggerevt=s.trigger+'.thumbevt' //"click" or "mouseover"
        $anchor.unbind(triggerevt).bind(triggerevt, function(){
            if ($loadarea.data('$curanchor')==$anchor) //if mouse moves over same element again
                return false
            $loadarea.data('$curanchor', $anchor)
            if ($loadarea.data('$queueimage')){ //if a large image is in the queue to be shown
                $loadarea.data('$queueimage').unbind('load') //stop it first before showing current image
            }
            $loadarea.html($.thumbnailviewer2.loadmsg)
            var $hiddenimage=$hiddenimagediv.find('img')
            if ($hiddenimage.length==0){ //if this is the first time moving over or clicking on the anchor link
                var $hiddenimage=$('&lt;img src="'+this.href+'" /&gt;').appendTo($hiddenimagediv) //populate hidden div with enlarged image
                $hiddenimage.bind('loadevt', function(e){ //when enlarged image has fully loaded
                    var $targetimage=$.thumbnailviewer2.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
                    $loadarea.empty().append($targetimage) //show enlarged image
                    $.thumbnailviewer2.showimage($targetimage, s)
                })
            $loadarea.data('$queueimage', $hiddenimage) //remember currently loading image as image being queued to load
            }

            if ($hiddenimage.get(0).complete)
                $hiddenimage.trigger('loadevt')
            else
                $hiddenimage.bind('load', function(){$hiddenimage.trigger('loadevt')})
            return false
        })
    })
}

jQuery(document).ready(function($){
    var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
    $anchors.each(function(i){
        var options={}
        var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
        for (var i=0; i&lt;rawopts.length; i++){
            var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
            options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
        }
        $(this).addthumbnailviewer2(options)
    })
})
</code></pre>
