<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 ng-repeat="grid in grids">
<div class="image responsive" grid-image="{{grid.src}}" ng-click="openModal()"></div>
<div class="details responsive" ng-click="openModal()" >{{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 has-header="true" has-footer="false" scroll="true" scrollbar-y="false" style="margin-left:30px; margin-right:30px;margin-top:30px;margin-bottom:60px;">
<p style="text-align:justify;">
<img src="http://lorempixel.com/400/200/sports/1/" style="float:left; margin-right:15px; height:300px; width:300px;"/>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.<br/> </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{font-size:1em;text-align:center; float:left; padding: 2%; background-color:#9CD8D8;}
.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;}
.gridcontainer{padding-left: 5px; padding-right: 5px;}
/* I was hoping this would select every 4th & 5th element and change background-color to white */
.details:nth-child(4n){background-color:white;}
.details:nth-child(5n){background-color:white;}angular.module('ionicApp', ['ionic'])
.controller('SlideController', function($scope, $ionicModal) {
$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() {
$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 +')',
});
};
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.