LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    

    Ionic Fullscreen Image
  
    
    
  
  
    
      

Header

Fullscreen images
CSS
.transparent {
  background: transparent !important;
}
.image-modal {
  width: 100% !important;
  height: 100%;
  top: 0 !important;
  left: 0 !important;
}
.fullscreen-image {
  max-width: 100%;
  max-height: 100%;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
}

/* Fix modal backdrop for smaller devices */
@media (max-width: 679px) {
  .active .modal-backdrop-bg {
    opacity: .5;
  }
  .modal-backdrop-bg {
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    background-color: #000;
    opacity: 0;
  }
}
JS
angular.module('ionicApp', ['ionic']).controller('FullscreenImageCtrl', ['$scope', '$ionicModal',
  function ($scope, $ionicModal) {

    $ionicModal.fromTemplateUrl('image-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
    });

    $scope.openModal = function() {
      $scope.modal.show();
    };

    $scope.closeModal = function() {
      $scope.modal.hide();
    };

    //Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function() {
      $scope.modal.remove();
    });
    // Execute action on hide modal
    $scope.$on('modal.hide', function() {
      // Execute action
    });
    // Execute action on remove modal
    $scope.$on('modal.removed', function() {
      // Execute action
    });
    $scope.$on('modal.shown', function() {
      console.log('Modal is shown!');
    });

    $scope.imageSrc = 'https://ionicframework.com/img/ionic-logo-blog.png';

    $scope.showImage = function(index) {
      switch(index) {
        case 1:
          $scope.imageSrc = 'https://ionicframework.com/img/ionic-logo-blog.png';
          break;
        case 2:
          $scope.imageSrc  = 'https://ionicframework.com/img/ionic_logo.svg';
          break;
        case 3:
          $scope.imageSrc  = 'https://ionicframework.com/img/homepage/phones-weather-demo@2x.png';
          break;
      }
      $scope.openModal();
    }
  }
]);

Description

A basic example on how to show fullscreen images (if possible) within a modal
Term
Mon, 11/27/2017 - 21:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv