添加的rel =「收藏夾」屬性的JavaScript生成的圖像鏈接

我想有一個簡單的解決方案，這一點，但JavaScript是不是我的身邊。這是在WP電子商務中交換產品差異圖像（拇指）的腳本的一部分。添加的rel =「收藏夾」屬性的JavaScript生成的圖像鏈接

我的收藏影響作品爲主要產品的形象，但我不能讓它工作在交換的縮略圖（通過簡單地添加/刪除與JS一個.hidden類，這是顯示/隱藏）。

如何添加的rel =「收藏夾」的鏈接在交換的圖像？見下面的代碼：

jQuery(function($){ 
$("div.wpsc_variation_forms select.wpsc_select_variation").change(function() { 
    var productForm = $(this).parents("form.product_form"); 

    var data = { 
     action: 'get_variation_image_url', 
     form_values: $("input[name=product_id],div.wpsc_variation_forms select.wpsc_select_variation", productForm).serialize() 
    }; 

    var productColumn = productForm.parent(".productcol"); 
    var imageColumn = productColumn.siblings("div.imagecol"); 

    imageColumn.css("opacity", 0.5); 

    jQuery.post(wpsc_ajax.ajaxurl, data, function(response) { 
     var data = $(response.split(/\n/)); 

     if(response == ""){ 
      data = $([]); 
     } 

     var images = imageColumn.children(); 

     if(images.length == 0){ 
      imageColumn.css("opacity", 1); 
      return; 
     } 

     var hiddenImages = images.filter(".hidden"); 
     var visibleImages = images.not(".hidden"); 

     var imageColumnContainsVariationImages = hiddenImages.length > 0; 

     if(imageColumnContainsVariationImages){ 
      var variationImages = visibleImages; 
      variationImages.remove(); 
     } else { 
      var originalImages = visibleImages; 
      originalImages.hide().addClass("hidden"); 
     } 

     var newVariationImageShouldBeAdded = data.length > 0; 

     if(newVariationImageShouldBeAdded){ 
      data.each(function(){ 
       var imageUrl = this.split("***"); 
       var imageLink = images.first().clone(true).removeClass("hidden"); 

       imageLink.attr("href", imageUrl[0]); 

       var image = imageLink.find("img"); 
       image.removeAttr("src"); 
       image.attr("src", imageUrl[1]); 

       imageLink.show().appendTo(imageColumn); 
      }); 
     } else { 
      images.show().removeClass("hidden"); 
     } 

     imageColumn.css("opacity", 1); 
    }); 
    }); 
});

非常感謝，你是最好的！

來源

2011-08-20 Eirik

：分享一些HTML markup.Were要添加「相對」的輸出應該是這樣的，其元素 – Gowri

： '' – Eirik

剛：

imageLink.attr("rel", "lightbox");

編輯：我認爲你需要將插件重新應用到克隆的元素：

imageLink.attr("rel", "lightbox").lightbox();

來源

2011-08-20 13:24:45 karim79

這就是我本來以爲，但我似乎並沒有正常工作（只是在沒有燈箱效果的新窗口中打開大圖）。 – Eirik

@Eirik - 我覺得插件需要重新應用，請看到我的編輯。 – karim79

感謝卡里姆，但我恐怕沒有奏效。實際上，在將代碼添加到代碼後，交換後的圖像完全不顯示。 PS：我現在在原始文章中添加了完整的插件腳本。 – Eirik

這是另一種屬性，所以你可以使用.attr爲好。 .attr也支持作爲對象傳遞多個屬性。你也可以結合鏈接。最後，.attr覆蓋現有的屬性，所以.removeAttr是多餘的。

if(newVariationImageShouldBeAdded){ 
     data.each(function(){ 
      var imageUrl = this.split("***"); 

      var imageLink = images.first() 
            .clone(true) 
            .removeClass("hidden") 
            .attr({ href: imageUrl[0], 
              rel: "lightbox" }) 
            .show() 
            .appendTo(imageColumn); 

      var image = imageLink.find("img") 
           .attr("src", imageUrl[1]); 
     });

來源

2011-08-20 13:26:50 pimvdb

這應做到：

if (newVariationImageShouldBeAdded) { 
    data.each(function() { 
     var imageUrl = this.split("***"), 
      imageLink = images.first().clone(true).removeClass("hidden"); 

     imageLink.attr("href", imageUrl[0]); 

     var image = imageLink.find("img"); 
     image.removeAttr("src"); 
     image.attr("src", imageUrl[1]); 
     image.attr("rel", "lightbox"); 

     imageLink.show().appendTo(imageColumn); 
    }); 
}

讓我知道，如果那好吧 - 也許會需要，如果不採取看看其他的代碼？

來源

2011-08-20 13:28:57 Ben

謝謝，但沒有運氣。大圖像只是在一個空白的新窗口中打開，沒有應用燈箱效果。 – Eirik

我們可以看看代碼正在運行的頁面嗎？ – Ben

添加的rel =「收藏夾」屬性的JavaScript生成的圖像鏈接

回答

相關問題