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
Post a Comment