[英]Isotope and lightbox, how to only show the visible (filtered) images in lightbox
我正在建立一个wordpress网站。 我正在实施同位素图像布局和过滤（isotope.metafizzy）
我已经配置了Isotope，因此图像是可以放置和过滤的，这一切都正常。
目前，当我在灯箱中打开图像时，它会加载系列中的所有图像，包括当前隐藏的图像（由Isotope过滤）。
我想更改我的解决方案，以便只将可见图像加载到灯箱中。 这样，用户可以使用同位素过滤到所需的图像集，然后可以使用灯箱以更大的格式查看这些图像。
下面的代码是wordpress输出的内容（来自查看页面源）。
我在这篇文章中尝试了解决方案，但我无法适应我的代码。
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">Afficher tout</button> <button class="button" data-filter=".faune">faune</button><button class="button" data-filter=".flore">flore</button><button class="button" data-filter=".paysage">paysage</button> </div> <div id="isotopegallery" class="grid"> <div class="element-item flore" > <a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat.jpg" data-lightbox="image-1" data-title="Portfolio elt 8 "> <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat-150x150.jpg" alt=""> </a> </div> <div class="element-item faune" > <a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier.jpg" data-lightbox="image-1" data-title="Portfolio elt 7 "> <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier-150x150.jpg" alt=""> </a> </div> <div class="element-item flore" > <a href="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-1024x789.jpg" data-lightbox="image-1" data-title="Portfolio elt 6 "> <img src="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-150x150.jpg" alt=""> </a> </div> <div class="element-item faune" > <a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere.jpg" data-lightbox="image-1" data-title="Portfolio elt 5 "> <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere-150x150.jpg" alt=""> </a> </div> <div class="element-item flore" > <a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1.jpg" data-lightbox="image-1" data-title="Portfolio elt 4 "> <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1-150x150.jpg" alt=""> </a> </div> <div class="element-item paysage" > <a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie.jpg" data-lightbox="image-1" data-title="Portfolio elt 3 "> <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie-150x150.jpg" alt=""> </a> </div> </div> </p> </div> </div> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <!-- framework gallery isotope --> <script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script> <!-- framework gallery lightbox --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.js"></script> <!-- framework gallery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script> <script> // external js: isotope.pkgd.js // init Isotope var $grid = $('.grid').isotope({ itemSelector: '.element-item', layoutMode: 'fitRows', getSortData: { name: '.name', symbol: '.symbol', number: '.number parseInt', category: '[data-category]', weight: function( itemElem ) { var weight = $( itemElem ).find('.weight').text(); return parseFloat( weight.replace( /[\\(\\)]/g, '') ); } } }); // filter functions var filterFns = { // show if number is greater than 50 numberGreaterThan50: function() { var number = $(this).find('.number').text(); return parseInt( number, 10 ) > 50; }, // show if name ends with -ium ium: function() { var name = $(this).find('.name').text(); return name.match( /ium$/ ); } }; // bind filter button click $('#filters').on( 'click', 'button', function() { var filterValue = $( this ).attr('data-filter'); // use filterFn if matches value filterValue = filterFns[ filterValue ] || filterValue; $grid.isotope({ filter: filterValue }); }); // bind sort button click $('#sorts').on( 'click', 'button', function() { var sortByValue = $(this).attr('data-sort-by'); $grid.isotope({ sortBy: sortByValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); </script>
谢谢你的帮助
使用magnificPopup我在同位素的arrangeComplete事件中添加/删除magnificPopup（参见delegate选项）使用的类。
具有图像的同位素元素，class = mag由magnificPopup使用
<div class="element-item">
<a href="gallery-image" class="mag">
<img src="gallery-thumb" />
</a>
</div>
magnificPopup使用委托
$grid.magnificPopup({
type: 'image',
delegate: 'a.mag',
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300,
opener: function (e) {
return e.find("img");
}
}
});
添加/删除magnificPopup委托类
$grid.on('arrangeComplete', function(event, filteredItems) {
$(".element-item:hidden a").removeClass("mag");
$(".element-item:visible a").addClass("mag");
});
如果要将一组相关图像组合成一组，请对所有图像使用相同的data-lightbox属性值。
例如：
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
同位素 - 过滤图像 - 如何仅在灯箱（或 shadowbox JS）中显示可见（过滤）图像
[英]Isotope - filtered images - how to only show the visible (filtered) images in lightbox (or shadowbox JS)
是否可以灯箱许多图像，但只显示一个图像来激活它们？
[英]Is it possible to lightbox many images but only show one image to activate them?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.