Question

我在WordPress中有来自ACF的图库字段。我想将所有图像输出为拇指（与Masonry排列），然后单击图像以打开圆盘传送带（处于模态），然后使圆盘传送带跳至适当的幻灯片。

使用以下代码可以显示图像缩略图：

<?php $galleryImages = get_field('image_gallery'); 
if ($galleryImages): ?>

<div id="image-gallery" style="margin: auto" class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": ".grid-sizer", "gutter": 10, "fitWidth": "true" }'>
    <div class="grid-sizer"></div>
    <?php $slideNumber = 0; ?>
    <?php foreach ( $galleryImages as $image ): ?>

    <div class="grid-item">
        <a href="#carousel-modal" data-toggle="modal" data-slide-to="<?php echo $slideNumber; ?>">
            <img class="gallery" src="<?php echo $image['sizes']['medium']; ?>">
        </a>
    </div>

    <?php 
    $slideNumber++;
    endforeach; ?>

</div>

模态中的轮播使用以下命令完美生成：

<div class="modal fade" id="carousel-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="carousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <?php $class = 'carousel-item active'; ?>
                        <?php foreach ( $galleryImages as $carouselSlide ): ?>
                        <div class="<?php echo $class; ?>">
                            <img class="d-block w-100" src="<?php echo $carouselSlide['sizes']['large']; ?>">
                        </div>
                        <?php $class = 'carousel-item'; 
                endforeach; ?>
                    </div>

                    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<?php endif; ?>

当我单击图像时，轮播会打开并开始在图像中滚动，但是无论我碰巧出现在哪个位置，它都不会在我单击的图像上打开。我怎样才能做到这一点？

我尝试将data-target="#carousel"的{{1}}周围的a添加到img上，但这没有用；当我单击图像时，屏幕只是变黑了。

更新：我在另一个站点上使用了完全相同的代码，它的工作就像一个魅力。我的猜测是这是Javascript问题，但我对此几乎一无所知，所以不知道从哪里开始。

Answer 1

它无处不在：

将data-slide-to上的a属性替换为onclick="$('.carousel').carousel(<?php echo $slideNumber; ?>)"。按预期工作。

以前的站点是fl幸。原来，它使用的插件之一是添加一些使之正常工作的脚本。

从缩略图阵列链接到轮播中的特定幻灯片

1 个答案: