在Lightbox中隐藏导航

我正在搞这个lightbox jquery plugin，但我对jquery/javascript的知识很少。在Lightbox中隐藏导航

我想，当显示的图像是*data-id="0"*时，prev按钮将被隐藏。

就像显示/隐藏课程也可以。

我可以知道实现我的目标的正确方法是什么？

这是一个完整的插件代码：

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

这里是我的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>

来源

2014-03-24 user3455762

我这个代码解决：

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

来源

2014-04-07 10:56:49 user3455762

您可以尝试通过使用CSS显示隐藏导航：无;在导航类/ ID的

来源

2014-03-24 15:02:49 NickH

感谢尼克，我可以用CSS，我的问题是我对java的无知。我该怎么做？ :) – user3455762

在您的浏览器中，您可以使用开发人员工具（通常是f12）查看导航的css class/id。然后，如果您没有样式表，则可以在您的CSS中放入.classname {display：none;}或。 – NickH

但是如何在Java中实现呢？如果实际的可视化图像具有“data-id = 0”，我只想激活该类。 – user3455762

尝试在code.I这个修改插件还藏了你的上一张BTN当数据ID为0（更新）

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

来源

2014-03-25 07:03:23 Coder

谢谢，从当第一形象工程（0）显示，但然后保持为永久..但是，一步前进;） – user3455762

需要检查您的HTML代码 – Coder

在Lightbox中隐藏导航

回答

相关问题