koolay/Ionic-Modal-+-Slide-Box---Fullscreen-images.markdown

## index.html
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Fullscreen Image with Slide Box</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="ionicApp">
    <ion-view ng-controller="MainCtrl">

      <div class="bar bar-header bar-positive">
          <h1 class="title">Header</h1>
      </div>

      <ion-content class="has-header">
          <div class="card">
              <div class="item item-divider">
                  Fullscreen images + Slide Box
              </div>
              <div class="item item-text-wrap">
                  <div class="button-bar">
                      <a class="button" ng-click="openModal()">Show images</a>
                  </div>
              </div>
          </div>

          <script id="image-modal.html" type="text/ng-template">
              <div class="modal image-modal transparent"
                   ng-click="closeModal()">
                <ion-slide-box on-slide-changed="slideChanged(index)"
                               show-pager="false">
                  <ion-slide ng-repeat="oImage in aImages">
                    <img ng-src="{{oImage.src}}" class="fullscreen-image" />
                    <p class="info">{{oImage.msg}}</p>
                  </ion-slide>
                </ion-slide-box>
              </div>
          </script>

      	</ion-content>

        <div class="bar bar-footer bar-balanced">
          <div class="title">Footer</div>
        </div>

		</ion-view>
  </body>
</html>

## Ionic-Modal-+-Slide-Box---Fullscreen-images.markdown

      
    Raw
  

              Ionic-Modal-+-Slide-Box---Fullscreen-images.markdown
            
          
    Ionic Modal + Slide Box - Fullscreen images

A basic example on how to show fullscreen images (if possible) within a modal using a slide box
Forked from Roberto De la Fuente O.'s Pen Ionic Modal + Slide Box - Fullscreen images.
A Pen by Michael Frohberg on CodePen.
License.

  
## script.js
angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', ['$scope', '$ionicModal', '$ionicSlideBoxDelegate', function ($scope, $ionicModal, $ionicSlideBoxDelegate) {

  	$scope.aImages = [{
      	'src' : 'http://ionicframework.com/img/ionic-logo-blog.png',
      	'msg' : 'Swipe me to the left. Tap/click to close'
    	}, {
        'src' : 'http://ionicframework.com/img/ionic_logo.svg',
        'msg' : ''
      }, {
        'src' : 'http://ionicframework.com/img/homepage/phones-weather-demo@2x.png',
        'msg' : ''
    }];

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

    $scope.openModal = function() {
      $scope.modal.show();
      // Important: This line is needed to update the current ion-slide's width
      // Try commenting this line, click the button and see what happens
      $ionicSlideBoxDelegate.update();
    };

    $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!');
    });

    // Call this functions if you need to manually control the slides
    $scope.next = function() {
      $ionicSlideBoxDelegate.next();
    };

    $scope.previous = function() {
      $ionicSlideBoxDelegate.previous();
    };

    // Called each time the slide changes
    $scope.slideChanged = function(index) {
      $scope.slideIndex = index;
    };
  }
]);

## style.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;
}
.slider {
  width: 100%;
  height: 100%;
}

p.info {
  position: absolute;
  bottom: 55px;
  margin: 0 auto;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 28px;
  color: #ffffff;
}
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Ionic Fullscreen Image with Slide Box</title>

	<link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
	<script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
	</head>
	<body ng-app="ionicApp">
	<ion-view ng-controller="MainCtrl">

	<div class="bar bar-header bar-positive">
	<h1 class="title">Header</h1>
	</div>

	<ion-content class="has-header">
	<div class="card">
	<div class="item item-divider">
	Fullscreen images + Slide Box
	</div>
	<div class="item item-text-wrap">
	<div class="button-bar">
	<a class="button" ng-click="openModal()">Show images</a>
	</div>
	</div>
	</div>

	<script id="image-modal.html" type="text/ng-template">
	<div class="modal image-modal transparent"
	ng-click="closeModal()">
	<ion-slide-box on-slide-changed="slideChanged(index)"
	show-pager="false">
	<ion-slide ng-repeat="oImage in aImages">
	<img ng-src="{{oImage.src}}" class="fullscreen-image" />
	<p class="info">{{oImage.msg}}</p>
	</ion-slide>
	</ion-slide-box>
	</div>
	</script>

	</ion-content>

	<div class="bar bar-footer bar-balanced">
	<div class="title">Footer</div>
	</div>

	</ion-view>
	</body>
	</html>
	angular.module('ionicApp', ['ionic'])

	.controller('MainCtrl', ['$scope', '$ionicModal', '$ionicSlideBoxDelegate', function ($scope, $ionicModal, $ionicSlideBoxDelegate) {

	$scope.aImages = [{
	'src' : 'http://ionicframework.com/img/ionic-logo-blog.png',
	'msg' : 'Swipe me to the left. Tap/click to close'
	}, {
	'src' : 'http://ionicframework.com/img/ionic_logo.svg',
	'msg' : ''
	}, {
	'src' : 'http://ionicframework.com/img/homepage/phones-weather-demo@2x.png',
	'msg' : ''
	}];

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

	$scope.openModal = function() {
	$scope.modal.show();
	// Important: This line is needed to update the current ion-slide's width
	// Try commenting this line, click the button and see what happens
	$ionicSlideBoxDelegate.update();
	};

	$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!');
	});

	// Call this functions if you need to manually control the slides
	$scope.next = function() {
	$ionicSlideBoxDelegate.next();
	};

	$scope.previous = function() {
	$ionicSlideBoxDelegate.previous();
	};

	// Called each time the slide changes
	$scope.slideChanged = function(index) {
	$scope.slideIndex = index;
	};
	}
	]);
	.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;
	}
	.slider {
	width: 100%;
	height: 100%;
	}

	p.info {
	position: absolute;
	bottom: 55px;
	margin: 0 auto;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 28px;
	color: #ffffff;
	}