Hide Navigation in Lightbox

Question

I'm messing around with this lightbox jquery plugin but I've very little knowledge of jquery / javascript.

I would like that when the image shown is the *data-id="0"*, the prev button will be hidden.

Something like showing / hiding a class would be ok also.

May I know what is the correct way to achieve my objective?

This is the full plugin code:

(function($, undefined) {

$.fn.maxGallery = function(options) {
    var defaults = {},
    $this = $(this);


    options = $.extend({}, defaults, options);


    //?????? ??? ????????
    var length = $('.gallery').find('a').length;
    var href, arrOfImgs = [];
    for (var i = 0; i<length; i++) {
        href = $('.gallery')
            .find('a')
                .eq(i)
                    .attr('href');

        arrOfImgs.push(href);

    }

    $(document)
    .on('click', '.gallery__item', function(e) {
        return false;
    });


    var Gallery = {
        id: null,
        title: '',
        init: function() {

            var _this = this;

            $(document)
            .on('click', '.gallery__item', function(e) {
                var target = $(e.target).siblings('img');

                _this.id = target.data('id');
                _this.show(_this.id);
                return false;
            })
            .on('click', '.slider__btn_next', function(e) {
                _this.next();
                e.preventDefault();
            })
            .on('click', '.slider__btn_prev', function(e) {
                _this.prev();
                e.preventDefault();
            })
            .on('click', '.slider__btn_close', function() {
                _this.hide();
            })
            .on('keydown', function(e) {
                if (!$this.is(':visible')) {
                    return;
                } else if (e.which === 39) {
                    _this.next();
                } else if (e.which === 37) {
                    _this.prev();
                } else if (e.which === 27) {
                    _this.hide();
                } else if (e.which === 38) {
                    this.id = length-1;
                    _this.prev(this.id);
                } else if (e.which === 40) {
                    this.id = 0;
                    _this.prev(this.id);
                }
            });

            $(window).on('hashchange', function() {
                _this.updatestate();
            });

            _this.updatestate();

        },
        show: function(id) {
            $('.slider__cur-img').attr('src', arrOfImgs[id]);
            $this.show();
            this.setNum();
            this.setTitle();
            this.setHash();
        },
        next: function() {
            var id = arrOfImgs[this.id + 1] ? this.id + 1 : 0;
            this.id = id;
            $('.slider__cur-img').attr('src', arrOfImgs[id]);
            this.setNum();
            this.setTitle();
            this.setHash();
        },
        prev: function(idSet) {
            var id;

            if (idSet !== undefined) {
                id = idSet;
            } 
            else {
                id = arrOfImgs[this.id - 1] ? this.id - 1 : arrOfImgs.length - 1;               
            }
            this.id = id;
            $('.slider__cur-img').attr('src', arrOfImgs[id]);
            this.setNum();
            this.setTitle();
            this.setHash();
        },
        hide: function() {
            $this.hide();
            window.location.hash = '#closed';
        },
        setHash: function() {
            window.location.hash = '#img' + (this.id + 1);
        },
        setNum: function () {
            $('.slider__table-td-item-number').text(this.id+1 + '/' + length);
        },
        setTitle: function() {
            var title = $('.gallery__item').eq(this.id).find('img').data('title');
            $('.slider__table-td-item-title').text(title);
        },
        updatestate: function() {
            var id = location.hash.slice(4);
            if (isNaN(parseFloat(id))) {
                this.hide();
                return;
            } else {
                this.id = +id - 1;
                $('.slider__cur-img').attr('src', arrOfImgs[id]);
                this.show(this.id);
            }
        }
    };

    Gallery.init();


};

})(jQuery);

$(function() {
    $('.slider').maxGallery();
});

here's my HTML:

<div class="gallery">

            <a href="img/PIATTI E TORTIERE/Piatti - Omaggio ai Beatles.JPG" class="gallery__item">
            <img src="img/PIATTI E TORTIERE/Piatti - Omaggio ai Beatles.JPG" alt="" class="gallery__item-img" data-id="0">
            <i class="gallery__item-cover"></i>
        </a>
        <a href="img/PIATTI E TORTIERE/Piatti - Tarantella napoletana.jpg" class="gallery__item">
            <img src="img/PIATTI E TORTIERE/Piatti - Tarantella napoletana.jpg" alt="" class="gallery__item-img" data-id="1">
            <i class="gallery__item-cover"></i>
        </a>
        <a href="img/PIATTI E TORTIERE/Piatto - Decoro con fiori e farfalle.JPG" class="gallery__item">
            <img src="img/PIATTI E TORTIERE/Piatto - Decoro con fiori e farfalle.JPG" alt="" class="gallery__item-img" data-id="2">
            <i class="gallery__item-cover"></i>
        </a>
        <a href="img/PIATTI E TORTIERE/Piatto - Decoro con fiori.JPG" class="gallery__item">
            <img src="img/PIATTI E TORTIERE/Piatto - Decoro con fiori.JPG" alt="" class="gallery__item-img" data-id="3">
            <i class="gallery__item-cover"></i>
        </a>
        <a href="img/PIATTI E TORTIERE/Piatto - Decoro con rose.JPG" class="gallery__item">
            <img src="img/PIATTI E TORTIERE/Piatto - Decoro con rose.JPG" alt="" class="gallery__item-img" data-id="4">
            <i class="gallery__item-cover"></i>
        </a>
        <a href="img/PIATTI E TORTIERE/Piatto - Decoro per la LAUREA personalizzabile.jpg" class="gallery__item">
            <img src="img/PIATTI E TORTIERE/Piatto - Decoro per la LAUREA personalizzabile.jpg" alt="" class="gallery__item-img" data-id="5">
            <i class="gallery__item-cover"></i>
        </a>


    </div>

    <div class="slider" style="display: none;">
        <table class="slider__table">
            <tr>
                <td class="slider__table-td"><div class="slider__table-td-item-number via"> </div>
                     <div class="slider__table-td-inner">
                        <img src="" alt="" class="slider__cur-img">
                        </div> 
                  </div>  
                    </div>  
                </td>
            </tr>        
        </table>    
        <a href="#prev" class="slider__btn slider__btn_prev"></a>
        <a href="#next" class="slider__btn slider__btn_next"></a>
        <i class="slider__btn_close"></i>
    </div>

Answer 1

I solved with this code:

  (function($, undefined) {

    $.fn.maxGallery = function(options) {
    var defaults = {},
    $this = $(this);


    options = $.extend({}, defaults, options);


    //?????? ??? ????????
    var length = $('.gallery').find('a').length;
    var href, arrOfImgs = [];
    for (var i = 0; i<length; i++) {
        href = $('.gallery')
            .find('a')
                .eq(i)
                    .attr('href');

        arrOfImgs.push(href);

    }

    $(document)
    .on('click', '.gallery__item', function(e) {
        return false;
    });


    var Gallery = {
        id: null,
        title: '',
        init: function() {

            var _this = this;

            $(document)
            .on('click', '.gallery__item', function(e) {
                var target = $(e.target).siblings('img');

                _this.id = target.data('id');
                _this.show(_this.id);
                return false;
            })
            .on('click', '.slider__btn_next', function(e) {
                _this.next();
                e.preventDefault();
            })
            .on('click', '.slider__btn_prev', function(e) {
                _this.prev();
                e.preventDefault();
            })
            .on('click', '.slider__btn_close', function() {
                _this.hide();
            })
            .on('keydown', function(e) {
                if (!$this.is(':visible')) {
                    return;
                } else if (e.which === 39) {
                    _this.next();
                } else if (e.which === 37) {
                    _this.prev();
                } else if (e.which === 27) {
                    _this.hide();
                } else if (e.which === 38) {
                    this.id = length-1;
                    _this.prev(this.id);
                } else if (e.which === 40) {
                    this.id = 0;
                    _this.prev(this.id);
                }
            });

            $(window).on('hashchange', function() {
                _this.updatestate();
            });

            _this.updatestate();

        },
        show: function(id) {
            $('.slider__cur-img').attr('src', arrOfImgs[id]);
            if(id == '0') {
            $('a[href*="#prev"]').addClass('via');}
            else  {$('a[href="#prev"]').removeClass('via');}
            if(id == length-1) {
            $('a[href*="#next"]').addClass('via');}
            else  {$('a[href="#next"]').removeClass('via');}
            $this.show();
            this.setNum();
            this.setTitle();
            this.setHash();
        },
        next: function() {
            var id = arrOfImgs[this.id + 1] ? this.id + 1 : 0;
            this.id = id;
            $('.slider__cur-img').attr('src', arrOfImgs[id]);
            if(id == length-1) {
            $('a[href*="#next"]').addClass('via');}
            else  {$('a[href*="#prev"]').removeClass('via');}
            this.setNum();
            this.setTitle();
            this.setHash();
        },
        prev: function(idSet) {
            var id;

            if (idSet !== undefined) {
                id = idSet;
            } 
            else {
                id = arrOfImgs[this.id - 1] ? this.id - 1 : arrOfImgs.length - 1;               
            }
            this.id = id;
            $('.slider__cur-img').attr('src', arrOfImgs[id]);
            if(id == '0') {
            $('a[href*="#prev"]').addClass('via');}
            else  {$('a[href*="#next"]').removeClass('via');}
            this.setNum();
            this.setTitle();
            this.setHash();
        },
        hide: function() {
            $this.hide();
            window.location.hash = '#closed';
        },
        setHash: function() {
            window.location.hash = '#img' + (this.id + 1);
        },
        setNum: function () {
            $('.slider__table-td-item-number').text(this.id+1 + '/' + length);
        },
        setTitle: function() {
            var title = $('.gallery__item').eq(this.id).find('img').data('title');
            $('.slider__table-td-item-title').text(title);
        },
        updatestate: function() {
            var id = location.hash.slice(4);
            if (isNaN(parseFloat(id))) {
                this.hide();
                return;
            } else {
                this.id = +id - 1;
                $('.slider__cur-img').attr('src', arrOfImgs[id]);
                this.show(this.id);
            }
        }
    };

    Gallery.init();



    };

    })(jQuery);

    $(function() {
    $('.slider').maxGallery();
    });

Answer 2

Try this modified plug in code.I had hidden your prev btn when data id is 0 (updated)

 (function($, undefined) {

$.fn.maxGallery = function(options) {
var defaults = {},
$this = $(this);


options = $.extend({}, defaults, options);


//?????? ??? ????????
var length = $('.gallery').find('a').length;
var href, arrOfImgs = [];
for (var i = 0; i<length; i++) {
    href = $('.gallery')
        .find('a')
            .eq(i)
                .attr('href');

    arrOfImgs.push(href);

}

$(document)
.on('click', '.gallery__item', function(e) {
    return false;
});


var Gallery = {
    id: null,
    title: '',
    init: function() {

        var _this = this;

        $(document)
        .on('click', '.gallery__item', function(e) {
            var target = $(e.target).siblings('img');

            _this.id = target.data('id');
            if(_this.id == 0)
            $('.slider__btn_prev').hide();
        else 
            $('.slider__btn_prev').show();
        if(this.id == arrOfImgs.length)
         $('.slider__btn_next').hide();
        else 
         $('.slider__btn_next').show();
            _this.show(_this.id);
            return false;
        })
        .on('click', '.slider__btn_next', function(e) {
            _this.next();
            e.preventDefault();
        })
        .on('click', '.slider__btn_prev', function(e) {
            _this.prev();
            e.preventDefault();
        })
        .on('click', '.slider__btn_close', function() {
            _this.hide();
        })
        .on('keydown', function(e) {
            if (!$this.is(':visible')) {
                return;
            } else if (e.which === 39) {
                _this.next();
            } else if (e.which === 37) {
                _this.prev();
            } else if (e.which === 27) {
                _this.hide();
            } else if (e.which === 38) {
                this.id = length-1;
                _this.prev(this.id);
            } else if (e.which === 40) {
                this.id = 0;
                _this.prev(this.id);
            }
        });

        $(window).on('hashchange', function() {
            _this.updatestate();
        });

        _this.updatestate();

    },
    show: function(id) {
        $('.slider__cur-img').attr('src', arrOfImgs[id]);
        $this.show();
        this.setNum();
        this.setTitle();
        this.setHash();
    },
    next: function() {
        var id = arrOfImgs[this.id + 1] ? this.id + 1 : 0;
        this.id = id;
        if(this.id == 0)
         $('.slider__btn_prev').hide();
    else 
         $('.slider__btn_prev').show();

    if(this.id == arrOfImgs.length)
         $('.slider__btn_next').hide();
    else 
         $('.slider__btn_next').show();
        $('.slider__cur-img').attr('src', arrOfImgs[id]);
        this.setNum();
        this.setTitle();
        this.setHash();
    },
    prev: function(idSet) {
        var id;

        if (idSet !== undefined) {
            id = idSet;
        } 
        else {
            id = arrOfImgs[this.id - 1] ? this.id - 1 : arrOfImgs.length - 1;               
        }
        this.id = id;
        if(this.id == 0)
         $('.slider__btn_prev').hide();
    else 
         $('.slider__btn_prev').show();

    if(this.id == arrOfImgs.length)
         $('.slider__btn_next').hide();
    else 
         $('.slider__btn_next').show();
        $('.slider__cur-img').attr('src', arrOfImgs[id]);
        this.setNum();
        this.setTitle();
        this.setHash();
    },
    hide: function() {
        $this.hide();
        window.location.hash = '#closed';
    },
    setHash: function() {
        window.location.hash = '#img' + (this.id + 1);
    },
    setNum: function () {
        $('.slider__table-td-item-number').text(this.id+1 + '/' + length);
    },
    setTitle: function() {
        var title = $('.gallery__item').eq(this.id).find('img').data('title');
        $('.slider__table-td-item-title').text(title);
    },
    updatestate: function() {
        var id = location.hash.slice(4);
        if (isNaN(parseFloat(id))) {
            this.hide();
            return;
        } else {
            this.id = +id - 1;
            $('.slider__cur-img').attr('src', arrOfImgs[id]);
            this.show(this.id);
        }
    }
};

Gallery.init();


};

})(jQuery);

$(function() {
$('.slider').maxGallery();
});

Answer 3

You can try hiding the navigation by using css display: none; on the navigation classes/id's