javascript - Hide Navigation in Lightbox -


i'm messing around lightbox jquery plugin i've little knowledge of jquery / javascript.

i when image shown *data-id="0"*, prev button hidden.

something showing / hiding class ok also.

may know correct way achieve objective?

this 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 = [];     (var = 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 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> 

try modified plug in code.i had hidden prev btn when data id 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 = []; (var = 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(); }); 

Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -