Увеличивать размеры изображений из контекстного меню на странице ( 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); // удалить по клику на странице } })();
Отредактировано bunda1 (15-03-2014 13:08:33)
Отсутствует
Не знаю бага или нет, но если изображение увеличить несколько раз, то при клике по странице сброс происходит только до предпоследнего увеличения...
Отсутствует
Это недоработка, разберёмся.
Добавлено 01-12-2013 19:07:22
Не знаю бага или нет, но если изображение увеличить несколько раз, то при клике по странице сброс происходит только до предпоследнего увеличения...
Вроде исправил.
Отредактировано bunda1 (01-12-2013 19:07:22)
Отсутствует
А можно ли добавить фичу, чтобы по умолчанию большие картинки уменьшались бы до некоего предустановленного размера?
Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©
Отсутствует
Увеличивать размеры изображений из контекстного меню на странице ( 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. (Я уже отмечал это) - иметь возможность уменьшать картинки до предопределённой величины, если они её превышают.
Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©
Отсутствует
Не знаю почему, но у меня эта штука ведёт себя странно.
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 (02-12-2013 22:22:05)
Отсутствует
скрытый текст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 | Происшествия | Суданцу не дали убежища, он угнал автобус и убил троих
Отсутствует
Нет не исправилось ты просто проверил не на всех изображениях, проверь тут 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 из атрибутов картинки, а мы видим уменьшенный вариант. Когда кнопка возвращает картинку - она возвращает оригинал, а не тот уменьшенный вариант. Если выбрать "Открыть изображение" можно убедиться, что оно больше того, которое на сайте.
А проблема нарушения пропорций разрешена
Отредактировано difabor (03-12-2013 02:57:42)
Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©
Отсутствует
Привожу код, практически ничем не отличающийся от Вашего исходного:
// Увеличивать размеры изображений из контекстного меню на странице, от 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 | Происшествия | Суданцу не дали убежища, он угнал автобус и убил троих
Отсутствует
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 (03-12-2013 05:32:27)
Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©
Отсутствует
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 (03-12-2013 23:34:54)
Отсутствует
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 рх (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 ); })();
Отредактировано difabor (04-12-2013 04:09:41)
Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©
Отсутствует
прокрутка колёсиком мыши на увеличенном изображением увеличивает или уменьшает размеры изображения
Только прокрутка почем-то у некоторых изображений увеличивает только высоту, а ширина остаётся той, которая получилась из контекстного меню.
Отсутствует
Только прокрутка почем-то у некоторых изображений увеличивает только высоту, а ширина остаётся той, которая получилась из контекстного меню.
Нужен пример.
Отсутствует
Обновлённый код хорошо работает с квадратными картинками, но искажает пропорции если картинки не квадратные.
Я исправил (почти в самом начале кода, со строки 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:15:29)
Хорошо, когда у человека есть выбор, но плохо, когда он перед ним стоит ©
Отсутствует
Дело в том, что увеличение высоты и ширины на одну и ту же величину нарушает пропорции неквадратных картинок.
Я просто увеличил высоту пропорционально отношению высота/ширина.
А пример
Добавлено 29-12-2013 03:21:37
Вот я увеличил не квадратную картинку и вроде нормальные пропорции:
Отредактировано bunda1 (29-12-2013 03:21:37)
Отсутствует
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а решает эту проблему, надо проверить.
Отсутствует