Question

我在web html5中使用了bootstrap 3和blueimp-gallery。我的问题是旋转木马 - 画廊不显示图像并在控制台中收到错误“未捕获的TypeError：无法读取未定义的属性'样式'当我在模态div中使用blueimp-gallery-carousel时，但如果我输入Chrome的开发人员工具，此错误消失，图像显示在carousel-gallery中。

代码。

<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->

<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>Vinilos</h2>
                            <div id="links">
                                <a href="images/productos/vinilos/02.jpg" title="Banana">1</a>
                                <a href="images/productos/vinilos/03.jpg" title="Apple">2</a>
                                <a href="images/productos/vinilos/04.jpg" title="Orange">3</a>
                                <a href="images/productos/vinilos/05.jpg" title="Banana"></a>
                                <a href="images/productos/vinilos/06.jpg" title="Apple"></a>
                                <a href="images/productos/vinilos/07.jpg" title="Orange"></a>
                            </div>

                            <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
                                <div class="slides"></div>
                                <h3 class="title"></h3>
                                <a class="prev">‹</a>
                                <a class="next">›</a>
                                <a class="play-pause"></a>
                                <ol class="indicator"></ol>
                            </div>

                            <p>Vinilos para rotulacion, decorativos, efecto espejo, fibra de carbono, refractivos, hologramas y farolas</p>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar Producto</button>                        
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

和我的javascript

<script>
    document.getElementById('links').onclick = function (event) {
      event = event || window.event;
      var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
      blueimp.Gallery(links, options);

    };
</script>

<script>
    blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery-carousel',
            carousel: true,
        }
    );
</script>

和链接网络问题

http://www.colombiawaterprint.com/web/index3.html

我如何解决此错误？

Answer 1

我相信你的问题是你的blueimp画廊最初是隐藏的，因为它在Bootstrap模态中。因此，当您首次初始化图库时，它无法找到图库。我认为您需要做的就是等待显示Bootstrap模式，然后然后初始化图库。

Bootstrap触发了一个您可以为此目的而监听的事件 - http://getbootstrap.com/javascript/#modals-events - 您可能想要shown.bs.modal事件。

您会使用类似这样的东西。（假设加载了jQuery）

$('#portfolioModal1').on('shown.bs.modal', function (e) {
  blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery-carousel',
            carousel: true,
        }
    );
})

请记住这是未经测试的代码，可能不会“正常工作”。但希望你能得到这个想法。您也可能想要进行测试以查看您是否已经初始化了库，因为它会在每次shown.bs.modal事件被触发时重新初始化它。

如何修复jquery错误“Uncaught TypeError：无法读取未定义的属性'样式'for modal Bootstrap中的blue-imp gallery？

1 个答案: