ionic display fullscreen image on click

Question

i am building a mobile app using Ionic. Created a layout similar to this --> Card Layout

How to show the card image on full screen when the image gets clicked by user and back to normal when clicked again.

Plese find the exisitng code below: home-ctrl.js

(function () {
'use strict';

angular.module('testApp').controller('HomeCtrl', ['$scope', 'collegeApi', '$ionicModal', HomeCtrl]);

function HomeCtrl($scope, collegeApi, $ionicModal) {
    var vm = this;

    vm.imgList = [
        {
            name: 'slider2.jpg'
    },
        {
            name: 'slider3.jpg'
    },
        {
            name: 'slider4.jpg'
    },
        {
            name: 'slider5.jpg'
    }];


    $scope.homeEvents = collegeApi.getHomeData();
    console.log($scope.homeEvents);



};

})();

home.html

<ion-view view-title="Home" ng-controller="HomeCtrl as vm">
<ion-content>
    <ion-slide-box>
        <ion-slide ng-repeat="img in vm.imgList">
            <img ng-src="http://lorempixel.com/400/200/" class="full-image">
        </ion-slide>
    </ion-slide-box>

    <div class="list card back-color" ng-repeat="homeEvent in homeEvents">

        <div ng-switch="homeEvent.type">
            <div ng-switch-when='star'>
                <div class="item item-icon-left item-energized">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="event">
                <div class="item item-icon-left item-calm">
                    <i class="icon ion-android-calendar light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="sport">
                <div class="item item-icon-left item-balanced">
                    <i class="icon ion-android-bicycle light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-default>
                <div class="item item-icon-left item-dark">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
          Header</h2>
                </div>
            </div>
        </div>



        <div class="item item-body">
            <img class="full-image" src="http://lorempixel.com/400/200/" ng-click="buttonClick('img/conference.jpg')">
            <p>
                <div class="text-justify" data-markdown="{{homeEvent.details}}"></div>
            </p>

        </div>
        <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
                <i class="icon ion-share"></i> Share
            </a>
        </div>


    </div>



</ion-content>

Here is the screen shot : Screen shot

Answer 1

Following these steps hope so this will help you

First use in your .HTML file this script

 <script id="modal.html" type="text/ng-template">
                        <div class="modal" ng-click="closeModal()">
                        <ion-content>
                        <img src="{{imgUrl}}" style="display:block; width:100%; max-width:600px; margin:auto"/>
                        </ion-content>
                        </div>
                    </script>

Second Use in Your Controller

$ionicModal.fromTemplateUrl('modal.html', function (modal) {
                $scope.gridModal = modal;
            }, {
                scope: $scope,
                animation: 'slide-in-up'
            })
            $scope.openModal = function (data) {
                $scope.inspectionItem = data;
                $scope.gridModal.show();
            }
            $scope.closeModal = function () {
                $scope.gridModal.hide();
            }

3rd Use in your CSS file

.modal .scroll {
height: 100% !important;
background-color: black !important;

display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;

-webkit-box-direction: normal !important;
-moz-box-direction: normal !important;
-webkit-box-orient: horizontal !important;
-moz-box-orient: horizontal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;


-webkit-box-align: center !important;
-moz-box-align: center !important;
-webkit-align-items: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}

Edited: Just Copy and paste the code into the files, and change the parameter of imgeURI to your image URL. The java script automatic call by id modal.html and on the image View click use

ng-click="openModal(imageUrl)"

Answer 2

Got the solution as per APK APPS

Here is the updated code:

My Controller :

(function () {
'use strict';

angular.module('testApp').controller('HomeCtrl', ['$scope', 'collegeApi', '$ionicModal', HomeCtrl]);

function HomeCtrl($scope, collegeApi, $ionicModal) {
    var vm = this;

    vm.imgList = [
        {
            name: 'slider2.jpg'
    },
        {
            name: 'slider3.jpg'
    },
        {
            name: 'slider4.jpg'
    },
        {
            name: 'slider5.jpg'
    }];


    $scope.homeEvents = [
        {
            type: 'star',
            name: 'Awesome'
    },
        {
            type: 'sport',
            name: 'Rocks'
    },
        {
            type: 'event',
            name: 'New event'
    },
        {
            type: 'other',
            name: 'Lorem'
    }];


    $ionicModal.fromTemplateUrl('modal.html', function (modal) {
        $scope.gridModal = modal;
    }, {
        scope: $scope,
        animation: 'slide-in-up'
    })
    $scope.openModal = function (data) {
        $scope.inspectionItem = data;
        $scope.gridModal.show();
    }
    $scope.closeModal = function () {
        $scope.gridModal.hide();
    }

    };
})();

My HTML:

<ion-view view-title="Home" ng-controller="HomeCtrl as vm">
<ion-content>
    <ion-slide-box>
        <ion-slide ng-repeat="img in vm.imgList">
            <img ng-src="http://lorempixel.com/400/200/" class="full-image">
        </ion-slide>
    </ion-slide-box>

    <div class="list card back-color" ng-repeat="homeEvent in homeEvents">

        <div ng-switch="homeEvent.type">
            <div ng-switch-when='star'>
                <div class="item item-icon-left item-energized">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="event">
                <div class="item item-icon-left item-calm">
                    <i class="icon ion-android-calendar light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-when="sport">
                <div class="item item-icon-left item-balanced">
                    <i class="icon ion-android-bicycle light"></i>
                    <h2 class="light font-size-1">
           Header</h2>
                </div>
            </div>
            <div ng-switch-default>
                <div class="item item-icon-left item-dark">
                    <i class="icon ion-star light"></i>
                    <h2 class="light font-size-1">
          Header</h2>
                </div>
            </div>
        </div>



        <div class="item item-body">
            <img class="full-image" src="http://lorempixel.com/400/200/" ng-click="openModal('http://lorempixel.com/400/200/')">
            <p>
                <div class="text-justify" data-markdown="{{homeEvent.details}}"></div>
            </p>

        </div>
        <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
                <i class="icon ion-share"></i> Share
            </a>
        </div>


    </div>

    <script id="modal.html" type="text/ng-template">
        <div class="modal" ng-click="closeModal()">
            <ion-content>
                <img src="http://lorempixel.com/400/200/" style="display:block; width:100%; max-width:600px; margin:auto" />
            </ion-content>
        </div>
    </script>

</ion-content>

MY CSS:

.modal .scroll {
height: 100% !important;
background-color: black !important;
display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-direction: normal !important;
-moz-box-direction: normal !important;
-webkit-box-orient: horizontal !important;
-moz-box-orient: horizontal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
-webkit-box-align: center !important;
-moz-box-align: center !important;
-webkit-align-items: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}