使用每张专辑的Bootstrap Modal显示专辑图像

时间:2017-03-11 00:26:36

标签: php jquery twitter-bootstrap

我创建了bootstrap模式。以下图片是专辑封面图片

 <ul class="list-inline galleryItems">
  @foreach($albums as $album)
  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to=""><img  src="{{ url('src/images/gallery/albums_cover',$album->photo->name) }}"><br>
      Caption</a></li>
     @endforeach
  <!--end of thumbnails-->

我创建了模态的主体和页脚如下

<div class="modal fade" id="myModal">
    <br><br><br><br>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="pull-left">My Gallery Title</div>
                <button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
            </div>
            <div class="modal-body">

                <!--begin carousel-->
                <div id="myGallery" class="carousel slide" data-interval="false">
                    <div class="carousel-inner">

                        <div class="item active "> <img src="{{ url('src/images/gallery/albums_cover',$first_album->photo->name) }}" alt="item{{ $album->id }}" />
                            <div class="carousel-caption">
                                <h3></h3>
                                <p></p>
                            </div>
                        </div>

                        @foreach($albums as $album)
                        @foreach($album->photos as $photo)
                        <div class="item"> <img  src="{{ url("src/images/gallery/album{$album->id}",$photo->name)  }}" alt="" />
                            <div class="carousel-caption">
                                <h3></h3>
                                <p></p>
                            </div>
                        </div>
                        @endforeach
                        @endforeach
                    </div>
                    <!--Begin Previous and Next buttons-->
                    <a class="left carousel-control" href="#myGallery" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myGallery" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
                    <!--end carousel--></div>
                    <!--end modal-body--></div>
                    <div class="modal-footer">
                        <div class="pull-left">
                            <small>Photographs by <a href="#" target="new">Lorempixel.com</a></small>
                        </div>
                        <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
                        <!--end modal-footer--></div>
                        <!--end modal-content--></div>
                        <!--end modal-dialoge--></div>
                        <!--end myModal-->></div>

因此,每次我点击任何相册,它都会显示所有照片。我只想显示属于该文件夹的图像

先谢谢你

0 个答案:

没有答案