jQuery Gallery,为图像添加A HREF属性?

时间:2010-11-13 17:45:49

标签: jquery html image gallery href

我最近下载了一个用于网站的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知识是基本的,所以我不确定如何。任何帮助将不胜感激!如果您还需要更多信息,请询问。

1 个答案:

答案 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.
            });
    });

JS Fiddle demo