javascript - 将 rel ="lightbox"属性添加到 javascript 生成的图像链接

Question

我想有一个简单的解决方案，但 javascript 不是我的强项。这是用于在 WP 电子商务中交换产品变体图像(缩略图)的脚本的一部分。

我的灯箱效果适用于主要产品图片，但我无法在交换的缩略图上使用它(只需使用 JS 添加/删除 .hidden 类即可显示/隐藏)。

如何将 rel="lightbox"添加到交换图像中的链接？见下面的代码:

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);
    });
  });
});

提前致谢，你是最棒的!

Answer 1

只是:

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

编辑:我认为您需要将插件重新应用到克隆的元素:

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