Question

我在http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/找到了Todd Motto的这个惊人的JQuery插件。我想将此插件转换为AngularJS指令以及使用html元素而不添加新元素。原始代码已发布。我做了指令，但它使用append而不是html元素，http://plnkr.co/edit/JopooR3xyGAlwzKldZvk?p=preview 谢谢你的帮助！

;(function($) {

  $.fn.SuperBox = function(options) {

    var superbox      = $('<div class="superbox-show"></div>');
    var superboximg   = $('<img src="" class="superbox-current-img">');
    var superboxclose = $('<div class="superbox-close"></div>');

    superbox.append(superboximg).append(superboxclose);

    return this.each(function() {

      $('.superbox-list').click(function() {

        var currentimg = $(this).find('.superbox-img');
        var imgData = currentimg.data('img');
        superboximg.attr('src', imgData);

        if($('.superbox-current-img').css('opacity') == 0) {
          $('.superbox-current-img').animate({opacity: 1});
        }

        if ($(this).next().hasClass('superbox-show')) {
          superbox.toggle();
        } else {
          superbox.insertAfter(this).css('display', 'block');
        }

        $('html, body').animate({
          scrollTop:superbox.position().top - currentimg.width()
        }, 'medium');

      });

      $('.superbox').on('click', '.superbox-close', function() {
        $('.superbox-current-img').animate({opacity: 0}, 200, function() {
          $('.superbox-show').slideUp();
        });
      });

    });
  };
})(jQuery);

Answer 1

我也在寻找AngboxJS版的Superbox。我也找不到一个，这就是我开始angular-superbox的原因。它可能会给你一些想法，或者你可能想要贡献。

此致岸堤

将SuperBox JQuery转换为AngularJs指令

1 个答案: