如何在fancybox的ox_options['baseTpl']上方添加过滤选项

Question

$fancybox_options['baseTpl'] = '<div class="modula-fancybox-container modula-lightbox-' . $settings['gallery_id'] . '" role="dialog" tabindex="-1">' .
                                       '<div class="modula-fancybox-bg"></div>' .
                                       '<div class="modula-fancybox-inner">' .
                                       '<div class="modula-fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' .
                                       '<div class="modula-fancybox-toolbar">{{buttons}}</div>' .
                                       
                                       '<div class="modula-fancybox-navigation">{{arrows}}</div>' .
                                       '<div class="modula-fancybox-stage"></div>' .
                                       '<div class="modula-fancybox-caption"><div class="modula-fancybox-caption__body"></div></div>' .
                                       "</div>" .
                                       "</div>";

我想在灯箱画廊上添加过滤选项。

Answer 1

假设您想添加一个过滤器选项来过滤灯箱图库中的图像，您可以修改baseTpl以包含过滤器控件。这是一个例子：

$fancybox_options['baseTpl'] = '<div class="modula-fancybox-container modula-lightbox-' . $settings['gallery_id'] . '" role="dialog" tabindex="-1">' .
    '<div class="modula-fancybox-bg"></div>' .
    '<div class="modula-fancybox-inner">' .
    '<div class="modula-fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' .
    '<div class="modula-fancybox-toolbar">{{buttons}}</div>' .

    '<div class="modula-fancybox-filter">
        <label for="filter">Filter:</label>
        <select id="filter">
            <option value="all">All</option>
            <option value="category1">Category 1</option>
            <option value="category2">Category 2</option>
            <!-- Add more options as needed -->
        </select>
    </div>' .

    '<div class="modula-fancybox-navigation">{{arrows}}</div>' .
    '<div class="modula-fancybox-stage"></div>' .
    '<div class="modula-fancybox-caption"><div class="modula-fancybox-caption__body"></div></div>' .
    "</div>" .
    "</div>";

我添加了一个带有类 modula-fancybox-filter 的 div，其中包含一个标签和一个用于过滤器的选择元素。您可以根据您的具体用例自定义选项和值。

将过滤器控件添加到baseTpl后，您需要使用JavaScript或jQuery来处理过滤逻辑。将事件监听器附加到过滤器选择元素的更改事件，然后相应地更新灯箱图库。

$(document).ready(function () {
    $('#filter').on('change', function () {
        var filterValue = $(this).val();
        // Implement logic to filter the lightbox gallery based on the selected value
        // You may need to hide/show or reload the images accordingly
    });
});

注意：根据您的图像结构以及您想要如何过滤灯箱图库中的图像来调整过滤逻辑。