图像和幻灯片的缩略图答案

【问题标题】：Thumbnail of images and slideview图像和幻灯片的缩略图
【发布时间】：2016-01-12 21:36:10
【问题描述】：

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

【问题讨论】：

标签： angularjs ionic slideshow thumbnails

【解决方案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>

【讨论】：

由于图像大小，列折叠并成为单列布局。有什么建议吗？
是的，我通过将宽度和高度设置为 100 像素解决了这个问题。对接只有 4 个缩略图图像可见。在第 4 张图片之后，我添加的图片均不可见
看我上面的例子，我在数组中添加了 8 个图像，它在一行中显示 4 个图像并在另一行中显示......

【解决方案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:

【讨论】：

是否可以添加网格而不是列表？如果有怎么办？
是的，可以使用网格的引导类，比如 col-md-12
并为图像指定高度或宽度以适合您的视图，例如：img { height:200px; }