Angular directive image popup với Magnific Popup plugin

I.Giới thiệu

Lightbox là một trong những cộng cụ hoạt động tốt trên desktop nhưng thường có một số vấn đề trên các thiết bị small device. Việc tìm công cụ plugin để đáp ứng và hiển thị đúng nội dung như mong muốn rất khó. Vì lý do này có một công cụ gọi là Magnific Popup là một plugin lightbox mã nguồn mở chú trọng vào performance mà hoạt động tốt trên tất cả desktop và các thiết bị.

Các trình duyệt hỗ trợ: Desktop: Chrome, Safari, Opera, IE8+. Mobile: trình duyệt mặc định trong Android 2.3+, iOS5+, Blackberry 10+, WP7+, mobile opera và Chrome trên Android.

Trong bài viết này minh sẽ chia sẻ cách sử dụng plugin này với AngularJS.

II.Cài đặt plugin

Đầu tiền tạo một rails app có tên image-popup-app. Chi tiết về cái đặt ban đầu bạn có thể tham khảo bài viết trước.

Cấu trúc AngularJS trong bài viết này:

angular
||- app/
    ./my_app.js
||- controller/
    ./image_popup_controller.js
||- directives
    ./magnific_image_directive.js

Magnific Popup JS và CSS có thể lấy từ thư mục dist/ trong GitHub repository.

(hoặc bằng câu lệnh bower install magnific-popup hoặc npm: npm install magnific-popup. Ruby gem: gem install magnific-popup-rails)

• Tích hợp vào app:

Trong file app/assets/javascripts/application.js

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require magnific-popup/dist/jquery.magnific-popup.min
//= require_tree ./angular

Trong file app/assets/stylesheets/application.scss

*= require bootstrap/dist/css/bootstrap
*= require magnific-popup/dist/magnific-popup

III.Magnific Popup Directives

• Khởi tạo app cho AngularJS

• App /app/assets/javascripts/angular/app/my_app.js

var myApp = angular.module("myApp",[]);

• Controller /app/assets/javascripts/angular/controllers/image_popup_controller.js

myApp.controller("ImagePopupController", imagePopupController);
imagePopupController.$inject = ["$scope", "$timeout"];
function imagePopupController($scope, $timeout) {
  vm = this;
  vm.assets = {};
  vm.small = {};
  $timeout(function(){
    $scope.images = JSON.parse(vm.assets);
    $scope.small = JSON.parse(vm.small);
  }, 200);
}

Chúng ta sẽ bắt đầu viết directive để hỗ trợ magnific popup plugin như sau trong app/assets/javascripts/angular/directives/magnific_image_directive.js

myApp.directive("magnificPopup", MagnificPopup);
MagnificPopup.$inject = ["$timeout", "$filter"];
function MagnificPopup($timeout, $filter) {
  var directive = {
    link: link,
    restrict: "A"
  };
  return directive;

  function link($scope, element) {
    $scope.$watch("images", function () {
      var option = {
        delegate: "a",
        type: "image",
        tLoading: "Loading image...",
        gallery: {
          enabled: true,
          navigateByImgClick: true,
          preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
          tError: "Can't image load!",
          titleSrc: function(item) {
            return item.el.text() + ' - ' +item.el.attr('title')
              + ' · <a class="image-source-link" href="'+
              item.el.attr('link') +'" target="_blank">My article</a>';
          }
        }
      };
      $timeout(function() {
        element.magnificPopup(option);
      }, 400);
    });
  }
}

• Tạo một trang để hiển thị ảnh.

<div ng-app="myApp" ng-controller="ImagePopupController as vm"
  ng-init="vm.assets='<%= list_image_assets('popup_img') %>'">
  <div class="picture" ng-init="vm.small = '<%= list_image_assets('small') %>'">
    <div class="row">
      <div class="col-md-6 col-xs-6 col-md-offset-3 col-xs-offset-3">
        <h2>Magnific Popup</h2>
        <div class="pic-ct clearfix">
          <div id="list-pic" magnific-popup>
            <a ng-href="{{value}}" ng-repeat="(key, value) in images"
              title="more detail" link="//viblo.asia/posts/PDOkqMlJkjx">
              <img ng-src="{{small[key]}}">
              <p>{{key}}</p>
            </a>
          </div>
      </div>
    </div>
    </div>
  </div>
</div>

• Cho thêm css vào để hiển thị kích thước ảnh

.picture {
  h2 {
    padding-top: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #FF5733;
    margin: 0 0 40px 0;
  }
}
#list-pic {
  a {
    position: relative;
    display: block;
    float: left;
    width: 75px;
    height: 75px;
    margin-right: 13px;
    margin-bottom: 37px;
    padding: 1px;
    border: none;
    &:focus {
      outline: none;
    }
  }
}
.image-source-link {
 color: rgb(148, 213, 243);
}

IV.Kết quả hiển thị

V.Kết luận

Hy vọng bài viết này có thể hỗ trợ khi cần dùng đến plugin Magnific Popup với AngularJS. Bài viết sau sẽ mang đến với bản mobile vì bài này chỉ có demo cho desktop.

Tài liệu tham khảo

• Magnific Popup
• Angular Directive
• Demo app