Ionic Click on the image to see the implementation of large image

After showing a few pictures on the page, because it is the phone side, the picture will be a little bit of feeling, just think how to let the user click on the small picture to see the big picture, the project Ionic combined with ANGULARJS to achieve this function

1. First of all three small graphs should add a function, when click on the image to trigger a large map, the code is as follows:

Html:

<div class= "Row padding" >
<div class= "Col"
Style= "width:100px;height:100px;padding:3px;-webkit-box-shadow:0 0 10px RGB (153,134,117);-moz-box-shadow:0 0 10px RGB (153,134,117); box-shadow:0 0 10px RGB (153,134,117); Border-radius:3px;margin: -1px 0 0-1px;text-align:center ">
Ng-src= "{{imgurl+shop. Images[0]}} "ng-click=" Shoubigimage (' {{imgurl+shop. Images[0]} ') ">
</div>
&nbsp;&nbsp;&nbsp;
<div class= "Col"
Style= "width:100px;height:100px;padding:3px;-webkit-box-shadow:0 0 10px RGB (153,134,117);-moz-box-shadow:0 0 10px RGB (153,134,117); box-shadow:0 0 10px RGB (153,134,117); Border-radius:3px;margin: -1px 0 0-1px;text-align:center ">
        <!--ng-click= "shoubigimage(' {{imgurl+shop. IMAGES[1]} ') "The URL passed here is called from the service and can be transmitted locally. -

                     Ng-src= "{{imgurl+shop. IMAGES[1]}} "ng-click="shoubigimage(' {{imgurl+shop. IMAGES[1]} ') ">
    </div>
    &nbsp;&nbsp;&nbsp;
    <div class= "Col"
         Style= "width:100px;height:100px;padding:3px;-webkit-box-shadow:0 0 10px RGB (153,134,117);-moz-box-shadow:0 0 10px RGB (153,134,117); box-shadow:0 0 10px RGB (153,134,117); Border-radius:3px;margin: -1px 0 0-1px;text-align:center ">
                     Ng-src= "{{imgurl+shop. IMAGES[2]}} "ng-click=" Shoubigimage (' {{imgurl+shop. IMAGES[2]} ') ">
    </div>
</div>

Js:

Click image to enlarge
$scope. Shoubigimage = function (imageName) {  //pass a parameter (the URL of the picture)
    $scope. Url = imageName;                   $scope define a variable URL, which you can click to hide the larger image after it appears
    $scope. Bigimage = true;                   Show large image
};

2. Define a div that shows the code for the larger image as follows:

Html:

<div id= "Rightdisplay" ng-if= "bigimage" class= "Popover-backdrop"
     Style= "POSITION:FIXED;TOP:0;LEFT:0;Z-INDEX:10; width:100%;height:100%; "
     Ng-click= "Hidebigimage ()" >
             Style= "POSITION:ABSOLUTE;TOP:10%;LEFT:50%;Z-INDEX:10;DISPLAY:BLOCK;MARGIN-TOP:18PX;
         Margin-left: -165px;height:420px;width:330px; box-shadow:0 1px 3px rgba (0, 0, 0, 0.4); "
         Src= "{{Url}}"/>
</div>

Here I use ng-if, but not with ng-show,ng-hide, because they will flash first and then hide, background color using RGBA is very convenient, can adjust the transparency

Js:

$scope. Bigimage = false;    The initial default large image is hidden
$scope. hidebigimage = function () {
    $scope. Bigimage = false;
};

3. as follows:

Small Picture:

Large

Ionic Click on the image to see the implementation of large image