jQuery Gallery，为图像添加HREF属性？

Question

我最近下载了一个jQuery Gallery以供在网站上使用。一切工作正常，但我希望画廊中显示的图像链接到其他（更高质量）的图像。以下是精选的我的网站画廊中的代码，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) 

现在的画廊DIV的HTML代码：

 <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

当我这样做，图像链接到其他图像，就像我希望他们也一样，但画廊已经销毁。

前：我肯定是有办法做到这一点吧，但我的jQuery的知识是基本的，所以我不知道如何http://wwwh-3.abload.de/img/2ce8p.png

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

后。任何帮助将不胜感激！如果您需要更多信息，只需询问。

Answer 1

这工作（但是，坦率地说，我很惭愧的是，给出的字符串操作的clunkiness）：

$(document).ready(
    function(){ 
     $('ul.gal > li > img') 
      .each(
       function(){ 
        var biggerSrc = $(this).attr('src'), 
         biggerSrcLength = biggerSrc.length 
         biggerHref = biggerSrc.substring(0,biggerSrcLength - 4) + '-big.jpg'; 
        $(this) 
         .wrap('<a class="biggerImg" href="'+ biggerHref +'"></a>'); 
       }); 
     $('a.biggerImg').live('click', 
      function(){ 
       // handles the click event for dynamically-added a elements. 
      }); 
    }); 

JS Fiddle demo。