javascript-我需要更改此WordPress幻灯片插件的分页以显示为数字而不是图像

我有一个 wordpress 插件(称为Slideshow,找到here),该插件在幻灯片上方具有分页,在ul(link to slideshow page)中显示为项目符号.

我需要的是将其显示为以下格式的数字：“图片1之15”.我是javascript新手,很难做到这一点.我能够(至少我认为是)识别为此需要更改的代码部分.

<div class="slideshow_container slideshow_container_<?PHP echo     htmlspecialchars($styleName); ?>" style="<?PHP echo (isset($settings['preserveSlideshowDimensions']) && $settings['preserveSlideshowDimensions'] == 'false' && isset($settings['height']) && $settings['height'] > 0) ? 'height: ' . $settings['height'] . 'px;' : ''; ?> <?PHP echo (isset($settings['maxWidth']) && $settings['maxWidth'] > 0) ? 'max-width: ' . $settings['maxWidth'] . 'px;' : ''; ?>" data-session-id="<?PHP echo htmlspecialchars($sessionID); ?>" data-style-name="<?PHP echo htmlspecialchars($styleName); ?>" data-style-version="<?PHP echo htmlspecialchars($styLeversion); ?>">

<?PHP if(isset($settings['showLoadingIcon']) && $settings['showLoadingIcon'] === 'true'): ?>
    <div class="slideshow_loading_icon"></div>
<?PHP endif; ?>

<div class="slideshow_content" style="display: none;">

    <?PHP

    if(is_array($views) && count($views) > 0)
    {
        foreach($views as $view)
        {
            echo $view->toFrontEndHTML();
        }
    }

    ?>

</div>

<div class="slideshow_controlPanel slideshow_transparent" style="display: none;"><ul><li class="slideshow_togglePlay" data-play-text="<?PHP _e('Play', 'slideshow-plugin'); ?>" data-pause-text="<?PHP _e('Pause', 'slideshow-plugin'); ?>"></li></ul></div>

<div class="slideshow_button slideshow_prevIoUs slideshow_transparent" role="button" data-prevIoUs-text="<?PHP _e('PrevIoUs', 'slideshow-plugin'); ?>" style="display: none;"></div>
<div class="slideshow_button slideshow_next slideshow_transparent" role="button" data-next-text="<?PHP _e('Next', 'slideshow-plugin'); ?>" style="display: none;"></div>

<div class="slideshow_pagination" style="display: none;" data-go-to-text="<?PHP _e('Go to slide', 'slideshow-plugin'); ?>"><div class="slideshow_pagination_center"></div></div>

<!-- wordpress Slideshow Version <?PHP echo SlideshowPluginMain::$version; ?> -->

<?PHP if(is_array($log) && count($log) > 0): ?>
<!-- Error log
<?PHP foreach($log as $logMessage): ?>
    - <?PHP echo htmlspecialchars($logMessage); ?>
<?PHP endforeach; ?>
-->
<?PHP endif; ?>

JS(link to file)：

prototype.activatePagination = function () {
    if (this.settings.showPagination) {
        this.$pagination.find(".slideshow_pagination_center").html("<ul></ul>");
        var i = this.$pagination.find("ul");
        i.html(""), this.$views.each(t.proxy(function (t) {
            var s = "",
                e = parseInt(t, 10) + 1,
                n = this.$pagination.data("goToText");
            ("string" != typeof n || n.length <= 0) && (n = this.$pagination.attr("data-go-to-text")), t == this.currentViewID && (s = "slideshow_currentView"), i.append('<li class="slideshow_transparent ' + s + '" data-view-id="' + t + '" role="button" title="' + n + " " + e + '"><span class="assistive-text hide-text">' + n + " " + e + "</span></li>")
        }, this)), this.$pagination.find("li").attr("tabindex", "0").click(t.proxy(function (i) {
            var s, e = t(i.currentTarget);
            this.currentlyAnimating || (s = e.data("viewId"), isNaN(parseInt(s, 10)) && (s = e.attr("data-view-id"), isNaN(parseInt(s, 10))) || (this.pauseAllVideos(), this.playState === this.PlayStates.PLAYING && (this.pause(this.PlayStates.TEMPORARILY_PAUSED), this.play()), this.animateto(parseInt(s, 10), 0)))
        }, this)), this.bindSubmitListener(this.$pagination.find("li")), this.$container.bind("slideshowAnimationStart", t.proxy(function () {
            var i = this.$pagination.find("li");
            i.each(t.proxy(function (i, s) {
                t(s).removeClass("slideshow_currentView")
            }, this)), t(i[this.currentViewID]).addClass("slideshow_currentView")
        }, this)), this.settings.hidePagination ? (this.$container.mouseenter(t.proxy(function () {
            this.$pagination.stop(!0, !0).fadeIn(100)
        }, this)), this.$container.mouseleave(t.proxy(function () {
            this.$pagination.stop(!0, !0).fadeOut(500)
        }, this))) : this.$pagination.show()
    }
}, i.Slideshow.prototype.activatePauSEOnHover = function () {
    this.settings.pauSEOnHover && (this.$container.mouseenter(t.proxy(function () {
        clearTimeout(this.pauSEOnHoverTimer), this.playState !== this.PlayStates.PAUSED && (this.pauSEOnHoverTimer = setTimeout(t.proxy(function () {
            this.pause(this.PlayStates.TEMPORARILY_PAUSED)
        }, this), 500))
    }, this)), this.$container.mouseleave(t.proxy(function () {
        clearTimeout(this.pauSEOnHoverTimer), this.playState !== this.PlayStates.PAUSED && this.interval === !1 && this.play()
    }, this)))
}
}();
slideshow_jquery_image_gallery_backend_script_scriptsloadedFlag = !0;

我希望这是足够的信息.我不确定是否需要一个名为all.backend.min.js的文件,但是这里有一个 link,以防万一.

另外,如果有人有备用插件,他们可以建议已经做过类似的事情,就足够了.我可以编辑CSS以显示所需的方式,但是我对Javascript的编辑能力还不够好.

解决方法:

我们可以添加CSS和jQuery来隐藏和修改滑块的输出.这是纯净的额外代码,无需改动原始代码.可以在functions.PHP或更高版本的custom plugin上使用.

使用CSS我们可以隐藏东西：

# required: PHP 5.3
# See Lambda functions: https://stackoverflow.com/q/1909002/1287812
add_action( 'wp_head', function() {
    ?>
    <style>
    .slideshow_container_style-light .slideshow_pagination ul li {
        background: none !important; /* was the bullet img */
    }
    span.assistive-text.hide-text { /* unhide text */
        display: block !important;
        font:15px arial,sans-serif;
        position: initial !important;
        text-shadow: #000 1px 1px 1px;
        color:#fff;
    }
    </style>
    <?PHP
});

并使用jQuery我们修改：

add_action( 'wp_enqueue_scripts', function(){ wp_enqueue_script('jquery'); } );

add_action( 'wp_footer', function() {
    ?>
    <script>
    jQuery(document).ready(function($) {  
        function startUp() {
            $("span.assistive-text.hide-text").each(function() {
                var text = $(this).text();
                text = text.replace("Go to slide", "");
                $(this).text(text);
            });
        }
        /* Wait slideshow start to fire the replace function */
        var timeoutID = window.setTimeout( startUp, 1500 ); 
    });
    </script>
    <?PHP
});

结果是删除了项目符号并显示了数字.要创建导航图15的图片1,还需要jQuery,但是Stack Overflow search的所有内容都无济于事.

javascript-我需要更改此WordPress幻灯片插件的分页以显示为数字而不是图像

相关推荐