Featherlight Image Count Index/Total [Indexing Error]

Question

I am trying to add Image count in a Featherlight Gallery. Example : Image 1 of 6 (somewhere beside/below an image)

$.featherlightGallery.prototype.afterContent = function(){
    var object = this.$instance,
        target = this.$currentTarget,
        parent = target.parent(),
        caption = parent.find('.wp-caption-text'),
        galParent = target.parents('.gallery-item'),
        jetParent = target.parents('.tiled-gallery-item');

    $('<div class="count">Image ' + (currentNavigation() + 1)+' of ' + slides().length + '</div>').html(object.find('.featherlight-content'));

    if (0 !== galParent.length) {
        caption = galParent.find('.wp-caption-text');
    } else if (0 !== jetParent.length) {
        caption = jetParent.find('.tiled-gallery-caption');
    }
    object.find('.caption').remove();
    if (0 !== caption.length) {
        $('<div class="caption">').text(caption.text()).appendTo(object.find('.featherlight-content'));
    }
}

It throws me back with the error : currentNavigation is not defined

score 0 · Answer 1 · answered Apr 09 '20 at 20:25

0

You need to call this.currentNavigation()

answered Apr 09 '20 at 20:25

Marc-André Lafortune

78,216
16
166
166

I had tried these calls `$.featherlightGallery.prototype.afterContent = function(featherlight,current,currentNavigation,next,previous,slides){` , and now it says `currentNavigation` is not a function. Also, I can't seems to append the div into `('.featherlight-content')` – Hsu Pyae Naung Apr 10 '20 at 02:53
I finally got it! Thanks, Marc! :D – Hsu Pyae Naung Apr 10 '20 at 04:19
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/25820272) – Not a bug Apr 10 '20 at 06:59
@Notabug: My answer *does* answer the question, i.e. to get the index of the current image, you need to call `this.currentNavigation()`, not `currentNavigation()` as in the code he posted. – Marc-André Lafortune Apr 10 '20 at 07:12

score 0 · Accepted Answer · answered Apr 10 '20 at 04:17

Omg! I got it! I guess it was a fluke! After trying a few probabilities, this is the final answer. I hope someone may find this useful ;D

$.featherlightGallery.prototype.afterContent = function(){
    var object = this.$instance,
        target = this.$currentTarget,
        parent = target.parent(),
        caption = parent.find('.wp-caption-text'),
        galParent = target.parents('.gallery-item'),
        jetParent = target.parents('.tiled-gallery-item');

    var sc = $('<div class="count">Image ' + (this.currentNavigation() + 1) + ' of ' + this.slides().length + '</div>');
    sc.appendTo(object.find('.featherlight-content'));

    object.find('.count').remove();
    if (0 !== sc.length) {
        sc.appendTo(object.find('.featherlight-content'));
    }
    if (0 !== galParent.length) {
        caption = galParent.find('.wp-caption-text');
    } else if (0 !== jetParent.length) {
        caption = jetParent.find('.tiled-gallery-caption');
    }
    object.find('.caption').remove();
    if (0 !== caption.length) {
        $('<div class="caption">').text(caption.text()).appendTo(object.find('.featherlight-content'));
    }
}

Featherlight Image Count Index/Total [Indexing Error]

2 Answers2