Je travaille sur un projet ASP.NET MVC 5. Là, montrant des images. Mais il ne montre pas la grande image respectivement en cliquant sur la petite image.
Voici le code jQuery :
$('.preview-thumbnail li a').click(function () {
var target = $(this).data('target');
if(target){
$(target).toggleClass('active');
}
}); <div class="col-sm-5">
<div class="preview">
<div class="preview-pic tab-content">
@{ int i = 0;
foreach (var item in Model.Images)
{
i++;
<div class="tab-pane" id="pic-@i"><img style="width:400px;height:252px" src="@item.ImagePath"></div>
}
}
</div>
<ul class="preview-thumbnail nav nav-tabs">
@{ int j = 0;
foreach (var item in Model.Images)
{
j++;
<li class="active"><a data-target="#pic-@j" data-toggle="tab"><img style="width:200px;height:50px" src="@item.ImagePath"></a></li>
}
}
</ul>
</div>
</div>Comment puis-je afficher une image contextuelle respectivement en cliquant sur la vignette ? Aidez-moi, s'il vous plaît...
Si vous souhaitez basculer entre les classes, vous pouvez utiliser JQuery .toggleClass('active'), comme ceci :
$('.preview-thumbnail li a').click(function () {
var target = $(this).data('target');
if(target){
$(this).toggleClass('active');
}
});
Il supprimera la classe active si l'élément a déjà cette classe.
Voulez-vous que l'utilisateur clique sur la vignette pour l'agrandir ? Il existe des plugins JQuery pour aider à créer cet effet, comme Magnific Popup , puisque vous utilisez déjà JQuery.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots