<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic App</title>
<link href="https://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
</head>
<body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController">
<ion-slide-box show-pager="false">
<ion-slide>
<ion-content style="top:0;background-color:#ffffff;" scroll="true" scrollbar-y="false">
<!-- start of grid -->
<div class="gridcontainer">
<ul>
<li class="gridRepeats" ng-repeat="grid in grids" ng-click="openModal(grid)">
<div class="image responsive" grid-image="{{grid.src}}" ></div>
<div class="details responsive" >{{grid.details}}</div>
</li>
</ul>
</div>
</ion-content>
</ion-slide>
</ion-slide-box>
<script id="modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar class="bar bar-header bar-light">
<h1 class="title">1961</h1>
<button class="button button-clear button-primary" ng-click="closeModal()"><span class="icon ion-ios7-close-outline"></span></button>
</ion-header-bar>
<ion-content class="has-header padding"scroll="true" scrollbar-y="false">
<img ng-src="{{data.selected.src}}" style="display:block; width:100%; max-width:600px; margin:auto"/>
<br />
<p style="text-align:justify;">
{{data.selected.details}}</p>
</ion-content>
</div>
</script>
</body>
</html>
.slider {
height: 100%;
}
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.details { float: left;
font-size: 1em;
text-align: center;
padding: 2%;
background-color: #fff;
}
.image {
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom left;
}
.responsive {
height: 275px;
width: 25%;
box-shadow: 0 0 0 5px white inset;
}
.gridRepeats:nth-child(4n+1), .gridRepeats:nth-child(4n+2) {
.details{
background-color: #9CD8D8;
}
}
View Compiled
angular.module('ionicApp', ['ionic'])
.controller('SlideController', function($scope, $ionicModal) {
$scope.data = {};
$scope.grids =[
{src:'http://lorempixel.com/400/200/sports/1/',details:'George Feldenkreis leaves Cuba with one-year-old son, Oscar, a pregnant wife and only $700. Faced with the immediate need to earn a living, he begins importing everything from auto parts to apparel.'},
{src:'http://lorempixel.com/400/200/sports/2/',details:'George travels to the Far East to develop key manufacturing relationships that pave the way for Supreme International, a business manufacturing school uniforms and 4-pocket linen Guayabera shirts that earns him the title: “King of Guayaberas.”'},
{src:'http://lorempixel.com/400/200/sports/3/',details:'Oscar Feldenkreis joins the company, using his keen fashion sense to transition the business from a private label distributor to a branded sportswear manufacturer and distributor.'},
{src:'http://lorempixel.com/400/200/sports/4/',details:'Launches its first major brand, Natural Issue®, specializing in reactive printing.'},
{src:'http://lorempixel.com/400/200/sports/5/',details:'Initial public offering NASDAQ: SUPI.'},
{src:'http://lorempixel.com/400/200/sports/6/',color:"bluebg",id:6,details:'Acquisition of Munsingwear® and Grand Slam® brands adds 110 years of history and product innovation to the company’s heritage.'}
];
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.gridModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// open video modal
$scope.openModal = function(selected) {
$scope.data.selected = selected;
$scope.gridModal.show();
};
// close video modal
$scope.closeModal = function() {
$scope.gridModal.hide();
};
//Cleanup the video modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.gridModal.remove();
});
})
.directive('gridImage', function(){
return function($scope, element, attrs){
var url = attrs.gridImage;
element.css({
'background-image': 'url(' + url +')',
});
};
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.