Галерея jQuery, добавление атрибута HREF к изображениям?

Недавно я загрузил галерею jQuery для использования на веб-сайте. Все работает нормально, но я хочу, чтобы изображения, показанные в галерее, были ссылками на другие изображения (более высокого качества). Вот код галереи на моем сайте www.mindsparkdesigns.com.

(function($){
var settings = {
    width: 940,
    height: 252,
    thumbWidth: 50,
    thumbHeight: 50,
    thumbOpacity: 0.4,
    thumbHoverOpacity: 1,
    displayAlt: true
}

$.uGallery = function(userSettings){
    var images = [];
    $.extend(settings, userSettings);
    // parse input structure to images
    $("ul.gal>li>img").each(function(index, element){
        images[index] = $(element)
            .css({width: element.width+"px", height: element.height+"px"})
            .attr("a href", $(element).attr("a href"))
            .attr("src", $(element).attr("src"))
            .attr("alt", $(element).attr("alt"));

    });
    // recreate gallery structure using divs
    $("ul.gal").replaceWith("<div class='gal'><div class='gal-thumbs'></div><div class='gal-main-viewer'></div></div>");
    for(var i = 0; i < images.length; i++){ // fill it with images
        $("div.gal-thumbs").append(makeThumb(images[i]));
    }
    $("div.gal-thumbs>img").wrap("<div class='gal-thumb'><div class='gal-thumb-padder'></div></div>");
    // display the first thumb image in main viewer
    $("div.gal-thumbs>div.gal-thumb>div.gal-thumb-padder:first>img").trigger('click');
    // style the gallery
    setupCSS(images);
    // fade thumbs to the initial state
    $("div.gal-thumb-padder>img").fadeTo("slow", settings.thumbOpacity);
    // add thumb highlight onmouseover behaviour
    $("div.gal-thumb-padder>img").hover(
        function(){ $(this).fadeTo("fast", settings.thumbHoverOpacity); }, 
        function(){ $(this).fadeTo("slow", settings.thumbOpacity); }
    );
}

/**
 * creates proportionally resized image with onclick showing full image in image viewer
 */
makeThumb = function(img){
    var image = $("<img src='"+$(img).attr("src")+"' alt='"+$(img).attr("alt")+"' />");
    image.css({width: "127px", height: "50px" });
    image.css({msInterpolationMode: "bicubic"}); // smooth out thumbs in IE7
    image.bind("click", img, function(e){
        var image = $("<img src='"+$(img).attr("src")+"' alt='"+$(img).attr("alt")+"'  />");
        //image.css(proportionalDimensions(img, {x: settings.width - 20, y: settings.height - 20}));
        var alt = $("<div class='gal-alt'>"+$(img).attr("alt")+"</div>");
        alt.css({
            clear: "both", 
            width: 640 +"px", 
            padding: "10px", 
            "background-color": "black", 
            "margin": "auto",
            color: "white",
            textAlign: "left"
        });
        alt.fadeTo("fast", 0.75);
        $("div.gal-main-viewer").fadeOut("slow", function(){
            $(this).html(image).hide().fadeIn("slow").append(alt);
            if(settings.displayAlt){
                $("div.gal-alt").animate({marginTop: "-47px"}, 600);
            }
        });
    });
    return image;
}


/**
 * style the gallery
 */
setupCSS = function(images){
    $("div.gal-thumb").css({
        float: "left", 
        width: settings.thumbWidth+"px", 
        height: settings.thumbHeight+"px", 
        "text-align": "center", 
        "margin": "5px 5px 0px 0px",
        border: "1px solid #343434",
        padding: "5px",
        overflow: "hidden"
    });

    $("div.gal-thumb-padder").css({
        margin: "auto",
        width: settings.thumbWidth-5+"px",
        height: settings.thumbHeight-2+"px",
        overflow: "hidden"
    });

    $("div.gal").css({
        width: "940px",
        overflow: "hidden",
        marginLeft: "30px",
        marginTop: "10px"
    });

    $("div.gal-main-viewer").css({
        width: "640px", 
        height: "252px", 
        "text-align": "center",
        overflow: "hidden",
        margin: "auto",
        float: "right",
        border: "3px solid #141414",
        marginTop: "5px"
    });

    $("div.gal-thumbs-wrapper").css({
        width: settings.width-20+"px", 
        margin: "auto", 
        overflow: "hidden",
        "padding-top": "5px",
        "padding-bottom": "10px"
    });

    $("div.gal-thumbs").css({ 
        width: "240px",
        height: "260px",
        overflow: "auto",
        float: "left",
    });

    $("div.gal-thumb>img").css("background-color", "black");
}
})(jQuery)

Теперь html-код для div-галереи:

     <div id="gall">
    <p class="gallery-name">Portfolio</p>
    <ul class="gal">
        <li><a href="images/gowang-logo-big.jpg"><img src="images/gowang-logo.jpg" class="gal-image" title="Logo for Gowang Adventures" alt="Logo design for the Gowang Adventures video game"/></a></li>
        <li><img src="images/gowang.jpg" class="gal-image" title="Gowang Adventures Box Art" alt="A concept video-game box art for Gowang Adventures"/></li>
        <li><img src="images/magical.jpg" class"gal-image" title="Magical" alt="Personal logo for a Video Game Box Artist"/></li>
        <li><img src="images/roaring.jpg" class"gal-image" title="Roaring Arts" alt="Logo design for an online art event"/></li>
        <li><img src="images/zelda.jpg" class"gal-image" title="Zelda Treasure Scroll" alt="Concept video game logo for personal project"/></li>
        <li><img src="images/eyeronic-logo.jpg" class="gal-image" title="Eyeronic Surf Team logo" alt="Logo for Eyeronic Surf Team"/></li>       
        <li><img src="images/mycheal-logo.jpg" class="gal-image" title="Mycheal McQureerirais" alt="Personal logo for Game Designer Mycheal McQureerirais"/></li>
        <li><img src="images/mycheal-card.jpg" class="gal-image" title="Mycheal McQureerirais" alt="Business Card for Game Designer Mycheal McQureerirais"/></li>
        <li><img src="images/girard-logo.jpg" class="gal-image" title="Girard Home Interiors" alt="Company logo for Girard Custom Home Interiors"/></li>  
    </ul>

    </div>

К первой ссылке я добавил a href, просто чтобы показать вам, где я хочу, чтобы изображения были связаны. Каждое изображение должно быть связано с другим изображением.

Теперь я попытался добавить атрибут a href к изображениям в списке, как показано здесь:

http://www.h-3.abload.de/img/1qe2s.png

Когда я это делаю, изображения ссылаются на другие изображения, как я и хочу, но галерея уничтожается.

До: http://www.h-3.abload.de/img/3dg4n.png

После: http://wwwh-3.abload.de/img/2ce8p.png