Image add SlideBox Sample ver 0.3 (ionic ver 0.9.27)

In this example below you will see how to do a Image add SlideBox Sample ver 0.3 (ionic ver 0.9.27) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nobu19711208, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nobu19711208 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Image add SlideBox Sample ver 0.3 (ionic ver 0.9.27)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Image add SlideBox Sample ver 0.3 (ionic ver 0.9.27)</title>

    <link href="https://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="https://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
    
    <script src="js/controllers.js"></script>    
  </head>

  <body ng-controller="MainCtrl">
    
    <ion-header-bar title="Image add SlideBox Sample ver 0.3 (ionic ver 0.9.27)" type="bar-royal"></ion-header-bar>
             
    <ion-content has-header="true">
            <div class="list card">
                <div class="item item-text-wrap">
      
                    <div class="row">
                        <div class="col col-100 text-center">
                            <ion-slide-box>
                                <ion-slide ng-repeat="panel in panels">
                                  <img class="slide-panel" ng-src="{{panel.src | trustedResource}}">{{panel.src}}</div>
                                </ion-slide>
                            </ion-slide-box>  
                        </div>
                    </div>    
                    <div class="row">
                      <div class="col col-20 text-center">
                        <button class="button icon ion-arrow-left-b" ng-click="showPrevSlide()">show prev panel</button>
                      </div>  
                      <div class="col col-20 text-center">
                        <button class="button icon ion-arrow-right-b" ng-click="showNextSlide()">show Next panel</button>
                      </div>  
                    </div>    
                    <div class="row">
                      <div class="col col-100 text-center">
                        <p>Image Add Buttons</p>
                      </div>  
                    </div>    
                    <div class="row">
                      <div class="col col-20 text-center">
                        <button class="button icon ion-image" ng-click="addPanel('https://pbs.twimg.com/profile_images/378800000234463046/4c558ca34bff6f0d3162e486d3c467d2.jpeg')">none emit(1)</button>
                      </div>
                      <div class="col col-20 text-center">
                        <button class="button icon ion-image" ng-click="addPanel('https://pbs.twimg.com/profile_images/378800000702341897/d71c65f9d91f144e5cb3bf9ba6820043.jpeg')">none emit(2)</button>
                      </div> 
                      <div class="col col-20 text-center">
                        <button class="button icon ion-image"   ng-click="addPanelCtrlEmit('http://stepup-j.img.jugem.jp/20100316_1688463_t.jpg')">Emit from the controller</button>
                      </div> 
                      <div class="col col-20 text-center">
                        <custom-Button>Emit from the directive</custom-Button>
                      </div> 
                      <div class="col col-20 text-center">
                        <custom-Button2 ng-click="directiveCtrlEmit()">Emit from the directive(ng-click)</custom-Button2>
                      </div> 
                    </div>
              
                   </div>
                   </div>                                                                                                                                      
    </ion-content>
    
    
    <script id="/button.html" type="text/ng-template">
      <button class="button icon ion-image"><span ng-transclude=""></span></button>
    </script>
    
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nobu19711208/image-add-slidebox-sample-ver-03-ionic-ver-0927-Bjrhq */
 
.slide-panel {
    width:100%; /*fail %,em,px*/ 
    height:150px;
}


/*Downloaded from https://www.codeseek.co/nobu19711208/image-add-slidebox-sample-ver-03-ionic-ver-0927-Bjrhq */
angular.module('app', ['ionic'])
  .config(['$sceDelegateProvider','$compileProvider'
    ,function($sceDelegateProvider,$compileProvider) {
      $sceDelegateProvider.resourceUrlWhitelist(['**']);
      $compileProvider.imgSrcSanitizationWhitelist(/^.*/);
  }])
  .filter('trustedResource', ['$sce', function($sce) {
    return function(val) {
      return $sce.getTrustedResourceUrl(val);
    };
  }])
  .controller('MainCtrl',['$scope','$ionicSlideBoxDelegate',
      function($scope,$ionicSlideBoxDelegate) {
       $scope.panels=[];
       
         $scope.showPrevSlide=function() {
            $scope.$broadcast('slideBox.prevSlide');
        }            
        
        $scope.showNextSlide=function() {                
            $scope.$broadcast('slideBox.nextSlide');
        }            
        
        $scope.onSlideChanged=function(index) {
console.log('onSlideChanged('+index);
        }      
        
 
       $scope.addPanel=function(src) {
          $scope.panels.push({src:src});
          $ionicSlideBoxDelegate.update();
        }
       
       $scope.addPanelCtrlEmit=function(src) {
console.log('addPanelCtrlEmit!!');
         $scope.$emit('addPanelEvent',src);
          
        }
        
        $scope.$on('addPanelEvent',function(event,src) {
console.log('on addPanelEvent!!');          
          $scope.panels.push({src:src});
          $ionicSlideBoxDelegate.update();
          event.preventDefault();
          return false;     
        });    
    }])
    .directive('customButton', [function() {
        return {
            restrict:'E',
          templateUrl:'/button.html',
            transclude:true,
            replace:true,
            scope: {
            },
            controller: ['$scope', function($scope ){
            }],
            link: function($scope, element, attrs) {
        element.on('click',function(event) {
console.log('click directive button!!');      
            console.log('fire! directive button clickevent');
          $scope.$apply(function(){
            $scope.$emit('addPanelEvent','https://www.thisone.co.jp/common/images/shops/3/event/568_image0.jpg');       
          });                         
        });
            }
        };
    }])
    .directive('customButton2', [function() {
        return {
            restrict:'E',
          templateUrl:'/button.html',
            transclude:true,
            replace:true,
            scope: {
            },
            controller: ['$scope', function($scope ){
              $scope.directiveCtrlEmit=function() {
                console.log('fire! directive button clickevent(directiveCtrlEmit)');
                $scope.$emit('addPanelEvent','https://www.thisone.co.jp/common/images/shops/3/event/568_image0.jpg');       
              }  
            }],
            link: function($scope, element, attrs) {
            }
        };
    }]);

Comments