I suppose there's a simple means to fix this, but javascript isn't my strong side. This can be a a part of a script designed for changing product variation images (thumbs) in Wordpress E-commerce.

My lightbox effects works best for the primary product image, however i can't have it focusing on the swapped pictures (that is proven/hidden simply by adding/getting rid of b .concealed class with JS).

How do i add rel="lightbox" towards the link within the swapped images? See code below:

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

Thanks ahead of time, you're the best!

This will get it done:

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

Tell me if thats ok - would maybe have to have a look at other code whether it did not?

Just:

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

EDIT: I believe you will have to re-apply the wordpress plugin towards the cloned element:

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

It's another attribute, so that you can use .attr too. .attr will also support passing multiple characteristics being an object. You might mix the chaining. Lastly, .attr overwrites existing characteristics, so .removeAttr is unnecessary.

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