КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

jQuery.zoommer

Как использовать

Рисуете div (желательно обернуть его) и даёте ему три атрибута:

  <!--
  Первый аттрибут - основная картинка
  Второй - картинка, которую увеличиваем, можно делать типа рентген
  Третий - размер лупы
  -->
  <div class="test-plugin"
  data-image="img/msi.jpg"
  data-image-zoom="img/msi.jpg"
  data-size="111"></div>

  // и вешаете метод 
  $(".test-plugin").zoommer();// по умолчанию scale 1.4

  // или указав увеличение самостоятельно
  $(".test-plugin").zoommer({
    scale : 1.5 
  });

Код

(function($) {
  /* Опции по умолчанию */
  var defaults = {
    scale: 1.4
  };
  /* Объект методов для работы плагина */
  var methods = {
    init: function(opts) {
      options = $.extend(defaults, opts);
      return this.each(methods.Action);
    },

    Action: function(opts) {
      var th = $(this),
        dataImage = th.data("image"),
        dataImageZoom = th.data("image-zoom"),
        dataSize = th.data("size");

      th.addClass("zoommer")
        .append("<img class='data-image' src='" + dataImage + "'><div class='zoommer-loupe'><img src='" + dataImageZoom + "'>")
        .find(".data-image").css({
          "width": th.width()
        }).parent().find(".zoommer-loupe").css({
          "width": dataSize,
          "height": dataSize,
          transform: 'scale(' + options.scale + ')'
        })
        .find("img").css({
          "position": "absolute",
          "width": th.width()
        });

      th.on('resize.zoommer', function() {
        th.find(".data-image, .zoommer-loupe img").css({
          "width": th.width()
        })
      });

      th.on('mouseover.zoommer', function() {
        th.find(".zoommer-loupe").stop().fadeIn();
      }).on('mouseleave.zoommer', function() {
        th.find(".zoommer-loupe").stop().fadeOut();
      }).on('mousemove.zoommer', function(e) {

        var elemPos = {},
          offset = th.offset();

        elemPos = {
          left: e.pageX - offset.left - dataSize / 2,
          top: e.pageY - offset.top - dataSize / 2
        }

        th
          .find(".zoommer-loupe").css({
            "top": elemPos["top"],
            "left": elemPos["left"]
          })
          .find("img").css({
            "top": -elemPos["top"],
            "left": -elemPos["left"],
            "width": th.width()
          })
      });
      
      $(window).on('resize', function() {
  			$(".zoommer").resize();
  		});
      
    }
  };
  /* Методы для пользователя */
  var publicMethods = {
    on: function() {
      return this.each(function() {
        $(this).on('mouseover.zoommer', function() {
          $(this).find(".zoommer-loupe").stop().fadeIn();
        })
      });
    },
    disable: function() {
      return this.each(function() {
        $(this).off('mouseover.zoommer');
      });
    }
  }
  $.fn.zoommer = function(opts) {
    if (publicMethods[opts]) {
      return publicMethods[opts].apply(this, [].slice.call(arguments, 1));
    } else if (typeof opts === 'object' || !opts) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Метод с именем "' + opts + '" не существует!');
    }
  };

}(jQuery));

2016.06.10 52
jpgjpg

Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика