MagnificPopup：在单击时在相应元素处内联关联一个项目

编程问答 2022-05-30

问题描述

我有以下 HTML 代码：

<section id="tm-section-3" class="tm-section tm-section-carousel">
                        <div>
                            <header class="mb-4"><h2 class="tm-text-shadow">Libri</h2></header>                 
                            <div class="tm-img-container">
                                <div class="tm-img-slider-2">
                                    <img src="img/book1.jpg" alt="Book1" class="img-fluid">
                                    <img src="img/book2.jpg" alt="Book2" class="img-fluid">
                                    <img src="img/book3.jpg" alt="Book3" class="img-fluid">
                                </div>
                            </div>                                    
                        </div>                          
                    </section>

然后我启动了以下 magnificPopup：

// Init Magnific Popup
                $('.tm-img-slider-2').magnificPopup({
                    items: [
                      {
                        src: '<div class="container"><p><h4>Book 1</h4><p>This is book 1</p></div>',type: 'inline'
                      },{
                        src: '<div class="container"><p><h4>Book 2</h4><p>This is book 2</p></div>',type: 'inline'
                       },{
                        src: '<div class="container"><p><h4>Book 3</h4><p>This is book 3</p></div>',type: 'inline'
                      }
                    ],gallery: {
                      enabled: true,navigateByImgClick: true
                    },});

我想要的行为是当我点击“Book 2”图像元素时，弹出窗口会立即出现“This is book 2”（第二个项目）项目，但实际上当我点击任何图像元素时,将始终显示为“这是第一本书”，即第一项（我必须始终从箭头浏览图库以显示所需元素）。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptjquerymagnific-popup