Добавление атрибута rel = "lightbox" в ссылку на изображение, сгенерированное javascript - PullRequest
Новая
       17

Добавление атрибута rel = "lightbox" в ссылку на изображение, сгенерированное javascript

2 голосов
/ 20 августа 2011

Я думаю, что есть простое решение, но я НЕ являюсь моей сильной стороной. Это часть скрипта, созданного для обмена изображениями вариантов продукта (превью) в электронной коммерции WP.

Мои эффекты лайтбокса работают для основного изображения продукта, но я не могу заставить его работать с замененными миниатюрами (которые отображаются / скрываются простым добавлением / удалением скрытого класса с помощью JS).

Как я могу добавить 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);
    });
  });
});

Заранее большое спасибо, ты лучший!

Ответы [ 3 ]

3 голосов
/ 20 августа 2011

Просто: 

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

РЕДАКТИРОВАТЬ: Я думаю, вам нужно будет повторно применить плагин к клонированному элементу: 

imageLink.attr("rel", "lightbox").lightbox();
1 голос
/ 20 августа 2011

Это должно сделать это: 

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

Дайте мне знать, если это нормально - возможно, нужно будет взглянуть на другой код, если это не так?

1 голос
/ 20 августа 2011

Это еще один атрибут, поэтому вы также можете использовать .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]);
        });
...