Hi all.

I am a noob and need help in how to implement a bootstrap modal box within a collection loop to show details of each collection element.

Here's my template...

<div class="container" style="margin-bottom: 120px;">
<div class="row">
<header>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</header>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="review-row">
{{ collection:reviews paginate="true" as="posts" limit="12" }}
        {{ posts scope="tag" }}
        {{ partial:review-box-test }}
        {{ /posts }}
        {{ /collection:reviews }}
      </div>
    </div>
  </div>
</div>

And here's the partial "review-box-test" with the contents of the collection loop with the bootstrap data-toggle in it.

<div class="col-lg-4">
  <div class="review-block">
      {{ partial:modal }}
    <a href="#" data-toggle="modal" data-target="#exampleModal">
      <div class="review-preview">
        <img src="{{ vid-photo }}" />
      </div>
      <div class="info-wrapper">
        <div class="review-name">
          <span>{{ Name }}</span>
        </div>
        <div class="review-loc">
          <span>{{ location }}</span>
        </div>
      </div>
    </a>
  </div>
</div>

The partial modal code is:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <a href=" {{ url }}">
                    <div class="review-preview">
                            <img src="{{ vid-photo }}" />
                          </div>
                          <div class="info-wrapper">
                            <div class="review-name">
                              <span>{{ Name }}</span>
                            </div>
                            <div class="review-loc">
                              <span>{{ location }}</span>
                            </div>
                          </div></a>
            </div>
          </div>
        </div>
      </div>

So my problem is that while the loop works for showing the thumbnails on the page, when I click on any thumbnail to bring up the modal box it only shows the first element in the collection loop in the modal box for all elements. Any idea why the other elements within the collection are not showing properly in the modal popup?

Or if someone has an example or a better way of popping a modal from a collection loop any help would be appreciated! Thanks in advance...