Enlarge dynamically loaded image on click event in angularjs

Question

I need to enlarge images in the table cell when user clicks on each image. But these images are loaded dynamically, there is a browse button which allows user to select one or more images. How do i proceed on this ?,on ng-click event image should enalrge. I saw an examples -

How to zoom image with angularJS

and but this is for static images.

html code ->

Angularjs code ->

ews.controller('ews', ['$scope', '$http', function ($scope, $http) {

    $scope.files = [];
    $scope.$on("fileSelected", function (event, args) {
        var r = "d";
        var item = args;
        $scope.files.push(item);
        var reader = new FileReader();

        reader.addEventListener("load", function () {
            $scope.$apply(function () {
                item.src = reader.result;
            });
        }, false);

        if (item.file) {
            reader.readAsDataURL(item.file);
        }
    });


    $scope.path = '';
    $scope.path2 = '';

    $scope.imageUpload = function (event) {
        console.log(event)
        var files = event.target.files;
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;

        for (var i = 0; i < files.length; i++) {
            reader.readAsDataURL(files[i]);
        }
    }

    $scope.zoom = function (filename) {

        var imageId = document.getElementById('view');
        if (imageId.style.width == "400px") {
            imageId.style.width = "300px";
            imageId.style.height = "300px";
        } else {
            imageId.style.width = "400px";
            imageId.style.height = "400px";
        }

       // var modal = document.getElementById('myModal');

       // // Get the image and insert it inside the modal - use its "alt" text as a caption
       // var img = document.getElementById('view');
       // var modalImg = document.getElementById("img01");
       //// var captionText = document.getElementById("caption");
       // img.onclick = function (filename) {
       //     modal.style.display = "block";
       //     modalImg.src = filename;
       //     //captionText.innerHTML = this.alt;
       // }

    }

}]);

ewipApp.directive('fileUpload', function () {
    return {
        scope: true, //create a new scope
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                //var d = diffFiles;
                //iterate files since 'multiple' may be specified on the element
                for (var i = 0; i < files.length; i++) {
                    //emit event upward
                    scope.$emit("fileSelected", {
                        file: files[i]
                    });
                }
            });
        }
    };
});

Thanks

sia · Accepted Answer

You can try with modal boxes as per your above requirement and here is reference link for it.

https://www.w3schools.com/howto/howto_css_modal_images.asp

Below is the code i tried implementing as per ur code and it works. Please try it.

html code:

Angularjs code :

$scope.zoom = function (filename) {

        var file = filename;
        var modal = document.getElementById('myModal');

        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var img = document.getElementById('view');
        var modalImg = document.getElementById("img1");
        modal.style.display = "block";

        for (var i = 0; i < $scope.files.length; i++) {
            if ($scope.files[i].file.name === file) {
                index = i;
                break;
            }
        }

        modalImg.src = $scope.files[i].src;
    }

 $scope.closeImage = function () {
        var modal = document.getElementById('myModal');
        modal.style.display = "none";
    }

Enlarge dynamically loaded image on click event in angularjs

Answers (1)

Related Questions