Question

我正试图修改我的html / js，以便根据我的html中的列表过滤器启动多个画廊-并且让他们也保留其在画廊中覆盖的说明。

MFP的documentation指出，必须单独命名每个画廊，我在理论上是可以理解的，但是正在努力实现。这是我的.js

a.magnificPopup.registerModule("gallery",{
options:{
    enabled: true,
    arrowMarkup:'<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
    preload:[0,2],
    navigateByImgClick:!0,arrows:2,

    tPrev:"Previous (Left arrow key)",
    tNext:"Next (Right arrow key)",
    tCounter:"%curr% of %total%"},

和HTML标记：

<ul class="portfolio-filter">
            <li class="filter active" data-filter="*">All Works</li>
            <li class="filter" data-filter=".icon">Logos</li>
            <li class="filter" data-filter=".app">App Concepts</li>
            <li class="filter" data-filter=".photos"></li>
        </ul>
        <div class="row isotope_items">
            <!-- portfolio item -->
            <div class="col-lg-4 col-md-6 icon">
                <div class="gallery">
                    <a href="img/Siteimgs/Logos/CryptoBank.png" class="portfolio-item set-bg" data-setbg="img/Siteimgs/Logos/CryptoBank.png">
                        <div class="portfolio-text">
                            <h2>European Crypto Bank</h2>
                            <p>Logos</p>
                        </div>
                    </a>
                </div>
            </div>

我试图将.js修改为类似

$('.gallery').each(function(){
$(this).magnificPopup({
    delegate:'a',
    type: 'image,',

a.magnificPopup.registerModule("gallery",{
options:{
    enabled: true,
    arrowMarkup:'<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
    preload:[0,2],
    navigateByImgClick:!0,arrows:2,

    tPrev:"Previous (Left arrow key)",
    tNext:"Next (Right arrow key)",
    tCounter:"%curr% of %total%"},
 })   
}

此简单的单独画廊的修复无法正常工作，我感觉是因为我试图在更大的bootstrap模板的上下文中对其进行修改？或者我只是错误地修改了结构，即。也许.registerModule与它有关。我最终的目标是拥有与列表过滤器相对应的画廊。一个中的所有徽标，另一个中的所有应用程序概念，等等。这是否可能，或者我应该创建单独的画廊并将图像标记在同一html'gallery'div中？

当我实例化图库时，是否可以通过.js将Portfolio-test div类添加到显示的img中？

希望这是有道理的。非常感谢任何指针。

启动多个画廊并在Magnific Pop Up中显示标题

0 个答案: