Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script>
- $(document).ready(function () {
- $(document).on("click", ".openImageDialog", function () {
- var myImageId = this.id;
- $(".modal-body #myImage").attr("src", myImageId);
- console.log("src " + this.id)
- console.log(this);
- });
- });
- </script>
- <div *ngFor="let image of childPhotos">
- <div class="gallery">
- <a href="#gardenImage" data-id={{image.url}} class="openImageDialog thumbnail" data-toggle="modal">
- <img class="img-responsive" src={{image.url}} alt={{image.title}}>
- </a>
- <div class="desc">{{image.title}}</div>
- </div>
- </div>
- <div class="modal" id="gardenImage" tabindex="-1" role="dialog">
- <div class="modal-dialog modal-lg" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title">Modal title</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <div class="modal-body">
- <img class="img-responsive img-fluid" id="myImage" src="" alt="">
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- <div *ngFor="let image of childPhotos">
- <div class="gallery">
- <a href="#gardenImage" data-id={{image.url}} data-title={{image.title}} class="openImageDialog thumbnail" data-toggle="modal">
- <img class="img-responsive" src={{image.url}} alt={{image.title}}>
- <div class="hidden" data-title={{image.title}}></div>
- </a>
- <div class="desc">{{image.title}}</div>
- </div>
- </div>
- <script>
- $(document).ready(function () {
- $(document).on("click", ".openImageDialog", function () {
- console.log(this);
- var myImageId = this.id;
- var myTitleId = this.title;
- console.log("myTitle " + myTitleId);
- $(".modal-body #myImage").attr("src", myImageId);
- $(".modal-title").text(myTitleId);
- console.log("src " + this.id)
- console.log(this);
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement