Adding rel="lightbox" attribute to javascript generated image link

I guess there is an easy solution to this, but javascript is NOT my strong side. This is a part of a script made for swapping product variation images (thumbs) in WP E-commerce.

My lightbox effects works for the main product image, but I can't get it working on the swapped thumbnails (which is shown/hidden by simply adding/removing a .hidden class with JS).

How can I add rel="lightbox" to the link in the swapped images? See code below:

jQuery(function($){
$("div.wpsc_variation_forms select.wpsc_select_variation").change(function() {
    var productForm = $(this).parents("form.开发者_如何学JAVAproduct_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);
    });
  });
});

Thanks a lot in advance, you are the best!

---

Just:

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

EDIT: I think you will need to re-apply the plugin to the cloned element:

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

---

It's another attribute, so you can use .attr as well. .attr also supports passing multiple attributes as an object. You could also combine the chaining. Lastly, .attr overwrites existing attributes, so .removeAttr is superfluous.

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

---

This should do it:

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

Let me know if thats ok - would maybe need to take a look at other code if it didn't?