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.
Forked from mfrohberg/Ionic-Modal-+-Slide-Box---Fullscreen-images.markdown
Last active
August 29, 2015 14:26
-
-
Save koolay/3272c624e0c646666fcc to your computer and use it in GitHub Desktop.
Ionic Modal + Slide Box - Fullscreen images
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| }; | |
| } | |
| ]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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