在JQuery List Rotator中鏈接幻燈片文本

Question

我正在嘗試修改jQuery List Rotator，因為作者似乎放棄了該項目。 默認情況下，可以對幻燈片圖像進行超鏈接，但是，幻燈片頂部上方顯示的文本不會被超鏈接。 我已經找到解決方案的一部分。

我將結果div包裹在一個錨標簽中。 我弄清楚了代碼中修改href屬性的位置，至少如果我為鏈接添加靜態文本，它似乎可以正常工作。 我無法確定的是如何將為圖像指定的超鏈接應用於包裹文本div的新錨標記。

    //init main screen
    ListRotator.prototype.initMainScreen = function() {
        var content =  "<div class='preloader'></div>\
                        <div class='timer'></div>\
                        <div class='textbox'>\
                            <a href='#'>\
                            <div class='inner-bg'></div>\
                            <div class='inner-text'></div>\
                            </a>\
                        </div>\
                        <div class='cpanel'>\
                            <div class='play-btn'></div>\
                            <div class='num-info'></div>\
                        </div>";
        this._$screen.append(content).css({width:this._screenWidth, height:this._screenHeight});
        this._$preloader = this._$screen.find(">.preloader");
        this.initTimerBar();
        this._$textBox = this._$screen.find(">.textbox");
        this._$innerText = this._$textBox.find(".inner-text");

        this._$strip = $("<div class='strip'></div>");
        if (this._defaultEffect == "h.slide") {
            this._$screen.append(this._$strip);
            this._$strip.css({width:2*this._screenWidth, height:this._screenHeight});
            this._$listItems.removeAttr("effect");
        }
        else if (this._defaultEffect == "v.slide"){
            this._$screen.append(this._$strip);
            this._$strip.css({width:this._screenWidth, height:2*this._screenHeight});
            this._$listItems.removeAttr("effect");
        }
        else {
            this._$mainLink = $("<a href='#'></a>");
            this._$screen.append(this._$mainLink);
        }
        this.initCPanel();          
    }

    //update text box
    ListRotator.prototype.updateText = function(e) {
        var that = e.data.elem;
        if (!that._$textBox.data("visible")) {
            that._$textBox.data("visible", true);
            var text = that._$listItems.eq(that._currIndex).find(">div:hidden").html();

            //alert(that._$textBox.data("imgurl"));
            if (text && text.length > 0) {          
                var data = that._$listItems.eq(that._currIndex).data("textbox");
                that._$innerText.css("color",data.color);
                that._$textBox.find(">.inner-bg").css({"background-color":data.bgcolor, height:data.h+2});
                that._$textBox.find("a").attr('href', 'IWantTheDynamicLinkHere.html');  ///////////////////////
                switch(TEXT_EFFECTS[that._textEffect]) {
                    case TEXT_EFFECTS["fade"]:
                        that.fadeInText(text, data);
                        break;
                    case TEXT_EFFECTS["down"]:
                        that.expandText(text, data, {width:data.w, height:0}, {height:data.h});
                        break;
                    case TEXT_EFFECTS["right"]:
                        that.expandText(text, data, {width:0, height:data.h}, {width:data.w});
                        break;
                    case TEXT_EFFECTS["left"]:
                        that.expandText(text, data, {"margin-left":data.w, width:0, height:data.h}, {width:data.w, "margin-left":0});
                        break;
                    case TEXT_EFFECTS["up"]:
                        that.expandText(text, data, {"margin-top":data.h, height:0, width:data.w}, {height:data.h, "margin-top":0});
                        break;  
                    default:
                        that.showText(text, data);
                }
            }                   
        }
    }

Answer 1

沒關系，想通了。 我能夠從原始數據中獲取URL。