CODEWITHSUNDEEP
htmlcssbootstrap-4bolt
Mr.t
Mr.t

Reputation: 91

how to make modal show correct image?

I have two images that on hover shows a zoom button that will enlarge the said image in a modal, the issue is it only ever shows the first image. how do i make it pull the correct image? I'm also using bolt.

thanks for your help.

  <div class="container">
               <div class="row">

         {% for offering in offerings.offerings %}

                    <div class="col-sm-6">
                        <div class="offering-items">
                            <img src="{{ asset(offering.mimage.file, 'files') }}" alt="image" class="img-responsive">

                            <div class="overlay2">
                                <button data-target="#myModal" data-toggle="modal" class="zoom">zoom</button>
                            </div>
                        </div>
                    </div>


                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-body">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <img src="{{ asset(offering.mimage.file, 'files') }}" alt="image" class="img-responsive">
                        </div>
                    </div>
                </div>
      {% endfor %}
      <!-- end -->
            </div>

Upvotes: 1

Views: 62

Answers (0)

Related Questions