0
Ich möchte nur die Bilder zeigen, die herausgefiltert wurden, derzeit, wenn Sie Bilder ausfiltern und klicken, um das Bild in fancybox zu öffnen, zeigt es alle Bilder an statt nur die gefilterten.Wie zeigt man gefilterte Bilder in fancybox nur bei Verwendung von Isotopenfiltern und mehreren Filtern?
$(".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>';
}
});
Mein Isotop 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();
});
});
});
Screenshot von dem, was das Layout wie folgt aussieht:
