A Pen by Justin Noel on CodePen.
Created
September 13, 2014 20:09
-
-
Save four2theizz0/1ace8be4e3a3a3c2a60f to your computer and use it in GitHub Desktop.
A Pen by Justin Noel.
This file contains 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 App</title> | |
| <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet"> | |
| <script src="http://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> |
This file contains 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('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 file contains 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
| .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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment