我最近下载了一个用于网站的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
当我这样做时，图像链接到其他图像，就像我想要它们一样，但画廊被破坏了。
之前：http://www.h-3.abload.de/img/3dg4n.png
之后：http://wwwh-3.abload.de/img/2ce8p.png
我确信有一种方法可以做到这一点，但我的jQuery知识是基本的，所以我不确定如何。任何帮助将不胜感激！如果您还需要更多信息，请询问。
答案 0 :(得分：0)
这很有效（但是，坦率地说，考虑到字符串操作的笨拙，我为此感到羞耻）：
$(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.
});
});