如何使用属于这张专辑的专辑照片打开一个bootstrap模式而不是所有照片?

时间:2017-03-11 14:19:42

标签: php jquery twitter-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>

因此,当我点击每张照片时,它会打开一个显示所有相册照片的模式。

我需要点击一张照片,然后打开一个自举模式,其中只包含包含在此相册中的照片

0 个答案:

没有答案