CODEWITHSUNDEEP
javascriptjquerye-commercewordpress
Eirik
Eirik

Reputation: 31

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.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 a lot in advance, you are the best!

Upvotes: 2

Views: 2035

Answers (3)

Ben
Ben

Reputation: 702

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?

Upvotes: 1

karim79
karim79

Reputation: 342655

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

Upvotes: 2

pimvdb
pimvdb

Reputation: 154848

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

Upvotes: 1

Related Questions