in

wip-image-zoom on angularJS


I am trying to make an image that can be zoom on my project. Upon uploading an image I want to have that picture a property that can be zoom. I have a sample code below but facing an error as picture provided below in HTML side. Did I mess up the code to work it properly?. Here is the source of the property/options of the image

I have also tried to change my html side code into wip-image-zoom="image[options]" selected-model="image[selected]"selected-index="image[selectedIndex]"

I don’t get and error here but when I check into the HTML Element the class of right-top is not there but I put it in the JS code in boxPos.

JS

    $scope.$on("selectedFile", function (event, args, id) {
    if ($scope.attachments.length < 10) {
        $scope.$apply(function () {
            var today = new Date();
            var date = $filter('date')(today, "yyyyMMdd_HHmmss_sss");
            var filename = args.file.name.replace(/ /g, "_");
            var extn = filename.split(".").pop();
            var fileextn = "." + extn;
            $scope.attachname = "image_" + date + fileextn;
            if (id == 'images') {
                if (extn.toLowerCase() == "jpeg" || extn.toLowerCase() == "jpg" || extn.toLowerCase() == 'png') {
                    args.file.filename = $scope.attachname;
                    $scope.attachments.push(args.file);
                    //console.log($scope.attachments);

                    var reader = new FileReader();
                    reader.onload = $scope.imageIsLoaded;
                    reader.readAsDataURL(args.file);

                } else {
                    swal("Please upload files having extensions '.png', '.jpeg', and '.jpg' only.", "", "error");
                    document.getElementById('images').value = null;
                }
            }
        });
    }
    else {
        swal("Maximum allowed number of attachments exceeded.", "", "warning");
        document.getElementById('images').value = null;
    }
});

 $scope.imageIsLoaded = function (e) {
    $scope.$apply(function () {
        let imgP = {
            "url": e.target.result
        }
        //$scope.images.push(e.target.result);
        $scope.images.push(imgP);

        $timeout(() => {
            for (var i = 0; i < $scope.images.length; i++) {
                let img2 = [];
                var data = {
                    thumb: $scope.images[i],
                    medium: $scope.images[i],
                    large: $scope.images[i]
                };
                img2.push(data);

                $scope.images[i].options = {
                    zoomEnable: true,
                    defaultIndex: 0, // Order of the default selected Image
                    images: img2,
                    style: 'box', // inner or box
                    boxPos: 'right-top', // e.g., right-top, right-middle, right-bottom, top-center, top-left, top-right ...
                    boxW: 600, // Box width
                    boxH: 400, // Box height
                    method: 'lens', // fallow 'lens' or 'pointer'
                    cursor: 'zoom-in', // 'none', 'default', 'crosshair', 'pointer', 'move'
                    lens: true, // Lens toggle
                    zoomLevel: 4, // 0: not scales, uses the original large image size, use 1 and above to adjust.
                    immersiveMode: '769', // false or 0 for disable, always, max width(px) for trigger
                    immersiveModeOptions: {}, // can extend immersed mode options
                    immersiveModeMessage: 'Click to Zoom', // Immersive mode message
                    prevThumbButton: '◁', // Prev thumb button (html)
                    nextThumbButton: '▷', // Next thumb button (html)
                    thumbsPos: 'bottom', // Thumbs position: 'top', 'bottom'
                    thumbCol: 3, // Thumb column count
                    thumbColPadding: 4 // Padding between thumbs
                };
            }
        }, 100)
    });
}

HTML

 <div class="thumb-item" ng-repeat="image in images track by $index">
     <a class="link-remove" href="#" ng-click="remove($index)">
      <i class="fas fa-times"></i>
        </a>
      <img src={{image.url}}
       wip-image-zoom="image.options"
        selected-model="image.selected"
         selected-index="image.selectedIndex"
         class="img-attachment" />
       </div>

enter image description here



Source: https://stackoverflow.com/questions/70602554/wip-image-zoom-on-angularjs

Multi-Modal Machine Learning toolkit based on PyTorch

trouble aliasing columns correctly with multiple left joins