0
我想只顯示已被過濾出來的圖像，目前如果您過濾出圖像並單擊以在fancybox中打開圖像，它將顯示所有圖像，而不僅僅是已過濾的圖像。如何僅在使用同位素過濾器和多個過濾器時在fancybox中顯示過濾圖像？
$(".fancybox").fancybox({
padding: 0,
tpl: {
closeBtn: '<a title="Close" class="fancybox-item fancybox-close custom-fancybox-close" href="javascript:;"></a>'
},
beforeShow: function() {
// New line
this.title = this.title += '<span class="gallery-title-wrapper"><a href="' + $(this.element).data("gallery-link") + '">' + $(this.element).data("gallery-link-text") + '</a> ' + $(this.element).data("caption") + '</span>';
// Add tweet button
this.title += '<span class="gallery-social-wrapper">' +
'<span class="gallery-share-text">SHARE</span>' +
'<a data-pin-do="buttonBookmark" data-pin-custom="true" data-pin-save="false" data-pin-log="button_pinit_bookmarklet" data-pin-href="https://uk.pinterest.com/pin/create/button/"><i class="fa fa-pinterest-square gallery-pinterest" aria-hidden="true"></i></a>' +
'<a target="_blank" href="http://www.facebook.com/share.php?u=' + $(this.element).data("gallery-link") +' "><i class="fa fa-facebook-official gallery-facebook" aria-hidden="true"></i></a>' +
'</span>';
}
});
我的同位素JS
$(document).ready(function() {
var parentFilterArrowWrapper = $('.parent-filter-arrow-wrapper');
// If the kitchen options is selected then we want to show the layout filters
$('.kitchen-checkbox').change(function() {
$('.complete-layout-filter-wrapper').toggle();
});
function openCloseGalleryFilter(element) {
element.find('.parent-filter-icon').toggleClass('fa-angle-up fa-angle-down');
element.parent().next('.child-filter-wrapper').slideToggle('fast');
}
// This toggles the up/down arrows
parentFilterArrowWrapper.on('click', function() {
openCloseGalleryFilter($(this));
});
// If we are on tablet/mobile we want the filters to be closed initially as they take up quite a bit of space.
if ($(window).width() <= 768){
openCloseGalleryFilter(parentFilterArrowWrapper);
}
var initial_items = 6;
var next_items = 6;
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.gallery-image',
layoutMode: 'fitRows'
});
// filter with selects and checkboxes
var $checkboxes = $('.gallery-filter-wrapper input');
// If the URL contains a has e.g website.com/products/#filter=.kitchen
if (location.hash) {
onHashchange();
updateFilterCounts();
}
$checkboxes.change(function() {
$('.gallery-load-more-btn').remove();
// Remove hash if a checkbox is clicked
location.hash = "";
// Map input values to an array
var inclusives = [];
// Inclusive filters from checkboxes
$checkboxes.each(function(i, elem) {
// If checkbox, use value if checked
if (elem.checked) {
inclusives.push(elem.value);
}
});
// Combine inclusive filters, make a string and remove space so we concat values. e.g .kitchen.gallery etc
var filterValue = inclusives.length ? inclusives.join('') : '*';
$grid.isotope({ filter: filterValue });
updateFilterCounts();
});
function updateFilterCounts() {
// get filtered item elements
var itemElems = $grid.isotope('getFilteredItemElements');
var count_items = $(itemElems).length;
if (count_items > initial_items) {
$('#showMore').show();
}
else {
$('#showMore').hide();
}
if ($('.gallery-image').hasClass('visible_item')) {
$('.gallery-image').removeClass('visible_item');
}
var index = 0;
$(itemElems).each(function() {
if (index >= initial_items) {
$(this).addClass('visible_item');
}
index++;
});
$grid.isotope('layout');
}
function showNextItems(pagination) {
var itemsMax = $('.visible_item').length;
var itemsCount = 0;
$('.visible_item').each(function() {
if (itemsCount < pagination) {
$(this).removeClass('visible_item');
itemsCount++;
}
});
if (itemsCount >= itemsMax) {
$('#showMore').hide();
}
$grid.isotope('layout');
}
// function that hides items when page is loaded
function hideItems(pagination) {
var itemsMax = $('.gallery-image').length;
var itemsCount = 0;
$('.gallery-image').each(function() {
if (itemsCount >= pagination) {
$(this).addClass('visible_item');
}
itemsCount++;
});
if (itemsCount < itemsMax || initial_items >= itemsMax) {
$('#showMore').hide();
}
$grid.isotope('layout');
}
$('#showMore').on('click', function (e) {
e.preventDefault();
showNextItems(next_items);
});
hideItems(initial_items);
function getHashFilter() {
// get filter=filterName
var matches = location.hash.match(/filter=([^&]+)/i);
var hashFilter = matches && matches[1];
return hashFilter && decodeURIComponent(hashFilter);
}
var isIsotopeInit = false;
function onHashchange() {
var hashFilter = getHashFilter();
if (!hashFilter && isIsotopeInit) {
return;
}
isIsotopeInit = true;
// filter isotope
$grid.isotope({
itemSelector: '.gallery-image',
layoutMode: 'fitRows',
filter: hashFilter
});
// Set checkbox to be checked
if (hashFilter) {
$(hashFilter + '-checkbox').attr('checked', true);
}
}
$(window).on('hashchange', onHashchange);
// trigger event handler to init Isotope
onHashchange();
$(".img-check").click(function(){
$(this).toggleClass("image-checked");
});
$('.reset-filters').on('click', function() {
// reset filters
$grid.isotope({ filter: '*' });
// reset checkboxes
$checkboxes.prop('checked', false);
// location.hash = '';
updateFilterCounts();
});
var amountOfImagesDisplayed = $('.gallery-image').length;
var totalGalleryImages = $('.total-amount-of-gallery-images').val();
function galleryImageCheck() {
if(amountOfImagesDisplayed >= totalGalleryImages) {
$('.gallery-load-more-btn').fadeOut('fast');
}
}
galleryImageCheck();
$('.gallery-load-more-btn').on('click', function(e) {
e.preventDefault();
//Gets the amount of past events that are currently displayed on the page
$.post('/gallery/seeMoreGalleryImages', {amountOfImages: amountOfImagesDisplayed}, function(data) {
var $content = $(data);
$grid.append($content).isotope('appended', $content);
$grid.isotope('layout');
amountOfImagesDisplayed = $('.gallery-image').length;
galleryImageCheck();
});
});
});
什麼佈局的截圖看起來像：
