javascript - 如何将图片库放入Bootstrap模式中？

我尝试使用来自此贡献者的示例：http://www.bootply.com/alcaraz/QxGeDFsS8G

但是，当我尝试将其应用于场景时，单击“图像类别”链接只会使我回到页面顶部。这是我的HTML：

<div class="container">

        <div class="col-md-6 col-md-offset-3 text-center wrap_title">
            <h2>Photographer Photography</h2>


        </div>

        <div class="row">

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="New Life" href="#"><h3>NEWLIFE</h3>
            <img class="thumbnail img-responsive newb"></a>
            </div>

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="Still Growing" href="#"><h3>STILL GROWING</h3>
            <div class="kid"></div></a>
            </div>

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="Family" href="#"><h3>FAMILY</h3>
            <div class="fam"></div></a>
            </div>
        </div>

        <div class="row tworow">

            <div class="col-12 col-md-4 col-sm-6  wow fadeInDown text-center">
            <a title="Seniors" href="#"><h3>SENIOR</h3>
            <div class="milestone"></div></a>
            </div>

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="YOU + ME" href="#"><h3>YOU + ME</h3>
            <div  class="unme"></div></a>
            </div>

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="I DO" href="#"><h3>I DO</h3>
            <div  class="marriage"></div></a>
            </div>

        </div>
    </div>
</div>



   <div class="hidden" id="img-repo">



                    <!--#image-1 -->
                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive" title="1" src="img/galleries/baby/1.png" alt="">
                        </div>

                        <div class="item" id="image-1" >
                            <img  class="thumbnail img-responsive"  title="2" src="img/galleries/baby/2.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="3" src="img/galleries/baby/3.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="4" src="img/galleries/baby/4.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="5" src="img/galleries/baby/5.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="6" src="img/galleries/baby/6.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="7" src="img/galleries/baby/7.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="8" src="img/galleries/baby/8.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="9" src="img/galleries/baby/9.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="10" src="img/galleries/baby/10.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="11" src="img/galleries/baby/11.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="12" src="img/galleries/baby/12.png" alt="">
                        </div>

                </div>
            </div>

            <!-- MODAL CODE -->
            <div class="modal" id="modal-gallery" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                    <div class="modal-header">
                         <button class="close" type="button" data-dismiss="modal">×</button>
                            <h3 class="modal-title"></h3>
                    </div>
                    <div class="modal-body">
                        <div id="modal-carousel" class="carousel">

                            <div class="carousel-inner">
                            </div>

                            <a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        <a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

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

在我看来，图库类别的href应该指向其他内容。在我给出的示例中，它们指向“＃”。我无法弄清楚为什么此方法适用于示例，但不适用于我的情况。目前，我只为第一类图像创建了HTML。一旦可以使它正常工作，我将添加其他类别的图像。有什么我可以忽略的简单事情吗？

谢谢。

最佳答案

这解决了问题。

将来自Bootply的JS包装在jQuery $(document).ready(function(){ .. js code here.. }();中，以便在加载DOM之后正确绑定。

关于javascript - 如何将图片库放入Bootstrap模式中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29758283/