>Форум Mozilla Россия http://forum.mozilla-russia.org/index.php >Сustom Buttons http://forum.mozilla-russia.org/viewforum.php?id=34 >[CB]Увеличивать размеры изображений из контекстного меню на странице http://forum.mozilla-russia.org/viewtopic.php?id=61073 |
bunda1 > 01-12-2013 18:46:04 |
Увеличивать размеры изображений из контекстного меню на странице ( Firefox 17+ ) Выделить код Код:// Увеличивать размеры изображений из контекстного меню на странице, от 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); // удалить по клику на странице } })(); |
Zaycoff > 01-12-2013 18:51:54 |
Не знаю бага или нет, но если изображение увеличить несколько раз, то при клике по странице сброс происходит только до предпоследнего увеличения... |
bunda1 > 01-12-2013 18:53:34 |
Это недоработка, разберёмся. 01-12-2013 19:07:22 Zaycoff пишет
Вроде исправил. |
Zaycoff > 01-12-2013 19:12:02 |
bunda1 пишет
Благодарю! |
difabor > 02-12-2013 07:53:45 |
А можно ли добавить фичу, чтобы по умолчанию большие картинки уменьшались бы до некоего предустановленного размера? |
difabor > 02-12-2013 11:13:33 |
bunda1 пишет
Не знаю почему, но у меня эта штука ведёт себя странно. |
bunda1 > 02-12-2013 22:13:58 |
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); } // увеличить изображение и его стиль 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 |
difabor > 03-12-2013 00:17:35 |
bunda1 пишет
Уважаемый 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 ); })(); |
bunda1 > 03-12-2013 00:24:43 |
Нет не исправилось ты просто проверил не на всех изображениях, проверь тут MIGnews | Происшествия | Суданцу не дали убежища, он угнал автобус и убил троих |
difabor > 03-12-2013 01:36:41 |
bunda1 пишет
У меня - исправилось, правда надо было каждый раз делать псевдоредактирование кнопки (нажимать "Редактировать" и ничего не меняя - ОК. Выделить код Код:// Увеличивать размеры изображений из контекстного меню на странице, от 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, то всё будет ОК, но увеличивать будет один раз. |
difabor > 03-12-2013 03:07:36 |
Привожу код, практически ничем не отличающийся от Вашего исходного: Выделить код Код:// Увеличивать размеры изображений из контекстного меню на странице, от 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 |
bunda1 > 03-12-2013 03:16:08 |
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 > 03-12-2013 03:31:16 |
Но у меня - работает!!! Честное слово! Посмотрите мой последний код - он практически ничем не отличается от Вашего исходного. |
bunda1 > 03-12-2013 03:46:54 |
difabor |
difabor > 03-12-2013 04:22:14 |
bunda1 пишет
Уважаемый bunda1, если Вы сделаете "Открыть изображение" той картинки, ссылку на которую Вы дали (в отдельной вкладке) и сравните его с тем, что на сайте, Вы убедитесь, что оно БОЛЬШЕ. И именно настолько, насколько сброс изображения "не дотягивает" до того, что на сайте. |
bunda1 > 03-12-2013 04:31:43 |
Упс, я имел виду не конкретную картинку на той проклятой странице а все картинки там. |
difabor > 03-12-2013 05:31:51 |
Так эти страницы таки да проклятые. Но дело здесь не в кнопке. У меня есть дополнение Thumbnail zoom, так и оно не все картинки на нём берёт |
bunda1 > 03-12-2013 22:46:00 |
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("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 ); })(); |
difabor > 04-12-2013 01:15:06 |
bunda1 пишет
Уважаемый 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 ); })(); А можно ли сделать, чтобы выскакивающая картинка появлялась бы не по контекстному меню, а по ховерингу картинки с заданной задержкой? Для маленьких картинок - просто был бы класс!!! |
voqabuhe > 29-12-2013 02:41:12 |
bunda1 пишет
Только прокрутка почем-то у некоторых изображений увеличивает только высоту, а ширина остаётся той, которая получилась из контекстного меню. |
bunda1 > 29-12-2013 02:54:01 |
voqabuhe пишет
Нужен пример. |
difabor > 29-12-2013 03:13:38 |
Обновлённый код хорошо работает с квадратными картинками, но искажает пропорции если картинки не квадратные. Выделить код Код:// создать новый стиль увеличивающий изображение .... 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); Дело в том, что увеличение высоты и ширины на одну и ту же величину нарушает пропорции неквадратных картинок. |
bunda1 > 29-12-2013 03:17:22 |
difabor пишет
А пример 29-12-2013 03:21:37 |
villa7 > 29-12-2013 04:08:55 |
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")); })(); |
bunda1 > 29-12-2013 04:10:09 |
Мда, я тоже обнаружил что некоторых не квадратные картинки увеличиваются не пропорционально. Возможно код difaborа решает эту проблему, надо проверить. |
difabor > 29-12-2013 04:16:05 |
bunda1 пишет
Вот оригинал: |
bunda1 > 29-12-2013 04:31:59 |
villa7 пишет
Выделить код Код:/*Спрятать подсказки*/ (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; |
difabor > 29-12-2013 05:04:20 |
Допустим, исходная картинка имеет размеры 300х100, т.е. отношение ширины к высоте - 3:1 |
bunda1 > 29-12-2013 05:04:37 |
А может ты и прав: Выделить код Код: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 |
villa7 > 29-12-2013 06:22:14 |
bunda1 |
bunda1 > 29-12-2013 06:27:17 |
villa7 на |
villa7 > 29-12-2013 07:11:51 |
bunda1 |
voqabuhe > 29-12-2013 12:54:19 |
bunda1 |
bunda1 > 29-12-2013 17:47:31 |
voqabuhe пишет
Может с изображениями у которых вышина > ширина 29-12-2013 18:13:13 |
voqabuhe > 29-12-2013 18:48:02 |
bunda1 пишет
Да вот хотябы с картинкой из из поста difabor №26 |
bunda1 > 29-12-2013 19:19:45 |
У меня с картинкой из поста difabor нормально всё. Я же на ней код и обкатывал. |
voqabuhe > 29-12-2013 19:39:32 |
bunda1 пишет
Ну да, конечно. |
bunda1 > 29-12-2013 19:43:08 |
Надо будет проверить на FF29. |
difabor > 29-12-2013 19:45:01 |
voqabuhe пишет
Не могли бы Вы привести скан того, что у Вас получается? |
bunda1 > 29-12-2013 19:56:56 |
difabor пишет
У меня так же если картинка достигла ширину экрана. Так что скан не нужен. |
voqabuhe > 29-12-2013 20:31:02 |
difabor пишет
|
difabor > 29-12-2013 20:39:05 |
voqabuhe пишет
А Вы уверены, что прошлую версию Вы удалили/закомментировали? |
voqabuhe > 29-12-2013 20:53:36 |
difabor пишет
Уверен на 200%. Она получается не квадратная, это я её так тормознул, чтобы оставить видимым ваш рисунок, а так её можно ещё вытягивать хоть сколько. Это у меня на так, проверьте сами, что у вас получится. |
bunda1 > 29-12-2013 22:00:12 |
difabor > 30-12-2013 01:31:07 |
voqabuhe пишет
Я ещё не умею строить новый профиль, увы... |
voqabuhe > 30-12-2013 01:36:56 |
difabor пишет
|
bunda1 > 30-12-2013 01:51:49 |
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 пишет
И не надо создавать, вот Mozilla Firefox, Portable Edition Beta, Aurora, and Nightly | PortableApps.com - Portable software for USB, portable and cloud drives |
voqabuhe > 30-12-2013 02:42:48 |
bunda1 |
bunda1 > 30-12-2013 02:53:45 |
voqabuhe пишет
Да есть такое на |
voqabuhe > 30-12-2013 03:00:18 |
bunda1 пишет
В общем согласен. Тогда другой вопрос. А нельзя сделать, чтобы картинка увеличивалась от центра равномерно во все стороны, а не только вниз и вправо? 30-12-2013 03:04:38 |
bunda1 > 30-12-2013 03:18:33 |
voqabuhe пишет
voqabuhe пишет
Сделать можно постоянно перемещая при увеличении изображение относительно его старого центра. Тут нужен алгоритм такого перемещения и не понятно как получить координаты для такого перемещения. |
voqabuhe > 30-12-2013 13:59:09 |
bunda1 |
VORON > 30-12-2013 16:18:22 |
voqabuhe |
bunda1 > 02-01-2014 22:51:30 |
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); // удалить по клику на странице } })(); |
voqabuhe > 02-01-2014 23:21:16 |
bunda1 |
bezuma > 08-03-2014 16:16:45 |
bunda1 |
voqabuhe > 15-03-2014 10:35:21 |
bunda1 пишет
В не работает. С версией от 02.01.2014 всё ОК. |
bunda1 > 15-03-2014 13:09:43 |
voqabuhe пишет
Теперь попробуй Увеличивать размеры изображений из контекстного меню на странице |
voqabuhe > 15-03-2014 14:01:50 |
bunda1 |
difabor > 20-04-2014 22:52:08 |
bunda1 пишет
А можно ли увеличивать размеры не по контекстному меню, а по длинному клику на картинку? Или просто по ховерингу? |
emlen > 29-05-2015 12:01:40 |
Еще бы была возможность перемещать увеличенную картинку - цены бы ему не было) |
bunda1 > 29-05-2015 14:28:02 |
emlen пишет
Зачем? |
emlen > 29-05-2015 14:33:19 |
bunda1, иногда необхдимо рассмотреть определенную деталь на изображении, его увеличиваешь, а потом двигаешь, фокусируясь на искомом объекте.. Другой сценарий: изображение увеличили, и оно еще нужно, но оно закрыло что-то также нужное в екущий ммент на страничке... |