Responsive image slide box in modal


#1

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">
      <head>
        <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>
      </head>
      <body ng-controller="mainCtrl">
        <ion-header-bar class="bar-energized">
          <h1 class="title">slide box in modal</h1>
        </ion-header-bar>
        <ion-content>
          <div class="list">
            <div class="item item-thumbnail-left" ng-click="openModal()">
              <h2>hehe</h1>
              <p>lala<br>llld</p>
            </div>
    			</div>
    		</ion-content>
    		<script id="modal.html" type="text/ng-template">
    			<div class="modal modal-slide">
    					<ion-slide-box>
    						<ion-slide class="slide-in-modal" ng-repeat="image in images">
    							<img ng-src="{{image.url}}" adaptive></img>
    						</ion-slide>
    					</ion-slide-box>
    			</div>
    		</script>
    	</body>
    </html>

//foo.js

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() {
    	$scope.modal.show();

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

adaptiveSlider.directive('adaptive',function(){
	var w = window.innerWidth || document.documentElement.clientWidth	|| document.body.clientWidth;
	var h = window.innerHeight || document.documentElement.clientHeight	|| document.body.clientHeight;
	return{
		link: function(scope, element, attrs, controller){
			var ow = element[0].width;
			var oh = element[0].height;
			if(w>h){
				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;
			}
			else{
				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].img.style.marginTop = margin;
			}
			i = null;
		}
	}; 
});

// foo.css

.modal.modal-slide{
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.slide-in-modal{
	display:table-cell;
	text-align: center;
	vertical-align:middle;
}

==============================

Help me! any solutions will be appreciated!

steve


#2

Woo!!! Edit it properly.


#3

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