我有一个 Wordpress 插件(称为 Slideshow，找到 here )，它在幻灯片上方有分页，在 ul ( link to slideshow page ) 中显示为项目符号。

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

PHP ( link to file ):

<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 来隐藏和修改 slider 的输出。它是纯粹的额外代码，没有触及原始代码。可用于 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
});

结果是删除项目符号并显示数字。要创建导航 Picture 1 of 15，还需要 jQuery，但不需要 Stack Overflow search。帮不上忙。

关于javascript - 我需要更改此 Wordpress 幻灯片插件的分页以显示为数字而不是图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24066242/