I need to change the pagination of this Wordpress slideshow plugin to display as numbers instead of images

Question

I have a Wordpress plugin (called Slideshow, found here) that has pagination above the slides that displays as bullets in a ul (link to slideshow page).

What I need is for it to display as numbers in the following format: "Picture 1 of 15". I am new to javascript and am having a very hard time getting it to do this. I was able to identify (at least I think I was) the sections of code that need to be altered for this.

The 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; ?>

The 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;

I hope this is sufficient information. There is also a file called all.backend.min.js that I'm not sure is needed, but here is a link to it just in case.

Also if anyone has an alternate plugin they can suggest that already does something similar, that will suffice. I can edit the CSS to display the way I want, but I am not good enough with Javascript to edit an existing plugin.

Answer 1

We can add CSS and jQuery to hide and modify the output of the slider. It's pure extra code without touching the original. Can be used on functions.php or better yet on a custom plugin.

With CSS we hide things:

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

And with jQuery we modify:

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

The result is the removal of the bullets and display of numbers. To create a navigation Picture 1 of 15 further jQuery is needed, but nothing that a Stack Overflow search wouldn't help to answer.