Увеличивать размеры изображений из контекстного меню на странице ( Firefox 17+ )
Автор: bunda1, Dumby
Версия: от 14.03.2014.
Описание: Добавляет в контекстное меню изображений на странице новый пункт Увеличить размер который показывает увеличенное изображение над нужным изображением, прокрутка колёсиком мыши на увеличенном изображением увеличивает или уменьшает размеры изображения. Размер изображения восстанавливается по клику на странице или прокруткой колёсиком мыши на странице. На сколько увеличить изображение из меню и на сколько увеличивать/уменьшать колёсиком мыши и направление прокрутки для увеличение колёсиком можно изменить в начале кода.
Использование: положите код в любую Custom Buttons кнопку, в инициализацию. Не обязательно создавать новую CB кнопку, можно использовать уже существующую.

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 14.03.2014. ................................
(function g() {
   var imgZoom = 170;    // на сколько увеличить изображение из меню
   var scrollZoom = 20;  // на сколько увеличивать/уменьшать колесиком мыши
   var scrollTop = 1;    // или -1, переключение направление прокрутки для увеличение колёсиком

   // добавить новый пункт в меню изображений ....
   var contextMenu = document.getElementById("contentAreaContextMenu");
   var menuitem = contextMenu.appendChild(document.createElement("menuitem")); // как последний пункт меню
   menuitem.setAttribute("label", "Увеличить размер");
   addDestructor(function() contextMenu.removeChild(menuitem));

   // отслеживать открытие контекстного меню на странице ....
   addEventListener("popupshowing", function(e) { 

      menuitem.hidden = !gContextMenu.onImage; // скрывать пункт если не контекстное меню изображений         
      if ( !gContextMenu.onImage ) return;

      // получить координаты и размеры изображения
      var trg = e.target.triggerNode;
      g.win = trg.ownerDocument.defaultView;
      g.rect = trg.getBoundingClientRect();

   }, true, contextMenu);

   // если клик или команда на пункте меню ....
   menuitem.setAttribute("oncommand", "this.run();");
   menuitem.run = function() {
      var img = gContextMenu.target; // получить изображение

      // создать и открыть всплывающую подсказку с увеличенным изображением над изображением .... 
      var tooltip = gBrowser.appendChild(document.createElement("tooltip")), tts = tooltip.style;
      tooltip.setAttribute("onpopuphiding", "event.preventDefault();");
      tts.cssText = "position: fixed; margin: 0; padding: 0; -moz-appearance: none !important; border: none; background: transparent; max-width: none";

      var image = tooltip.appendChild(new Image());
      image.setAttribute("validate", "never"); // изображение будет загружено из кэша, если это возможно 
      image.setAttribute("src", img.src );

      var z = ZoomManager.useFullZoom ? ZoomManager.zoom : 1;
      var rect = {
         width: z * g.rect.width,
         height: z * g.rect.height,
                 left: z * (g.rect.left + g.win.mozInnerScreenX) - mozInnerScreenX,
         top: z * (g.rect.top + g.win.mozInnerScreenY) - mozInnerScreenY
         };
      var ratio = rect.height / rect.width;

      var k = -Math.min(mozInnerScreenY, 0);
      var sh = innerHeight + k;
      var w = Math.min(rect.width + imgZoom, innerWidth);
      if (w * ratio > sh) w = sh / ratio;
      image.style.width = w + "px";

      var zoom = w - rect.width;
      var left = Math.max(rect.left - zoom / 2, 0);
      var top = Math.max(rect.top - ratio * zoom / 2, k);

      var r = left + rect.width + zoom - innerWidth;
      if (r > 0) left -= r;
      var b = top + rect.height + ratio * zoom - innerHeight;
      if (b > 0) top -= b;

      tts.left = left + "px"; tts.top = top + "px";
      tooltip.openPopupAtScreen(0, 0);

      // прокрутка на подсказке меняет размеры изображения, на странице закрывает его ....
      function imageZoom(e) {
         if (e.target != image) { removeTooltip(); return; }

         var zoom = (e.detail < 0 ? scrollZoom : -scrollZoom) * scrollTop;
         var zx = zoom / 2, zy = zx * ratio;
         var rect = tooltip.getBoundingClientRect();
         var left = rect.left - zx, top = rect.top - zy;

     if ( zoom > 0 ) {
          if (left - zx < 0 && rect.right < innerWidth) left = 0;
          var r = rect.right + zx - innerWidth;
          if (r > 0 && left > 0) left -= r;

          if (top < k && rect.bottom < innerHeight) top = k;
          var b = rect.bottom + zy - innerHeight;
          if (b > 0 && top > k) top -= b;
          }
          image.style.width = rect.width + zoom + "px";
          tts.left = left + "px"; tts.top = top + "px";
      }
      gBrowser.addEventListener('DOMMouseScroll', imageZoom, true);

      // удалить подсказку и обработчики ....
      function removeTooltip() {
         try { gBrowser.removeChild( tooltip ) } catch(e) {};
         gBrowser.removeEventListener("click", removeTooltip, true);
         gBrowser.removeEventListener("DOMMouseScroll", imageZoom, true);
      }
      gBrowser.addEventListener("click", removeTooltip, true);  // удалить по клику на странице
   }   
})();

Не знаю бага или нет, но если изображение увеличить несколько раз, то при клике по странице сброс происходит только до предпоследнего увеличения...

Это недоработка, разберёмся.

01-12-2013 19:07:22

Zaycoff пишет

Не знаю бага или нет, но если изображение увеличить несколько раз, то при клике по странице сброс происходит только до предпоследнего увеличения...

Вроде исправил.

bunda1 пишет

Вроде исправил.

Благодарю! :music:

А можно ли добавить фичу, чтобы по умолчанию большие картинки уменьшались бы до некоего предустановленного размера?

bunda1 пишет

Увеличивать размеры изображений из контекстного меню на странице ( Firefox 4 + )
Автор: bunda1
Версия: от 01.12.2013
Описание: Добавляет в контекстное меню изображений на странице новый пункт Увеличить размер который увеличивает изображение, размер изображения восстанавливается по клику на странице
Использование: положите код в любую Custom Buttons кнопку, в инициализацию. Не обязательно создавать новую CB кнопку, можно использовать уже существующую.

скрытый текст

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("command", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) });
           img.setAttribute('zoom', true);
           }

      // увеличить изображение и его стиль
      img.width = img.width * 2;
      img.height = img.height * 2;
      img.style = 'width:' + img.width * 2 + 'px; height:' + img.height * 2 + 'px;';      
      
      // восстановить размер и стиль изображения по клику на странице 
      gBrowser.addEventListener("click", function r(e) {
        if ( e.originalTarget == img ) return;
        this.removeEventListener("click", r );
        try {
            img.style = currStyle.join("; ");
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;            
            img.removeAttribute('zoom');
            } 
        catch(e) {}; 
      });
      
   }, false, menuitem );   

})();

Не знаю почему, но у меня эта штука ведёт себя странно.
1. Если картинка на сайте, причём в одной из колонок, "Увеличить размер" увеличивает только вертикальную составляющую - по-видимому это сам сайт не позволяет выйти за границы колонки. Напр. сайт http://www.mignews.com/
2. Если же я на сайте без колонок, то картинка увеличивается сразу невообразимо - раз 5-6 по ширине и высоте, выходит за границы экрана и нужно скроллить. Причём увеличение  по вертикали - больше чем по горизонтали. Даже если я увеличу смайлик, то можно увидеть, что он увеличится по вертикали раз в 8, а по горизонтали - раза в 4...
----------------------------------------------------------------------------------------------------------------------------
У меня также есть несколько пожеланий (только не рассматривайте это как запросы):
1. Делать зум картинки не по контекстному меню, а скроллингом на картинке при зажатой ЛКМ (ЛКМ  должна отменить стандартное поведение - обычный скроллинг)
2. Делать зум страницы/текста тоже таким образом, когда курсор не на картинке
В целом это была бы прибавка к Вашему зуму с индикацией зума и режимов.
3. (Я уже отмечал это) - иметь возможность уменьшать картинки до предопределённой величины, если они её превышают.

difabor пишет

Не знаю почему, но у меня эта штука ведёт себя странно.
1. Если картинка на сайте, причём в одной из колонок, "Увеличить размер" увеличивает только вертикальную составляющую - по-видимому это сам сайт не позволяет выйти за границы колонки. Напр. сайт http://www.mignews.com/

Да есть такой глюк, вот так лучше:

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("command", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");          
           img.setAttribute('zoom', true);
           }

      // увеличить изображение и его стиль
      img.width = img.width * 2;
      img.height = img.height * 2;
      img.style = 'position: relative; z-index: 1000; max-width:' + img.width * 2 + 'px; max-height:' + img.height * 2 + 'px;';      
      
      // восстановить размер и стиль изображения по клику на странице 
      gBrowser.addEventListener("click", function r(e) {
        if ( e.originalTarget == img ) return;
        this.removeEventListener("click", r );
        try {
            img.style = currStyle; 
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;            
            img.removeAttribute('zoom');
            } 
        catch(e) {}; 
      });
      
   }, false, menuitem );   

})();

Но это тоже не выход потому что так после сброса увеличения дёргается страница, а на некоторых страницах изображения подлезают под другие элементы и или вообще не меняются. Не знаю что и делать :/, разве только открывать увеличенное изображение в новом красивом окошке над оригинальном изображением. Как открыть в окошке я знаю а вот как там увеличить изображение или увеличить там масштаб не знаю. Буду думать.

02-12-2013 22:22:05
Пожелания насчёт зума картинки скроллингом пока не разберусь с увеличением рассматривать не будем.

bunda1 пишет

скрытый текст

difabor пишет

Не знаю почему, но у меня эта штука ведёт себя странно.
1. Если картинка на сайте, причём в одной из колонок, "Увеличить размер" увеличивает только вертикальную составляющую - по-видимому это сам сайт не позволяет выйти за границы колонки. Напр. сайт http://www.mignews.com/

Да есть такой глюк, вот так лучше:

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("command", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");          
           img.setAttribute('zoom', true);
           }

      // увеличить изображение и его стиль
      img.width = img.width * 2;
      img.height = img.height * 2;
      img.style = 'position: relative; z-index: 1000; max-width:' + img.width * 2 + 'px; max-height:' + img.height * 2 + 'px;';      
      
      // восстановить размер и стиль изображения по клику на странице 
      gBrowser.addEventListener("click", function r(e) {
        if ( e.originalTarget == img ) return;
        this.removeEventListener("click", r );
        try {
            img.style = currStyle; 
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;            
            img.removeAttribute('zoom');
            } 
        catch(e) {}; 
      });
      
   }, false, menuitem );   

})();


Но это тоже не выход потому что так после сброса увеличения дёргается страница, а на некоторых страницах изображения подлезают под другие элементы и или вообще не меняются. Не знаю что и делать :/, разве только открывать увеличенное изображение в новом красивом окошке над оригинальном изображением. Как открыть в окошке я знаю а вот как там увеличить изображение или увеличить там масштаб не знаю. Буду думать.

02-12-2013 22:22:05
Пожелания насчёт зума картинки скроллингом пока не разберусь с увеличением рассматривать не будем.

Уважаемый bunda1, у меня тоже подлезало, но я немного добавил в Ваш код и всё исправилось. Привожу код (добавленные строки отмечены "I added this")

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var enlarged = 0; //I added this
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("command", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
          
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");            
            img.setAttribute('zoom', true);
           }

      // увеличить изображение и его стиль
      if (enlarged == 0) {                  //I added this
        img.width = img.naturalWidth;       //I added this
        img.height = img.naturalHeight;     //I added this
      }// if (enlarged == 0)                //I added this
      img.height = img.height * 2;
      img.width = img.width * 2;
      img.style = 'position: relative; z-index: 1000; max-width:' + img.width * 2 + 'px; max-height:' + img.height * 2 + 'px;';      
      enlarged = 1;  //I added this
      // восстановить размер и стиль изображения по клику на странице 
      gBrowser.addEventListener("click", function r(e) {
        if ( e.originalTarget == img ) return;
        this.removeEventListener("click", r );
        try {
            img.style = currStyle; 
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;            
            img.removeAttribute('zoom');
            } 
        catch(e) {}; 
      });
      
   }, false, menuitem );   

})();

Нет не исправилось ты просто проверил не на всех изображениях, проверь тут MIGnews | Происшествия | Суданцу не дали убежища, он угнал автобус и убил троих

bunda1 пишет

Нет не исправилось ты просто проверил не на всех изображениях, проверь тут MIGnews | Происшествия | Суданцу не дали убежища, он угнал автобус и убил троих

У меня - исправилось, правда надо было каждый раз делать псевдоредактирование кнопки (нажимать "Редактировать" и ничего не меняя - ОК.
Я понял причину и добавил ещё одну строку кода - проверьте:

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var enlarged = 0; //I added this
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("command", function(e) { 
      // получить изображение и его стиль
         var img = gContextMenu.target;
         if ( !img.hasAttribute('zoom') ) {
            var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");            
            img.setAttribute('zoom', true);
           }

      // увеличить изображение и его стиль
      if (enlarged == 0) {                  //I added this
        img.width = img.naturalWidth;       //I added this
        img.height = img.naturalHeight;     //I added this
      }// if (enlaged == 0)                 //I added this
      img.height = img.height * 2;
      img.width = img.width * 2;
      img.style = 'position: relative; z-index: 1000; max-width:' + img.width * 2 + 'px; max-height:' + img.height * 2 + 'px;';      
      enlarged = 1;  //I added this
      // восстановить размер и стиль изображения по клику на странице 
      gBrowser.addEventListener("click", function r(e) {
        if ( e.originalTarget == img ) return;
        this.removeEventListener("click", r );
        try {
            img.style = currStyle; 
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;            
            img.removeAttribute('zoom');
            enlarged = 0; //I added this
            } 
        catch(e) {}; 
      });
      
   }, false, menuitem );   

})();

Кстати, если вообще убрать enlarged, то всё будет ОК, но увеличивать будет один раз.
Но в редакции, что я сейчас посылаю - не надо каждый раз редактировать кнопку. У меня работает на Вашем примере.
Естественно, после увеличения (сколько угодно раз) надо приводить картинку в исходное состояние кликом вне картинки, тем самым обнуляя enlarged, иначе если увеличивать другую картинку, будет балаган - enlarged будет равно 1 и не даст возможности получить исходные img.width = img.naturalWidth и img.height = img.naturalHeight.
Пока же мне пришла другая идея в голову :)
----------------------------------------------------------------------
Я нашёл способ снять требование обязательного приведения картинки в исходное состояние - можно увеличивать другую картинку без приведения предыдущей в исходное состояние!
P.S. Я также понял почему на  MIGnews | Происшествия | Суданцу не дали убежища, он угнал автобус и убил троих изображение налазит. Оно и должно налазить!!! Кнопка ведёт себя абсолютно правильно!
Дело в том, что на сайте мы видим не оригинальное изображение (т.е. не то, url которого является атрибутом этой картинки), а её уменьшенное изображение.
Кнопка берёт img.naturalWidth и img.naturalHeight из атрибутов картинки, а мы видим уменьшенный вариант. Когда кнопка возвращает картинку - она возвращает оригинал, а не тот уменьшенный вариант. Если выбрать "Открыть изображение" можно убедиться, что оно больше того, которое на сайте.
А проблема нарушения пропорций разрешена :)

Привожу код, практически ничем не отличающийся от Вашего исходного:

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("command", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");          
           img.setAttribute('zoom', true);
           }

      // увеличить изображение и его стиль
      img.style = 'position: relative; z-index: 1000; max-height:' + img.height * 2 + 'px; max-width:' + img.width * 2 + 'px';   
      img.width = img.width * 2;
      img.height = img.height * 2;
      
      // восстановить размер и стиль изображения по клику на странице 
      gBrowser.addEventListener("click", function r(e) {
        if ( e.originalTarget == img ) return;
        this.removeEventListener("click", r );
        try {
            img.style = currStyle; 
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;            
            img.removeAttribute('zoom');
            } 
        catch(e) {}; 
      });
      
   }, false, menuitem );   

})();

В нём просто img.style поставлен перед img.width и img.height  :)

difabor
Ну нет же не работает как надо и такие исправления не могли решить проблему.
Вот попробуй ради смеха:

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("command", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");          
           img.setAttribute('zoom', true);
           }

      
       // получить массив с координатами изображения
       function getAbsolutePosition(el) {
          var r = { x: el.offsetLeft, y: el.offsetTop };
          if ( el.offsetParent ) {     
               var tmp = getAbsolutePosition(el.offsetParent);
               r.x += tmp.x;
               r.y += tmp.y;
          }
          return r;
       }
       var position = getAbsolutePosition(img);
       
       // всплывающая подсказка над изображением
       var tooltip = gBrowser.appendChild( document.createElement("tooltip") );           
       var image = tooltip.appendChild( document.createElement("image") );
       image.setAttribute("src", gContextMenu.imageURL );
       image.style.cssText = "margin: 0; width: 400px; height: 400px; -moz-box-orient: horizontal; text-align: center;";    
       
       tooltip.showPopup( gBrowser, position.x, position.y );
      
       // удалить подсказку по клику на странице 
       gBrowser.addEventListener("click", function r(e) {
          this.removeEventListener("click", r );
          try {
              gBrowser.removeChild( tooltip )
              } 
          catch(e) {}; 
       });

   }, false, menuitem );  
        
})();

Но у меня - работает!!! Честное слово! Посмотрите мой последний код - он практически ничем не отличается от Вашего исходного.
Кроме того я несколько раз добавлял комментарии в мой предпоследний постинг.
Сейчас я могу сделать так, чтоб оно налазило, а могу налезание убрать.
Ваш пример я обязательно испробую - но проверьте мой (вернее - Ваш) последний код. Это ведь Ваш родной код - я только поставил задание стиля перед удвоением ширины и высоты.
Ничего более.
Когда я только начал возиться - я увеличивал смайлики этого сайта - мозиллы и увидел, что при увеличении смайлики удлиняются по вертикали.
Но ведь Ваш код - симметричен. Тогда я просто поменял очередность - сначала удвоил высоту, а затем - ширину и смайлик стал вести себя наоборот - становиться пузатым.
Возьмите Ваш код и убедитесь в этом, я не выдумываю.

difabor
Я проверил и не на всех изображениях работает MIGnews | Происшествия | Суданцу не дали убежища, он угнал автобус и убил троих

bunda1 пишет

difabor
Я проверил и не на всех изображениях работает MIGnews | Происшествия | Суданцу не дали убежища, он угнал автобус и убил троих

Уважаемый bunda1, если Вы сделаете "Открыть изображение" той картинки, ссылку на которую Вы дали (в отдельной вкладке) и сравните его с тем, что на сайте, Вы убедитесь, что оно БОЛЬШЕ. И именно настолько, насколько сброс изображения "не дотягивает" до того, что на сайте.
На Мигньюсе показывают не оригинал изображения, а его уменьшенную копию, поэтому и сброс изображения от увеличенного к нормальному не консистентный.
Я Вам предлагаю просто сначала рассмотреть консистентные штуки - если взять Ваш исходный код и увеличить смайлик - он будет вытянут в высоту (увеличатся оба параметра, но высота - раза в два больше).
Потом поменяйте порядок - удвойте сначала высоту, а затем ширину и смайлик станет пузатым, т.е. вытянутым в ширину.
В этом и зарыта собака - здесь есть рассинхронизация.
Когда я переставил стиль перед удвоением, смайлик стал сохранять пропорции.
А проблема неконсистентного сброса изображения на Мигньюсе - это не проблема кнопки, это выкрутасы сайта - атрибуты картинки отличаются от той картинки, что мы видим.
Это моё имхо, конечно - иногда сброс картинки на Мигньюсе тоже удаётся, - но сам Мигньюс какой-то кривой, - это не проблема кнопки.
Проблема кнопки была в нарушении пропорций и она была консистентной. Перестановка стиля над удвоением разрешила эту консистентную проблему

Упс, я имел виду не конкретную картинку на той проклятой странице а все картинки там.

Так эти страницы таки да проклятые. Но дело здесь не в кнопке. У меня есть дополнение Thumbnail zoom, так и оно не все картинки на нём берёт :)
Дело не в кнопке, уважаемый bunda1, дело в том, что сайт там кривой.
А проблема с нарушением пропорций - разрешилась.
Имхо, либо в браузере,либо в самой ОС есть некоторые не совсем синхронизирующиеся процессы.
Поэтому и получается что порядок двух абсолютно симметричных команд играет роль.
Возьмите Ваш код из поста №7 и попробуйте увеличить смайлик.
Затем поменяйте порядок - вместо
img.width = img.width * 2;
img.height = img.height * 2;
сделайте
img.height = img.height * 2;
img.width = img.width * 2;
и снова увеличьте смайлик. Разницу Вы сразу увидите  - а ведь смахивает на мистику, фокусы можно показывать.
И дело здесь - не в кнопке.
Просто операция начинает выполняться параллельно с получением исходных  img.height и  img.width имхо. Иначе - трудно объяснить этот феномен...
Первая из них жертвует собой, чтобы вторая отработала.
Поэтому я решил в качестве жертвы взять img.style :) - он не столь критичен.

difabor
Да рокировка img.width и img.height некоторых случаях помогает, но это все равно не решает все проблемы. Спасибо конечно за участие :)
Зацени:

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("click", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");          
           img.setAttribute('zoom', true);
           }            
       
       // всплывающая подсказка с увеличивным изображением над изображением
       var tooltip = gBrowser.appendChild( document.createElement("tooltip") );           
       var image = tooltip.appendChild( document.createElement("image") );
       image.setAttribute("src", gContextMenu.imageURL );
       image.style.cssText = "margin: 0; width: 400px; height: 400px; -moz-box-orient: horizontal; text-align: center;";    
       tooltip.showPopup ( img, -1, -1, "popup", "bottomcenter", "bottomleft" );
      
       // удалить подсказку по клику на странице 
       gBrowser.addEventListener("click", function r(e) {
          this.removeEventListener("click", r );
          try {
              gBrowser.removeChild( tooltip )
              } 
          catch(e) {}; 
       });

   }, false, menuitem );  
        
})();
bunda1 пишет

difabor
Да рокировка img.width и img.height некоторых случаях помогает, но это все равно не решает все проблемы. Спасибо конечно за участие :)
Зацени:

скрытый текст

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("click", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");          
           img.setAttribute('zoom', true);
           }            
       
       // всплывающая подсказка с увеличивным изображением над изображением
       var tooltip = gBrowser.appendChild( document.createElement("tooltip") );           
       var image = tooltip.appendChild( document.createElement("image") );
       image.setAttribute("src", gContextMenu.imageURL );
       image.style.cssText = "margin: 0; width: 400px; height: 400px; -moz-box-orient: horizontal; text-align: center;";    
       tooltip.showPopup ( img, -1, -1, "popup", "bottomcenter", "bottomleft" );
      
       // удалить подсказку по клику на странице 
       gBrowser.addEventListener("click", function r(e) {
          this.removeEventListener("click", r );
          try {
              gBrowser.removeChild( tooltip )
              } 
          catch(e) {}; 
       });

   }, false, menuitem );  
        
})();

Уважаемый bunda1, дело не в том, что рокировка помогает, а в том, что сам факт её влияния проясняет ситуацию и показывает, что дело не в кнопке.
Я в свою очередь переделал немного предложенный Вами код с выскакивающей картинкой. В переделанном варианте сохраняются пропорции исходной картинки

скрытый текст

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 01.12.2013. ................................
(function () {
   var Wlim = 425,  Hlim = 700,  ratio; //425 - максимальная ширина, которую позволяет тултип
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Увеличить размер");  
   contextMenu.appendChild( menuitem );   // как последний пункт меню 
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   
   addEventListener("click", function(e) { 
      // получить изображение и его стиль
      var img = gContextMenu.target;
      ratio = (img.naturalWidth)/(img.naturalHeight);
      if ( !img.hasAttribute('zoom') ) {
           var currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");          
           img.setAttribute('zoom', true);
           }            
       
       // всплывающая подсказка с увеличивным изображением над изображением
       var tooltip = gBrowser.appendChild( document.createElement("tooltip") );           
       var image = tooltip.appendChild( document.createElement("image") );
       image.setAttribute("src", gContextMenu.imageURL );
       var Wtip = Wlim;
       var Htip = (Wtip / ratio).toFixed(0);
       if (Htip > Hlim) {
         Htip = Hlim;
         Wtip = (Htip * ratio).toFixed(0);
       }//if (Htip > Hlim)
       image.style.cssText = "margin: 0; width: "+Wtip+"px; height: "+Htip+"px; -moz-box-orient: horizontal; text-align: center;";    
       tooltip.showPopup ( img, -1, -1, "popup", "bottomcenter", "bottomleft" );
      
       // удалить подсказку по клику на странице 
       gBrowser.addEventListener("click", function r(e) {
          this.removeEventListener("click", r );
          try {
              gBrowser.removeChild( tooltip )
              } 
          catch(e) {}; 
       });

   }, false, menuitem );  
        
})();


Хочу также отметить, что и всплывающая картинка и замещающая картинка - обе нужны.
Причём замещающая нужна скорее тогда, когда надо уменьшить слишком большое изображение (обычно, когда на форумах выкладывают здоровенные пейзажи)
В приведённом ниже коде есть возможность получить всплывающую картинку шириной до 425 пикселей (годится для всех картинок, особо полезна для маленьких) и замещающую картинку до 900 пикселей (берёт не все картинки, но большие картинки берёт уверенно). В контекстном меню имеем два пункта "Всплывающая картинка до 425 рх" и "Картинка до 900 рх". Причём код получился не очень большой :)
скрытый текст

Выделить код

Код:

// Показывать всплывающую картинку шириной до 425 рх или не всплывающую шириной до 900 рх
(function () {
   var Wmed = 425, Wbig = 900, Wlim, Hlim = 700, Wtip, Htip, ratio, img, currStyle;
   var contextMenu = document.getElementById("contentAreaContextMenu");  
   var menuitem = document.createElement("menuitem");      
   menuitem.setAttribute("label", "Всплывающая картинка до 425 рх");  
   contextMenu.appendChild( menuitem );   
   
   var menuitem1 = document.createElement("menuitem");      
   menuitem1.setAttribute("label", "Картинка до 900 рх");  
   contextMenu.appendChild( menuitem1 );   
   
   addDestructor(function() { contextMenu.removeChild( menuitem ) });
   addEventListener("popupshowing", function() { menuitem.hidden = !gContextMenu.onImage }, false, contextMenu );
   
   addDestructor(function() { contextMenu.removeChild( menuitem1 ) });
   addEventListener("popupshowing", function() { menuitem1.hidden = !gContextMenu.onImage }, false, contextMenu );
   function fun1() {
      img = gContextMenu.target; ratio = (img.naturalWidth)/(img.naturalHeight);
      if ( !img.hasAttribute('zoom') ) {
           currStyle = Array.map(img.style, function(prop) { 
                  return prop  + ":" + img.style.getPropertyValue(prop) }).join(";");          
           img.setAttribute('zoom', true);
      }  
      Wtip = Wlim; Htip = (Wtip / ratio).toFixed(0);
      if (Htip > Hlim) {Htip = Hlim; Wtip = (Htip * ratio).toFixed(0);}
   }
   addEventListener("click", function(e) { 
      Wlim = Wmed; fun1(); // получить изображение и его стиль
      var tooltip = gBrowser.appendChild( document.createElement("tooltip") ); // всплывающая картинка над оригиналом         
      var image = tooltip.appendChild( document.createElement("image") );
      image.setAttribute("src", gContextMenu.imageURL );
       
      image.style.cssText = "margin: 0;width: "+Wtip+"px;height: "+Htip+"px;-moz-box-orient: horizontal;text-align: center;";    
      tooltip.showPopup ( img, -1, -1, "popup", "bottomcenter", "bottomleft" );
      
       // удалить подсказку по клику на странице 
       
      gBrowser.addEventListener("click", function r(e) {
          this.removeEventListener("click", r );
          try {
              gBrowser.removeChild( tooltip )
              } 
          catch(e) {}; 
      });

   }, false, menuitem ); 
   addEventListener("command", function(e) {  
      // увеличить изображение и его стиль  
      Wlim = Wbig; fun1();  
      img.style = 'position: relative; z-index: 1000; max-height:' + Htip + 'px; max-width:' + Wtip + 'px'; 
      img.width = Wtip; img.height = Htip;   
      
      // восстановить размер и стиль изображения по клику на странице 
      gBrowser.addEventListener("click", function r(e) {
        if ( e.originalTarget == img ) return;
        this.removeEventListener("click", r );
        try {
            img.style = currStyle; 
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;            
            img.removeAttribute('zoom');
            } 
        catch(e) {}; 
      });
      
   }, false, menuitem1 );   
})();


А можно ли сделать, чтобы выскакивающая картинка появлялась бы не по контекстному меню, а по ховерингу картинки с заданной задержкой?
Для маленьких картинок - просто был бы класс!!!

bunda1 пишет

прокрутка колёсиком мыши на увеличенном изображением увеличивает или уменьшает размеры изображения

Только прокрутка почем-то у некоторых изображений увеличивает только высоту, а ширина остаётся той, которая получилась из контекстного меню.

voqabuhe пишет

Только прокрутка почем-то у некоторых изображений увеличивает только высоту, а ширина остаётся той, которая получилась из контекстного меню.

Нужен пример.

Обновлённый код хорошо работает с квадратными картинками, но искажает пропорции если картинки не квадратные.
Я исправил (почти в самом начале кода, со строки 16), вместо:

Выделить код

Код:

// создать новый стиль увеличивающий изображение ....
      var width = Math.round( img.naturalWidth/img.width ) > 1 ? img.naturalWidth : img.width + imgZoom;
      var height = Math.round( img.naturalHeight/img.height ) > 1 ? img.naturalHeight : img.height + imgZoom;

надо:

Выделить код

Код:

// создать новый стиль увеличивающий изображение ....
      var ratio = img.naturalHeight/img.naturalWidth;
      var width  = Math.round( img.naturalWidth/img.width ) > 1 ? img.naturalWidth : img.width + imgZoom;
      var height = Math.round( img.naturalHeight/img.height)> 1 ? img.naturalHeight :img.height + Math.round(imgZoom*ratio);

Дело в том, что увеличение высоты и ширины на одну и ту же величину нарушает пропорции неквадратных картинок.
Я просто увеличил высоту пропорционально отношению высота/ширина.

difabor пишет

Дело в том, что увеличение высоты и ширины на одну и ту же величину нарушает пропорции неквадратных картинок.
Я просто увеличил высоту пропорционально отношению высота/ширина.

А пример :(

29-12-2013 03:21:37
Вот я увеличил не квадратную картинку и вроде нормальные пропорции:
fe7t.jpg

bunda1
А с этим кодом никак не подружить новый код, на старом работало.

скрытый текст

Выделить код

Код:

/*Спрятать подсказки*/

(function() {
    function onPS(e) {
        if (e.originalTarget.nodeName != "tooltip" || window.__attributesInspector) return;
        var node = e.originalTarget.ownerDocument.tooltipNode;
        for (; node && !(node instanceof HTMLAnchorElement); node = node.parentNode);
        !node && e.preventDefault();
    }
    const observer = {
        observe: function(win) win.addEventListener("load", this, false),
        handleEvent: function(e) {
            var doc = e.target;
            var win = doc.defaultView;
            win.removeEventListener("load", this, false);
            if (doc.location.href == "chrome://browser/content/browser.xul" || win.cbttp) return;
            win.cbttp = true;
            win.addEventListener("popupshowing", onPS, true);
            win.addEventListener("unload", function onUL() {
                win.removeEventListener("unload", onUL, false);
                win.removeEventListener("popupshowing", onPS, true);
            }, false)
        }
    }
    addEventListener("popupshowing", onPS, true);
    Services.obs.addObserver(observer, "domwindowopened", false);
    addDestructor(function() Services.obs.removeObserver(observer, "domwindowopened"));
})();

Мда, я тоже обнаружил что некоторых не квадратные картинки увеличиваются не пропорционально. Возможно код difaborа решает эту проблему, надо проверить.

bunda1 пишет
difabor пишет

Дело в том, что увеличение высоты и ширины на одну и ту же величину нарушает пропорции неквадратных картинок.
Я просто увеличил высоту пропорционально отношению высота/ширина.

А пример :(

29-12-2013 03:21:37
Вот я увеличил не квадратную картинку и вроде нормальные пропорции:
http://img839.imageshack.us/img839/4760/fe7t.jpg

Вот оригинал:
55964c94.png
Вот как она увеличилась (до исправления кода):
cbc79236.png
Вот как она увеличилась (после исправления кода):
8cac2408.png
Обратите внимание - размер по ширине у обоих увеличенных вариантов - тот же.
Чем сильнее картинка отличается от квадратной, тем сильнее разница.
Широкая картинка будет вытягиваться в высоту, а высокая - в ширину.
Впрочем, я могу доказать это математически, если хотите.

villa7 пишет

bunda1
А с этим кодом никак не подружить новый код, на старом работало.

Выделить код

Код:

/*Спрятать подсказки*/

(function() {
    function onPS(e) {
        if ( e.target.lastChild && e.target.lastChild.nodeName == "image") return;
        if ( e.originalTarget.nodeName != "tooltip" || window.__attributesInspector) return;
        var node = e.originalTarget.ownerDocument.tooltipNode;
        for (; node && !(node instanceof HTMLAnchorElement); node = node.parentNode);
        !node && e.preventDefault();
    }
    const observer = {
        observe: function(win) win.addEventListener("load", this, false),
        handleEvent: function(e) {
            var doc = e.target;
            var win = doc.defaultView;
            win.removeEventListener("load", this, false);
            if (doc.location.href == "chrome://browser/content/browser.xul" || win.cbttp) return;
            win.cbttp = true;
            win.addEventListener("popupshowing", onPS, true);
            win.addEventListener("unload", function onUL() {
                win.removeEventListener("unload", onUL, false);
                win.removeEventListener("popupshowing", onPS, true);
            }, false)
        }
    }
    addEventListener("popupshowing", onPS, true);
    Services.obs.addObserver(observer, "domwindowopened", false);
    addDestructor(function() Services.obs.removeObserver(observer, "domwindowopened"));
})();


return;function winObs(aSubject, aTopic) {
   var windows = Cc["@mozilla.org/embedcomp/window-watcher;1"].getService(Ci.nsIWindowWatcher).getWindowEnumerator();
   while( windows.hasMoreElements() ) {
          var win = windows.getNext();    
          LOG( win.name )    
           }
};
Services.ww.registerNotification(winObs);
addDestructor(function() { Services.ww.unregisterNotification(winObs) });

29-12-2013 04:53:24

difabor пишет

Обратите внимание - размер по ширине у обоих увеличенных вариантов - тот же.
Чем сильнее картинка отличается от квадратной, тем сильнее разница.
Широкая картинка будет вытягиваться в высоту, а высокая - в ширину.
Впрочем, я могу доказать это математически, если хотите.

Не квадратные тоже бывают всякие я думал ты подразумеваешь картинки без прямых углов. Насчёт пропорций не понятно, увеличивая вытянутый прямоугольник пропорции должны сохранятся и при чём тут var ratio = img.naturalHeight/img.naturalWidth;

Допустим, исходная картинка имеет размеры 300х100, т.е. отношение ширины к высоте - 3:1
Если Вы увеличите и ширину и высоту на 170 рх, то станет 470:270, т.е. отношение будет ~1.74:1, т.е почти вдвое исказится!
Чтобы сохранить пропорции надо высоту увеличивать не на 170, а на 170/3, т.е. на ~57px.
Именно это я и сделал - я помножил 170 на ratio=H/W, т.е. на 1/3.
Если бы пропорции были бы другими (например, 400:300, то и ratio=H/W было бы 3/4 и 170 умножалось бы на 3/4, т.е. было бы ~127

А может ты и прав:

Выделить код

Код:

alert(3/12); // картинка = 0.25
alert( (3+4)/(12+4) ); // увеличенная картинка = 0.4375

var ratio = 3/12;
alert( (3+4*ratio)/(12+4) ); // увеличенная картинка( by difabor) = 0.25

bunda1
Спасибо, теперь работает. Как бы ещё направление колеса мышки поменять, привык на себя увеличивать, а от себя уменьшать.

villa7

Выделить код

Код:

var zoom = e.detail < 0 ? ScrollZoom : -ScrollZoom;

на

Выделить код

Код:

var zoom = e.detail > 0 ? ScrollZoom : -ScrollZoom;

bunda1
Спасибо, хорошая, а главное нужная кнопка получилась, до этого действительно не хватало ручного зума.

bunda1
Что-то у меня пропорции всё равно искажаются.

voqabuhe пишет

bunda1
Что-то у меня пропорции всё равно искажаются.

Может с изображениями у которых вышина > ширина :/

29-12-2013 18:13:13
И нужен пример.

bunda1 пишет

Может с изображениями у которых вышина > ширина :/

Добавлено Сегодня 18:13:13
И нужен пример.

Да вот хотябы с картинкой из из поста difabor №26

У меня с картинкой из поста difabor нормально всё. Я же на ней код и обкатывал.
А ты используешь последнюю версию 01-12-2013 17:46:04

bunda1 пишет

А ты используешь последнюю версию 01-12-2013 17:46:04

Ну да, конечно.

Надо будет проверить на FF29.

voqabuhe пишет
bunda1 пишет

Может с изображениями у которых вышина > ширина :/

Добавлено Сегодня 18:13:13
И нужен пример.

Да вот хотябы с картинкой из из поста difabor №26

Не могли бы Вы привести скан того, что у Вас получается?
У меня пропорции соблюдаются до тех пор, пока картинка не досигнет ширины экрана. А потом она будет увеличиваться только по вертикали. Но это итак ожидаемо - увеличить размер экрана кнопка не может :)

difabor пишет

Не могли бы Вы привести скан того, что у Вас получается?
У меня пропорции соблюдаются до тех пор, пока картинка не досигнет ширины экрана. А потом она будет увеличиваться только по вертикали. Но это итак ожидаемо - увеличить размер экрана кнопка не может :)

У меня так же если картинка достигла ширину экрана. Так что скан не нужен.
А вот с изображениями у которых вышина > ширина другая ситуация они уходят за экран если достигли высоту экрана.

difabor пишет

Не могли бы Вы привести скан того, что у Вас получается?

w0oxczO.jpg
И так далее, т.е. ширина вообще не увеличивается.

voqabuhe пишет
difabor пишет

Не могли бы Вы привести скан того, что у Вас получается?

http://i.imgur.com/w0oxczO.jpg
И так далее, т.е. ширина вообще не увеличивается.

А Вы уверены, что прошлую версию Вы удалили/закомментировали?
По скрину видно, что картинка у Вас получается квадратная. Проверьте, или не осталось у вас не удалённых кусков старой версии.

difabor пишет

А Вы уверены, что прошлую версию Вы удалили/закомментировали?
По скрину видно, что картинка у Вас получается квадратная. Проверьте, или не осталось у вас не удалённых кусков старой версии.

Уверен на 200%.  Она получается не квадратная, это я её так тормознул, чтобы оставить видимым ваш рисунок, а так её можно ещё вытягивать хоть сколько.  Это у меня на [nightly] так, проверьте сами, что у вас получится.

voqabuhe
А у меня на [nightly] ширина увеличивается:
uw9t.jpg

voqabuhe пишет
difabor пишет

А Вы уверены, что прошлую версию Вы удалили/закомментировали?
По скрину видно, что картинка у Вас получается квадратная. Проверьте, или не осталось у вас не удалённых кусков старой версии.

Уверен на 200%.  Она получается не квадратная, это я её так тормознул, чтобы оставить видимым ваш рисунок, а так её можно ещё вытягивать хоть сколько.  Это у меня на [nightly] так, проверьте сами, что у вас получится.

Я ещё не умею строить новый профиль, увы...:blush:

difabor пишет

Я ещё не умею строить новый профиль, увы...:blush:

Как создать новый профиль? | Форум Mozilla Россия

voqabuhe
Попробуй:

Выделить код

Код:

// Увеличивать размеры изображений из контекстного меню на странице, от 30.12.2013. ................................
(function () {
   var imgZoom = 170;   // на сколько увеличить изображение из меню
   var scrollZoom = 8;  // на сколько увеличивать/уменьшать колесиком мыши
   var scrollTop = 1;   // или -1, переключение направление прокрутки для увеличение колёсиком
   
   // добавить новый пункт в меню изображений
   var contextMenu = document.getElementById("contentAreaContextMenu");
   var menuitem = contextMenu.appendChild(document.createElement("menuitem")); // как последний пункт меню
   menuitem.setAttribute("label", "Увеличить размер");
   addDestructor(function() contextMenu.removeChild(menuitem));
   addEventListener("popupshowing", function() menuitem.hidden = !gContextMenu.onImage, false, contextMenu);

   // если клик или команда на пункте меню
   menuitem.setAttribute("oncommand", "this.run();");
   menuitem.run = function() {
      var img = gContextMenu.target; // получить изображение   

      // конвертировать изображение в base64 ....
      var canvas = document.createElementNS(xhtmlns, 'canvas');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      var base64 = canvas.toDataURL();

      // создать и открыть всплывающую подсказку с увеличенным изображением над изображением .... 
      var tooltip = gBrowser.appendChild( document.createElement("tooltip") );
      tooltip.setAttribute("onpopuphiding", "event.preventDefault();");
      tooltip.style.cssText = "margin-left: -3px; margin-top: -3px; -moz-appearance: none !important; border: none; background: transparent; max-width: none";
      var image = tooltip.appendChild( document.createElement("image") );
      var h = img.height, w = img.width;
      image.style.width = w + imgZoom + "px"; image.style.height = h * (1 + imgZoom / w);
      image.setAttribute("src", base64 );
      tooltip.showPopup(img, -1, -1, "popup", "topleft", "none"); // открыть      
   
      // прокрутка на подсказке меняет размеры изображения, на странице закрывает его .... 
      function imageZoom(e) {
         if ( e && e.target != image ) { removeTooltip(); return; }
         var zoom = (e.detail < 0 ? scrollZoom : -scrollZoom) * scrollTop; 
         var h = image.clientHeight, w = image.clientWidth;
         image.style.width = w + zoom + "px";
         image.style.height = h * (1 + zoom / w) + "px";
      }
      gBrowser.addEventListener('DOMMouseScroll', imageZoom, true);
      
      // удалить подсказку и обработчики ....
      function removeTooltip() {
         try { gBrowser.removeChild( tooltip ) } catch(e) {};
         gBrowser.removeEventListener("click", removeTooltip, true);
         gBrowser.removeEventListener("DOMMouseScroll", imageZoom, true);
      } 
      gBrowser.addEventListener("click", removeTooltip, true);  // удалить по клику на странице         
   }   
})();

30-12-2013 01:55:00

difabor пишет

Я ещё не умею строить новый профиль, увы...:blush:

И не надо создавать, вот Mozilla Firefox, Portable Edition Beta, Aurora, and Nightly | PortableApps.com - Portable software for USB, portable and cloud drives

bunda1
Да теперь намного лучше. Вот только знаешь что заметил, когда при увеличение картинки достигают низа страницы, то ширина перестаёт увеличиваться, т.е она начинают вытягиваться.

voqabuhe пишет

bunda1
Да теперь намного лучше. Вот только знаешь что заметил, когда при увеличение картинки достигают низа страницы, то ширина перестаёт увеличиваться, т.е она начинают вытягиваться.

Да есть такое на [nightly]

bunda1 пишет

Оно того не стоит :/

В общем согласен. Тогда другой вопрос. :) А нельзя сделать, чтобы картинка увеличивалась от центра равномерно во все стороны, а не только вниз и вправо?

30-12-2013 03:04:38
bunda1
Смотрю "Оно того не стоит" удалил. Появилась другое мнение? :)

voqabuhe пишет

Смотрю "Оно того не стоит" удалил. Появилась другое мнение? :)

:/

voqabuhe пишет

А нельзя сделать, чтобы картинка увеличивалась от центра равномерно во все стороны, а не только вниз и вправо?

Сделать можно постоянно перемещая при увеличении изображение относительно его старого центра. Тут нужен алгоритм такого перемещения и не понятно как получить координаты для такого перемещения.
Надо подумать.

bunda1
Кстати увеличение колесом довольно хорошо реализовано в скрипте picViewer for Greasemonkey. Посмотри, может что-то почерпнёшь полезное.

voqabuhe
Скрипт интересный,но на китайском?/японском?Хоть бы английский был.Потому мне больше по-душе  Imagus с фильтрами от Rodny или тот же Mouseover Popup Image Viewer,для которого тоже фильтров хватает,даже здесь на форуме

voqabuhe пишет

А нельзя сделать, чтобы картинка увеличивалась от центра равномерно во все стороны, а не только вниз и вправо?

Вот попробуй с исправлениями от Dumby

Выделить код

Код:

(function () {
    var imgZoom = 170;    // на сколько увеличить изображение из меню
    var scrollZoom = 20;  // на сколько увеличивать/уменьшать колесиком мыши
    var scrollTop = 1;    // или -1, переключение направление прокрутки для увеличение колёсиком

    // добавить новый пункт в меню изображений
    var contextMenu = document.getElementById("contentAreaContextMenu");
    var menuitem = contextMenu.appendChild(document.createElement("menuitem")); // как последний пункт меню
    menuitem.setAttribute("label", "Увеличить размер ( test )");
    addDestructor(function() contextMenu.removeChild(menuitem));
    addEventListener("popupshowing", function() menuitem.hidden = !gContextMenu.onImage, false, contextMenu);

    var ar = Cc['@mozilla.org/accessibleRetrieval;1'].getService(Ci.nsIAccessibleRetrieval);
    ar.getAccessibleFor(gBrowser); // ... ...

    // если клик или команда на пункте меню
    menuitem.setAttribute("oncommand", "this.run();");
    menuitem.run = function() {
        var img = gContextMenu.target; // получить изображение

        // конвертировать изображение в base64 ....
        var canvas = document.createElementNS(xhtmlns, 'canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        var base64 = canvas.toDataURL();

        // создать и открыть всплывающую подсказку с увеличенным изображением над изображением .... 
        var tooltip = gBrowser.appendChild(document.createElement("tooltip")), tts = tooltip.style;
        tooltip.setAttribute("onpopuphiding", "event.preventDefault();");
        tts.cssText = "margin: 0; padding: 0; -moz-appearance: none !important; border: none; background: transparent; max-width: none";
        var image = tooltip.appendChild(document.createElement("image"));

        var acc = ar.getAccessibleFor(img);
        acc.QueryInterface(Ci.nsIAccessibleImage);
        var [ax, ay, aw, ah] = [{}, {}, {}, {}];
        acc.getImagePosition(Ci.nsIAccessibleCoordinateType.COORDTYPE_WINDOW_RELATIVE, ax, ay);
        acc.getImageSize(aw, ah);
        var rect = { left: ax.value, top: ay.value, width: aw.value, height: ah.value };

        var ratio = rect.height / rect.width;
        image.style.width = rect.width + imgZoom + "px";
        tooltip.openPopup(img, "topleft", -1, -1, false, false, null);
        tts.opacity = "0";

        image.onload = function() {
            var k = mozInnerScreenY < 0 ? -mozInnerScreenY : 0;

            var left = rect.left - (outerWidth - innerWidth) / 2 - imgZoom / 2;
            var top = rect.top - ratio * imgZoom / 2;
        
            if (left < 0) left = 0;
            if (top < k) top = k;
            var r = left + rect.width + imgZoom - innerWidth;
            if (r > 0) left -= r;
            var b = top + rect.height + ratio * imgZoom - innerHeight;
            if (b > 0) top -= b;

            tts.top = top + "px"; tts.left = left + "px";
            tts.position = "fixed"; tts.opacity = "";
        };
        image.setAttribute("src", base64);

        // прокрутка на подсказке меняет размеры изображения, на странице закрывает его ....
        function imageZoom(e) {
            if (e.target != image) { removeTooltip(); return; }

            var zoom = (e.detail < 0 ? scrollZoom : -scrollZoom) * scrollTop;
            var zx = zoom / 2, zy = zx * ratio;
            var rect = tooltip.getBoundingClientRect();
            var left = rect.left - zx, top = rect.top - zy;
        
            if (zoom > 0) {
                var k = mozInnerScreenY < 0 ? -mozInnerScreenY : 0;

                if (left - zx < 0 && rect.right < innerWidth) left = 0;
                var r = rect.right + zx - innerWidth;
                if (r > 0 && left > 0) left -= r;

                if (top < k && rect.bottom < innerHeight) top = k;
                var b = rect.bottom + zy - innerHeight;
                if (b > 0 && top > k) top -= b;
            }
            image.style.width = rect.width + zoom + "px";
            tts.left = left + "px"; tts.top = top + "px";
        }
        gBrowser.addEventListener('DOMMouseScroll', imageZoom, true);

        // удалить подсказку и обработчики ....
        function removeTooltip() {
            try { gBrowser.removeChild( tooltip ) } catch(e) {};
            gBrowser.removeEventListener("click", removeTooltip, true);
            gBrowser.removeEventListener("DOMMouseScroll", imageZoom, true);
        }
        gBrowser.addEventListener("click", removeTooltip, true);  // удалить по клику на странице
    }   
})();

bunda1
Ну на мой взгляд теперь совсем другое дело, увеличение просто безупречное. Огромное спасибо тебе и Dumby.  И с Новым Годом Вас. :beer:

bunda1
С последним изменением от Dumby - превосходно, спасибо вам!

bunda1 пишет

Версия: от 14.03.2014

В [nightly] не работает. С версией от 02.01.2014 всё ОК.

voqabuhe пишет
bunda1 пишет

Версия: от 14.03.2014

В [nightly] не работает. С версией от 02.01.2014 всё ОК.

Теперь попробуй Увеличивать размеры изображений из контекстного меню на странице

bunda1
Теперь всё как надо. Спасибо.

bunda1 пишет

voqabuhe пишет: bunda1 пишет: Версия: от 14.03.2014В  не работает. С версией от 02.01.2014 всё ОК.Теперь попробуй Увеличивать размеры изображений из контекстного меню на странице

А можно ли увеличивать размеры не по контекстному меню, а по длинному клику на картинку? Или просто по ховерингу?

Еще бы была возможность перемещать увеличенную картинку  - цены бы ему не было)

emlen пишет

Еще бы была возможность перемещать увеличенную картинку  - цены бы ему не было)

Зачем?

bunda1, иногда необхдимо рассмотреть определенную деталь на изображении, его увеличиваешь, а потом двигаешь, фокусируясь на искомом объекте.. Другой сценарий: изображение увеличили, и оно еще нужно, но оно закрыло что-то также нужное в екущий ммент на страничке...