In my project I have type an image gallery. So far I upload the image and it is displayed on the page without any problem.
But now I need to click on the image to open a modal with the image in a larger size. But I can not do this dynamically, that is, when clicking on a particular image, the other data of that particular image appears in the modal. However, I can not make this modal open dynamically.
I need to reference it so that it is unique to a certain image, Can anyone help me?
What I already have is this:
Image Gallery
<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<div class="line"></div>
</div>
</div>
<div class="row">
@foreach (var item in Model)
{
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
</div>
<img src="@Html.DisplayFor(modelItem => item.Foto)" class="img-responsive" alt="" />
</a>
<div class="portfolio-caption">
<h4>@Html.DisplayFor(modelItem => item.Titulo)</h4>
<p class="text-muted">@Html.DisplayFor(modelItem => item.Descricao)</p>
</div>
</div>
}
</div>
</div>
</section>
Modal (which is not inside the foreach)
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"> </div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>@Html.DisplayFor(modelItem => item.Titulo)</h2>
<img src="@Html.DisplayFor(modelItem => item.Foto)" class="img-responsive" alt="" />
<p class="text-muted">@Html.DisplayFor(modelItem => item.Descricao)</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i>Fechar</button>
</div>
</div>
</div>
</div>
</div>
</div>