Responsive image slide box in modal


hi guys,

i want to realize a slide box in modal for images that accords with:
1 the modal is fullscreen
2 images are responsive with full height in landscape mode or full width in portrait while rotating the screen and align center in horizontal or vertical

i use directive “adaptive” to change the css style of images, but i can’t get the size of them until they have been loaded, so images are not positioned correctly. the code like below:


// foo.html

    <!DOCTYPE html>
    <html ng-app="adaptiveSlider">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <title>Ionic Seed App</title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/foo.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.min.js"></script>
    		<script src="js/foo.js"></script>
        <script src="cordova.js"></script>
      <body ng-controller="mainCtrl">
        <ion-header-bar class="bar-energized">
          <h1 class="title">slide box in modal</h1>
          <div class="list">
            <div class="item item-thumbnail-left" ng-click="openModal()">
    		<script id="modal.html" type="text/ng-template">
    			<div class="modal modal-slide">
    						<ion-slide class="slide-in-modal" ng-repeat="image in images">
    							<img ng-src="{{image.url}}" adaptive></img>


var images = [{url:'img/1.jpg'},{url:'img/2.jpg'},{url:'img/4.jpg'}];
var adaptiveSlider = angular.module("adaptiveSlider",['ionic']);
adaptiveSlider.controller("mainCtrl",function($scope,$ionicModal, $ionicSlideBoxDelegate, $timeout) {
		$ionicModal.fromTemplateUrl('modal.html', {
    	scope: $scope,
    	animation: 'slide-in-up'
  		}).then(function(modal) {
    		$scope.modal = modal;
				$scope.images = images;
  	$scope.openModal = function() {

      $timeout( function() {
  	$scope.closeModal = function() {

	var w = window.innerWidth || document.documentElement.clientWidth	|| document.body.clientWidth;
	var h = window.innerHeight || document.documentElement.clientHeight	|| document.body.clientHeight;
		link: function(scope, element, attrs, controller){
			var ow = element[0].width;
			var oh = element[0].height;
				element[0].style.marginTop = "0px";
				element[0].style.height = "100%"; //landscape:full height
				var w1 = ow*h/oh;
				var margin = (w-w1)/2+"px";
				element[0].style.marginLeft = margin;
				element[0].style.marginLeft = "0px";
				element[0].style.width = "100%"; //portrait:full width
				var h1 = oh*w/ow;
				var margin = (h-h1)/2+"px";
				element[0] = margin;
			i = null;

// foo.css

  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	text-align: center;


Help me! any solutions will be appreciated!



Woo!!! Edit it properly.


sorry. it’s the first time to use this editor. i have formatted it again.