Galerie jQuery, ajout d'un attribut HREF aux images?

Question

J'ai récemment téléchargé une galerie jQuery pour une utilisation sur un site Web. Tout fonctionne bien, mais je veux que les images montrées dans la galerie soient des liens vers d'autres images (de qualité supérieure). Voici le code pour la galerie en vedette sur mon site, 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) 

Maintenant, le code html pour la galerie 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> 

Le premier lien j'ai ajouté un a href à juste vous montre où je veux que les images lient. Chaque image doit être liée à une image différente.

Maintenant, j'ai essayé d'ajouter un comme indiqué ici attribut a href aux images dans la liste,:

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

Quand je fais cela, les images contiennent un lien vers d'autres images, comme je veux eux aussi, mais la galerie est détruite.

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

Après: http://wwwh-3.abload.de/img/2ce8p.png

Je suis sûr qu'il ya un moyen de faire ce droit, mais ma connaissance jQuery est de base, donc je ne suis pas sûr de savoir comment. Toute aide serait grandement appréciée! Si vous avez besoin de plus d'informations, il suffit de demander.

Answer 1

Cela fonctionne (mais, franchement, je suis honte, étant donné la clunkiness des manipulations de cordes):

$(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.