Skip to content

Instantly share code, notes, and snippets.

@koolay

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

Forked from mfrohberg/Ionic-Modal-+-Slide-Box---Fullscreen-images.markdown
Last active August 29, 2015 14:26
Show Gist options
  • Save koolay/3272c624e0c646666fcc to your computer and use it in GitHub Desktop.
Save koolay/3272c624e0c646666fcc to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Modal + Slide Box - Fullscreen images
Raw
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>
Raw
Ionic-Modal-+-Slide-Box---Fullscreen-images.markdown
Raw
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/[email protected]',
'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;
};
}
]);
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment