Question

我想以缩略图的形式显示图像数组，在点击图像时，它应该放大为幻灯片。任何建议，将不胜感激。目前我可以查看图像幻灯片。我想要一个缩略图视图。

Answer 1

图片缩略图和幻灯片视图

<强> CSS

    .transparent {
      background: transparent !important;
    }
    .image-modal {
      width: 100% !important;
      height: 100%;
      top: 0 !important;
      left: 0 !important;
    }
    .fullscreen-image {
      max-width: 100%;
      max-height: 100%;
      bottom: 0;
      left: 0;
      margin: auto;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
    }
    .slider {
      width: 100%;
      height: 100%;
    }

    p.info {
      position: absolute;
      bottom: 55px;
      margin: 0 auto;
      width: 100%;
      display: block;
      text-align: center;
      font-size: 28px;
      color: #ffffff;
    }

    /* Fix modal backdrop for smaller devices */
    @media (max-width: 679px) {
      .active .modal-backdrop-bg {
        opacity: .5;
      }
      .modal-backdrop-bg {
        -webkit-transition: opacity 300ms ease-in-out;
        transition: opacity 300ms ease-in-out;
        background-color: #000;
        opacity: 0;
      }
    }

<强> JAVASCRIPT

angular.module('ionicApp', ['ionic'])

    .controller('MainCtrl', ['$scope', '$ionicModal', '$ionicSlideBoxDelegate', function ($scope, $ionicModal, $ionicSlideBoxDelegate) {

        $scope.aImages = [{
            'src' : 'http://ionicframework.com/img/ionic-logo-blog.png', 
            'msg' : 'Swipe me to the left. Tap/click to close'
          }, {
            'src' : 'http://ionicframework.com/img/ionic_logo.svg', 
            'msg' : ''
          }, { 
            'src' : 'http://ionicframework.com/img/homepage/phones-weather-demo@2x.png', 
            'msg' : ''
        }, { 
            'src' : 'http://ionicframework.com/img/homepage/phones-weather-demo@2x.png', 
            'msg' : ''
        },{
            'src' : 'http://ionicframework.com/img/ionic-logo-blog.png', 
            'msg' : 'Swipe me to the left. Tap/click to close'
          }, {
            'src' : 'http://ionicframework.com/img/ionic_logo.svg', 
            'msg' : ''
          }, { 
            'src' : 'http://ionicframework.com/img/homepage/phones-weather-demo@2x.png', 
            'msg' : ''
        }, { 
            'src' : 'http://ionicframework.com/img/homepage/phones-weather-demo@2x.png', 
            'msg' : ''
        }];

        $ionicModal.fromTemplateUrl('image-modal.html', {
          scope: $scope,
          animation: 'slide-in-up'
        }).then(function(modal) {
          $scope.modal = modal;
        });

        $scope.openModal = function() {
          $ionicSlideBoxDelegate.slide(0);
          $scope.modal.show();
        };

        $scope.closeModal = function() {
          $scope.modal.hide();
        };

        // Cleanup the modal when we're done with it!
        $scope.$on('$destroy', function() {
          $scope.modal.remove();
        });
        // Execute action on hide modal
        $scope.$on('modal.hide', function() {
          // Execute action
        });
        // Execute action on remove modal
        $scope.$on('modal.removed', function() {
          // Execute action
        });
        $scope.$on('modal.shown', function() {
          console.log('Modal is shown!');
        });

        // Call this functions if you need to manually control the slides
        $scope.next = function() {
          $ionicSlideBoxDelegate.next();
        };

        $scope.previous = function() {
          $ionicSlideBoxDelegate.previous();
        };

        $scope.goToSlide = function(index) {
          $scope.modal.show();
          $ionicSlideBoxDelegate.slide(index);
        }

        // Called each time the slide changes
        $scope.slideChanged = function(index) {
          $scope.slideIndex = index;
        };
      }
    ]);

<强> HTML

<ion-content class="has-header">
      <div class="row" style="flex-wrap: wrap;">
          <div class="col col-25" ng-repeat="image in aImages" style="border:1px solid #000;">
                <img ng-src="{{image.src}}" width="100%"  ng-click="goToSlide($index)" />
          </div>
      </div>
      <script id="image-modal.html" type="text/ng-template">
          <div class="modal image-modal transparent" 
               ng-click="closeModal()">
            <ion-slide-box on-slide-changed="slideChanged(index)" 
                           show-pager="false">
              <ion-slide ng-repeat="oImage in aImages">
                <img ng-src="{{oImage.src}}" class="fullscreen-image" />
                <p class="info">{{oImage.msg}}</p>
              </ion-slide>
            </ion-slide-box>
          </div>
      </script>
</ion-content>

Answer 2

.thumbnail:hover {
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}

refer to this link where you will get the thumbnail of image view for multiple images and add the thumbnail css to the image as a class like:

图像缩略图和幻灯片视图

2 个答案: