Geek Answers Handbook

Full-screen image with ion display

I am creating a mobile application using Ionic. Created a layout like this -> Map format

How to show the map image in full screen mode, when the image will be clicked by the user and return to normal operation when pressed again.

Plese find 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 a screenshot: Screenshot

+4
source share
2 answers

Following these steps hope this helps you

First use a .HTML script file

 <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();
            }

3 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;
}

: imgeURI URL- . java script modal.html .

ng-click="openModal(imageUrl)"

,

+8

APK APPS

:

:

(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();
    }

    };
})();

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;
}
+2

More articles:


All Articles