我正在搞這個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>
感謝尼克,我可以用CSS,我的問題是我對java的無知。我該怎麼做? :) – user3455762
在您的瀏覽器中,您可以使用開發人員工具(通常是f12)查看導航的css class/id。然後,如果您沒有樣式表,則可以在您的CSS中放入.classname {display:none;}或。 – NickH
但是如何在Java中實現呢?如果實際的可視化圖像具有「data-id = 0」,我只想激活該類。 – user3455762