Programming Steps: 221A Ionic-v1 Ionic zoomable images gallery

Ionic zoomable images gallery
code example:

<html ng-app="demoApp">
  <head>
    <meta charset="utf-8">
    <title>
      Zoomable images
    </title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">  
    <link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
<style>
ion-content{
	background-color: grey;
}

.container{
	background-color: grey;
}

.scrollCanvas{
  width: 100%;
  height: 100%;
  background-color: black;
}

.image{
  	width: 100%;
  	height: 600px;
  	background-size: contain;
  	background-repeat: no-repeat;
  	background-position: center, center;
}  
    </style>
  </head>
  
  <body class="padding" ng-controller="DemoCtrl">
    <ion-content>
     
    <ion-slide-box>
	
		      <ion-slide ng-repeat="image in images"> 
             <div class="container" ng-if="slideVisible($index)" class="scrollCanvas">
                  <ion-scroll class="scrollCanvas" zooming="true" min-zoom="1" direction="xy" locked="false">
                        <div class="image" style="background-image: url( {{image}} )"></div>  
                  </ion-scroll>
             </div>
             <div> </div>
      </ion-slide>
	
	</ion-slide-box>

<br/><br/>
	 <a href="kaikreations.blogspot.com.es">Visit my blog for more tutorials</a>
	<br/><br/>
      
  </ion-content>
<script>
angular.module('demoApp', ['ionic'])
.controller('DemoCtrl',function($scope, $ionicSlideBoxDelegate) {
  
  $scope.images = [
    						 "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSeuNVzlDcFunjMxXa3_ui65_fJgwvT8Eq0M5GluaIbl5DJYLOaCI0McDw",
    						 "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTg_tgzzbgiZ9QnAe8-xtbnBe04jJ7Ke7s60llFYcwhiZqFQO1BQ6mqdh0W",
    						 "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQamBcgUQKpzafi4MNW6WYnS6wxvJCiQjKc_uoAz4ycmyHO2qvV0q4sCazG",
                   "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSqXQBbyRukbsao9ljVsi8SMW7GWVlXl2By4jS7QiqFNr3ChFf9Lw", 
                   "https://ga-core.s3.amazonaws.com/production/uploads/program/default_image/2034/Angularjs-Bootcamp-LONDON.jpg",
                 ]
  
  
	$scope.slideVisible = function(index){
		if(  index < $ionicSlideBoxDelegate.currentIndex() -1 
       || index > $ionicSlideBoxDelegate.currentIndex() + 1){
      return false;
    }
		
		return true;
	}
  
 
});  
    </script>
  </body>
</html>

https://codepen.io/-kaik-/pen/GggagK/

201706,20170602

Programming Steps

Friday, June 2, 2017

221A Ionic-v1 Ionic zoomable images gallery

No comments:

Post a Comment