Comment utiliser bootstrap modal sur plusieurs images sur la même page de l'image, cliquez sur?

J'ai environ 18 images sur la page que je suis en train d'afficher de grandes dans un modal en cliquant sur l'image, mais il n'affiche que la première image à chaque fois.

J'ai essayé de traverser le DOM avec $(this).find('img') et je l'ai essayé avec des enfants aussi, j'ai essayé de définition des images à différents ids et la définition de ces comme une variable.

Ma tentative était de mettre la petite image du chemin d'accès à la même id que la plus grande image du chemin d'accès, puis en utilisant le trouver. Je n'ai que les deux premières images de "set-up" pour l'instant, puisque je ne peux pas obtenir le droit de travailler encore.

BTW, j'ai essayé d'autres méthodes de zoom avant et popovers et les plugins, sans succès non plus, c'est le plus proche je suis arrivé à quelque chose qui fonctionne.

Remarque: Il y a une autre question qui montre à peu près la même question, mais la réponse n'a pas fonctionné pour moi.

<img  height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='~/Content/MyPics/TextDollarPart1.JPG' alt='Text dollar code part one.' />  
<div id="myModal" class="modal fade" >
    <div class=" modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="1"src="~/Content/MyPics/TextDollarPart1.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>   
<img  height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src="~/Content/MyPics/TextDollarPart2.JPG" alt="Text dollar code part two." />
<div id="myModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="2" src="~/Content/MyPics/TextDollarPart2.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>

Script

$(document).ready(function () {       
    $('img').on('click', function () {
        var picID = $(this).attr('id');
         $(this).find('picID');
        $('picID').modal('toggle');      
    });
});

vous ne pouvez pas utiliser un id plus d'une fois. aussi, il est préférable d'être le plus descriptif avec des identifiants. par exemple, l'image de-2, modal-2. Les identifiants que vous avez (myModal, 1, 2) doit être utilisée une et une seule fois sur vos éléments.
J'ai essayé d'identificateurs uniques, il n'a pas de travail, donc en désespoir de cause j'ai essayé de faire la même pour la mise en correspondance de petites et de grandes images. Je suis seulement en utilisant un modal, de sorte que selon l'autre solution que j'ai vu, en nommant les données-cible tout de même est la bonne façon de procéder. Bien sûr, cette solution n'a pas fonctionné pour moi. Après avoir travaillé sur ce pendant 10 heures, les noms descriptifs n'est pas une priorité. Vous avez peut-être des suggestions utiles.
Pouvez envisager d'utiliser la zone d'ombre de la bibliothèque
si vous n'avez pas encore, vérifiez réponse ci-dessous

OriginalL'auteur Kirstin Walsh | 2015-11-21

Vous êtes très proche de votre but, vous avez 2 images

<img height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png' alt='Text dollar code part one.' />
<img height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png' alt='Text dollar code part one.' />

Un Modal

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Si vous souhaitez afficher une image en modal avec votre approche à l'aide de click fonction

$(document).ready(function () {
    $('img').on('click', function () {
        var image = $(this).attr('src');
        $('#myModal').on('show.bs.modal', function () {
            $(".img-responsive").attr("src", image);
        });
    });
});

Violon

Ou vous pouvez utiliser bootstrap modal l'événement fonction seulement, moins compliqué et une meilleure approche (solution recommandée)

$(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (e) {
            var image = $(e.relatedTarget).attr('src');
            $(".img-responsive").attr("src", image);
        });
});

Violon

J'ai essayé la deuxième approche que par votre réponse à une question similaire. Le modal est livré vide (structure illustrée de l'endroit où l'image serait, et je peux ajuster le contour de la taille avec la largeur et la hauteur, mais pas d'image). En outre, j'ai commenté le js, et le modal a continué de pop-up de toute façon. Comment est-ce même possible? MAIS, j'ai essayé la nouvelle js vous l'avez suggéré, et jusqu'à présent, mon premier groupe de photos sont à venir magnifiquement. Ne sais pas ce que je faisais mal, mais merci beaucoup!

OriginalL'auteur Shehary

1

Vous dire que vous avez 18 images, lorsque vous cliquez sur une image , le site va ouvrir un ouvrir pour afficher une image plus grande?

Alors pourquoi ne pas utiliser un autre plugin comme Nivo lightbox, qui vous permettent d'ouvrir un popup pour afficher une image, et même si mettre toutes vos images dans une galerie lors de l'ouverture d'un popup

OriginalL'auteur Phuong

Je suis l'apprentissage de l'anglais, donc je ne suis pas sûr si je comprends parfaitement, mais si vous voulez, c'est de montrer les différentes images dans un modal en cliquant sur chaque vignette. Je pense que ce code peut vous aider.

voici un Jsfiddle exemple:
Comment faire pour afficher plusieurs images sur la même modale

Et le code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<style type="text/css">
.my-img a {
display: inline-block;
margin: 10px;
border: 2px solid #CCC;
}
.my-img a:hover {
border: 2px solid #45AFFF;
}    
.modal-lg {
width: 86%;
}
.modal-body {
overflow: auto;
max-height: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<div class="row">
<div class="col-xs-12 my-img">
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="1.png" id="img1" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="2.png" id="img2" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="3.png" id="img3" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="4.png" id="img4" class="img-responsive" width="250px">
</a>          
</div>  
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">your image title here (can be dynamic) </h4>
</div>
<div class="modal-body" id="showImg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('img').on('click', function() {
$("#showImg").empty();
var image = $(this).attr("src");
$("#showImg").append("<img class='img-responsive' src='" + image + "' />")
//alert(image);
})
});
</script>
</body>
</html>

Merci, mais je ne veux pas afficher toutes mes photos dans un modal, qu'une seule image à la fois
Ouais, j'attrape l'idée, ce script peut afficher une image unique à la fois dans un modal. désolé si ce n'est pas expliquer moi la première fois.

OriginalL'auteur Quethzel

C'est un Travail d'Amende Pour Normal le Chemin de l'image Mais j'ai base64 image afin de ne pas travailler ce javascript.

<img src="<?php echo 'data:image/'.$imageFileType.';base64,'.$fetch_expance['expance_image'];?>" style="cursor: pointer;" data-toggle="modal" data-target="#myModal" width="100px" height="100px" /><br>

OriginalL'auteur Manish Patel

Vous devez vous connecter pour publier un commentaire.