☰

PopupX - Flickr Tweak (Only Tiny Design Tweak for Flickr + Autopager support)

browse image(embeded a link) by a Popup Image Viewer ( Original version by NIO, Tweaked Design version by decembre)

  1. // ==UserScript==
  2.  
  3. // @name           PopupX - Flickr Tweak (Only Tiny Design Tweak for Flickr + Autopager support)
  4.  
  5. // @namespace      http://userscripts.org/users/45256
  6.  
  7. // @description    browse image(embeded a link) by a Popup Image Viewer ( Original version by NIO, Tweaked Design version by decembre)
  8.  
  9. // @include        http://*.pixnet.net/album/*
  10.  
  11. // @include        http://photo.pchome.com.tw/*
  12.  
  13. // @include        http://www.wretch.cc/album/*
  14.  
  15. // @include        http://www.wretch.cc/album/
  16.  
  17. // @include        http://www.wretch.cc/blog/*
  18.  
  19. // @include        http://picasaweb.google.com*
  20.  
  21. // @include        http://album.blog.yam.com/*
  22.  
  23. // @include        http://gnn.gamer.com.tw/*
  24.  
  25. // @include        http://*nownews.com*/*
  26.  
  27. // @include        http://2cat.twbbs.org/*
  28.  
  29. // @include        http://komica*.dreamhosters.com/*
  30.  
  31. // @include        http://blog.roodo.com/*
  32.  
  33. // @include        http://iphonecake.com/*
  34.  
  35. // @include        http://*.flickr.com/*
  36.  
  37. // @include        http://*.engadget.com/*
  38.  
  39. // @include        http://www.facebook.com/album.php*
  40.  
  41. // @include        http://class.ruten.com.tw/*
  42.  
  43.  
  44.  
  45.  
  46.  
  47. // @version 0.0.1.20140630035010
  48. // ==/UserScript==
  49. /*
  50. ________________________________________________
  51. ________________________________________________
  52.  
  53. >>> Original Author : nio
  54. // @name           PopupX
  55. // @namespace      http://userscripts.org/users/45256
  56. // @description    browse image(embeded a link) by a Popup Image Viewer
  57. Go here for more information....
  58.  
  59. >>> Thanks to Alesa Dam for her help!
  60. ________________________________________________
  61. ________________________________________________
  62.  
  63. is Tweaked version for Flickr:
  64. ________________________________________________
  65.  
  66. >> 2010-/08/18 : (Thanks to Alesa Dam ) : Press the shift (MAJ) while hovering a thumbnail, if I you want shows the preview  . This way you can decide yourself when to see a bigger picture or not.
  67.  
  68. >> 2010-/08/16
  69. - Added support to Autopager ...by inserting at the end of the script :
  70.   window.addEventListener('AutoPagerAfterInsert', function(){PopupImage.load(); }, false);
  71.   Now no needs to click on the blue button (must find a way to convert it in a On/Off button...)
  72.  
  73. >> 2010/08/13
  74. - Idea of Alesa Dam :  changed line 314 from this:"//img[@class='pc_img' or @class='setThumb' or @class='nextprev_thumb' ]"
  75.   into this:"//img[(@class='pc_img' or @class='setThumb' or @class='nextprev_thumb') and not(contains(@src,'/cols/') or contains(@src,'_z.jpg'))]"
  76.   to make it ignore collection mozaics (which contain '/cols/' in the src attribute) and 640px wide medium images (which contain '_z.jpg' int the src)
  77.  
  78.   
  79. >> 2010/08/12
  80. - just tweak Design by decembre (no new functions)
  81.  
  82.  
  83. */
  84.  
  85. //CHANGE LOG in the Original Version 
  86.  
  87. //  2010/02/25 -
  88. //    * support website: class.ruten.com.tw
  89. //    * modify toolbox style
  90.  
  91. //  2009/07/23 -
  92.  
  93. //    * support website: www.facebook.com/ profile.php & album.php
  94.  
  95. //    * fixed toolbox style: set width
  96.  
  97. //  2009/06/14 -
  98.  
  99. //    * fixed website pattern: Gamer GNN
  100.  
  101. //    * some style changed.
  102.  
  103. //  2009/06/03 -
  104.  
  105. //    * support website: *.engadget.com
  106.  
  107. //  2009/05/28 -
  108.  
  109. //    * append a toolbox at top-left
  110.  
  111. //    * add a option: shrink image
  112.  
  113. //	2009/05/27 -
  114.  
  115. //	  * fixed pattern for yam
  116.  
  117. //  2009/05/24 -
  118.  
  119. //    * support website: iphonecake.com, *.flickr.com
  120.  
  121. //    * add reload button.
  122.  
  123. //    * compatible with google chrome (bookmarklet).
  124.  
  125.  
  126.  
  127.  
  128.  
  129. (function(){
  130.  
  131.  
  132.  
  133. var __fit = false;
  134.  
  135. var PopupImage = 
  136.  
  137. {
  138.  
  139.   
  140.  
  141.   //樣式集
  142.  
  143.   data : 
  144.  
  145.   [
  146.  
  147.     //Pixnet相簿
  148.  
  149.     [ 
  150.  
  151.       /.*\.pixnet\.net\/album\//,
  152.  
  153.       /\/thumb_/,
  154.  
  155.       '/',
  156.  
  157.       '//*[@id="contentBody"]//img[@class="thumb"]' 
  158.  
  159.     ],
  160.  
  161.     //PCHome Photo
  162.  
  163.     [
  164.  
  165.       /photo\.pchome\.com\.tw/,
  166.  
  167.       /s\./,
  168.  
  169.       '.',
  170.  
  171.       '//span[@class="PostponeImg Cover"]'
  172.  
  173. //      '//span/img[1]'
  174.  
  175.     ],
  176.  
  177.     
  178.  
  179.     //無名個人相簿
  180.  
  181.     [
  182.  
  183.       /www\.wretch\.cc\/album\/.+/,
  184.  
  185.       /thumbs\/t/,
  186.  
  187.       '',
  188.  
  189.       '//*[@class="side"]/a/img[1]' 
  190.  
  191.     ],
  192.  
  193.     //無名相簿首頁
  194.  
  195.     [
  196.  
  197.       /www\.wretch\.cc\/album\/$/,
  198.  
  199.       /thumbs\/t/,
  200.  
  201.       '',
  202.  
  203.       '//*[@class="image_link"]/a/img[1]'    //'.image_link >a>img:first-child'
  204.  
  205.     ],
  206.  
  207.     //無名blog頁面
  208.  
  209.     [
  210.  
  211.       /www\.wretch\.cc\/blog\/.+/,
  212.  
  213.       /http:\/\/([\w\W]+cover\/)([\w\W]+)_\w+([\w\W]*)$/,
  214.  
  215.       'http://cover.wretch.cc/$2$3',
  216.  
  217.       "//*[@class='boxMySpaceImg' or @class='bighead' or @id='whowrapper']//img[1]"
  218.  
  219.       //'a.bighead>img:first-child, #whowrapper a img, #boxMySpace .boxMySpaceImg a img'      
  220.  
  221.     ],
  222.  
  223.     //Picasaweb
  224.  
  225.     [
  226.  
  227.       /picasaweb\.google\.com(\.tw)?\/\w+/,
  228.  
  229.       /\/(s\d{2,4})(\-\w+)?\//,
  230.  
  231.       '/s640/',
  232.  
  233.       "//a/img[1]"    //'a>img:first-child'
  234.  
  235.     ],
  236.  
  237.     //Yam   
  238.  
  239.     [
  240.  
  241.       /album\.blog\.yam\.com\/\w+/,
  242.  
  243.       /\/album\/[\w]_/,
  244.  
  245.       '/album/',
  246.  
  247.       "//*[@class='photoimg' or @class='albumShow' or @id='sideBlock' or @id='albumList']//a/img"  //'.photoimg a>img, .albumShow a>img, #sideBlock a>img, #albumList a>img';
  248.  
  249.     ],
  250.  
  251.     //Gamer GNN
  252.  
  253.     [
  254.  
  255.       /gnn\.gamer\.com\.tw\//,
  256.  
  257.       /\/(M|S)\//,
  258.  
  259.       '/B/',
  260.  
  261.       "//img[@class='gnnPIC']" //"//a[starts-with(@href,'javascript:showpic(')]/img"  //'a[href^="javascript:showpic("]>img'
  262.  
  263.     ],
  264.  
  265.     //NowNews
  266.  
  267.     [
  268.  
  269.       /www\.nownews\.com\//,
  270.  
  271.       /s(\d+\.(jpg|JPG))/,
  272.  
  273.       'i$1',
  274.  
  275.       "//a/img"    //'a>img:first-child'
  276.  
  277.     ],
  278.  
  279.     
  280.  
  281.     //2cat (no frameset)
  282.  
  283.     [
  284.  
  285.       /2cat\.twbbs\.org\//,
  286.  
  287.       /thumb\/(\d+)s/,
  288.  
  289.       'src/$1',
  290.  
  291.       "//div[@class='threadpost' or @class='reply']/a/img"         
  292.  
  293.     ],
  294.  
  295.     //komica*.dreamhosters (no frameset)
  296.  
  297.     [
  298.  
  299.       /komica\d+\.dreamhosters\.com\//,
  300.  
  301.       /thumb\/(\d+)s/,
  302.  
  303.       'src/$1',
  304.  
  305.       "//*[contains(name(),'FORM') or contains(name(),'form') or contains(name(),'TABLE')]//a/img"
  306.  
  307.     ],
  308.  
  309.     //Roodo Blog
  310.  
  311.     //sample: http://blog.roodo.com/ace_kaha/
  312.  
  313.     [
  314.  
  315.       /blog\.roodo\.com\//,
  316.  
  317.       /(\w+)_s/,
  318.  
  319.       '$1',
  320.  
  321.       "//div[@class='pict']//img"
  322.  
  323.     ],
  324.  
  325.     //iphonecake.com
  326.  
  327.     [
  328.  
  329.       /iphonecake\.com/,
  330.  
  331.       /(?:\-\w+)(\.jpg)/,
  332.  
  333.       '$1',
  334.  
  335.       "//img[@class='attachment-thumbnail']"
  336.  
  337.     ],
  338.  
  339.     //www.flickr.com
  340.  
  341.     [
  342.  
  343.       /flickr\.com/,
  344.  
  345.       /_[a-z](\.jpg)$/,
  346.  
  347.       '$1',
  348.  
  349.       "//img[(@class='pc_img' or @class='setThumb' or @class='nextprev_thumb') and not(contains(@src,'/cols/') or contains(@src,'_z.jpg'))]"
  350.  
  351.     ],
  352.  
  353.     //mining.tw
  354.  
  355.     // [
  356.  
  357.       // /mining\.tw/,
  358.  
  359.       // /http:\/\/([\w\W]+cover\/)([\w\W]+)_\w+([\w\W]*)$/,
  360.  
  361.       // 'http://cover.wretch.cc/$2$3',
  362.  
  363.       // "//div[@class='mPic']/a/img"
  364.  
  365.     // ],
  366.  
  367. 	//http://chinese.engadget.com
  368.  
  369.     [
  370.  
  371.       /\w+\.engadget\.com/,
  372.  
  373.       /_thumbnail/,
  374.  
  375.       '',
  376.  
  377.       "//*[@class='thumb' or @class='postgallery']//a/img"
  378.  
  379.     ],
  380.  
  381.     //facebook album  
  382.  
  383.     //facebook profile
  384.  
  385.     [
  386.  
  387.       /www\.facebook\.com\/(album|profile)\.php/,
  388.  
  389.       /s([\d_]+)?\.jpg/,
  390.  
  391.       'n$1.jpg',
  392.  
  393.       "//div[@id='photos_of_wrapper' or @id='album_container' or @id='tab_content']//a/img"
  394.  
  395.     ],
  396.     //ruten.com
  397.  
  398.     [
  399.  
  400.       /\.ruten\.com\.tw/,
  401.  
  402.       /_\w\.jpg$/,
  403.  
  404.       "_m.jpg",
  405.  
  406.       "//div[@id='bestgoods_div']/parent::td//a/img | //*[@class='featured-first' or @class='all-products']//a/img"
  407.  
  408.     ]
  409.  
  410. ],
  411.  
  412.     
  413.  
  414.   
  415.  
  416.   //樣式組
  417.  
  418.   //針對不同網站有個別的設定
  419.  
  420.   PatternSet: function()
  421.  
  422.   {
  423.  
  424.     this.urlExpression = //;
  425.  
  426.     this.patternBefore = //;
  427.  
  428.     this.patternAfter = '';
  429.  
  430.     this.imgSelector = '';
  431.  
  432.     
  433.  
  434.     // self 指物件本身
  435.  
  436.     var self = this;
  437.  
  438.     
  439.  
  440.     //插入真實圖片元素
  441.  
  442.     this.appendTrueImage =
  443.  
  444.       function(srcImgNode, patternSet)
  445.  
  446.       {
  447.  
  448.         
  449.  
  450.         patternSet = self;
  451.  
  452.         
  453.  
  454.         var imgSrc = srcImgNode.getAttribute('src');
  455.  
  456.         //if (imgSrc == null)
  457.  
  458.           //imgSrc = srcImgNode.src;
  459.  
  460.         if (imgSrc == null || imgSrc == "")
  461.  
  462.         {
  463.  
  464.           if (location.href.match(/photo\.pchome/))
  465.  
  466.           {
  467.  
  468.             imgSrc = srcImgNode.getAttribute('id');         
  469.  
  470.             imgSrc = imgSrc.replace(/Img\[([\w\/\.\-]+)\]/, '$1');
  471.  
  472.           }
  473.  
  474.           else if (location.href.match(/www\.wretch\.cc\/blog\/.+/))
  475.  
  476.           {
  477.  
  478.             var re = /\/blog\/(\w+)/;
  479.  
  480.             var after = 'http://cover.wretch.cc/$1.jpg';
  481.  
  482.             var href = srcImgNode.parentNode.getAttribute('href');
  483.  
  484.             imgSrc = href.replace(re, after).toLowerCase();
  485.  
  486.           }
  487.  
  488.         }
  489.  
  490.         imgSrc = imgSrc.replace(patternSet.patternBefore, patternSet.patternAfter);
  491.  
  492.         var imgNode = document.createElement('img');
  493.  
  494.         imgNode.setAttribute('class', 'trueImg');
  495.  
  496.         imgNode.setAttribute('src', imgSrc);
  497.  
  498.         imgNode.style.display = 'none';
  499.  
  500.  
  501.  
  502.         srcImgNode.parentNode.appendChild(imgNode);
  503.  
  504.  
  505.  
  506.         srcImgNode.addEventListener('mouseover', 
  507.  
  508.           function(ev)
  509. // Alesa Dam change :  only shows the preview if I press shift (MAJ) while hovering a thumbnail. This way y can decide yourself when to see a bigger picture or not.
  510.           {
  511. 		  if (!ev.shiftKey) {
  512.     return;
  513.           }
  514.  
  515.             PopupImage.show();            
  516.  
  517.             var true_nodes = PopupImage.getElementsByClassName(ev.target.parentNode, 'trueImg'); 
  518.  
  519.             if (true_nodes.length == 0)
  520.  
  521.               true_nodes = PopupImage.getElementsByClassName(ev.target.parentNode.parentNode, 'trueImg');
  522.  
  523.               
  524.  
  525.             if (true_nodes.length > 0)
  526.  
  527.             {
  528.  
  529.               var srcNode = true_nodes[0];
  530.  
  531.               var get_src = srcNode.getAttribute('src');
  532.  
  533.               //顯示圖片
  534.  
  535.               PopupImage.setViewerSrc(get_src);
  536.  
  537.  
  538.  
  539.               //自動縮放
  540.  
  541.               //if (PopupImage.isFitWindow)
  542.  
  543.  
  544.  
  545.               if (__fit)
  546.  
  547.               {
  548.  
  549.                 var sW = srcNode.width;
  550.  
  551.                 var sH = srcNode.height;
  552.  
  553.                 var iW = window.innerWidth;
  554.  
  555.                 var iH = window.innerHeight;
  556.  
  557.  
  558.  
  559.                 var dx = sW/iW;
  560.  
  561.                 var dy = sH/iH;
  562.  
  563.  
  564.  
  565.                 console.log('dx: '+dx+', dy:' +  dy);
  566.  
  567.                 // alert('dx: '+dx+', dy:' +  dy);
  568.  
  569.                 if (dx > 1 || dy > 1)
  570.  
  571.                 {
  572.  
  573.                   var fixed_ratio = 0.95;
  574.  
  575.                   var ratio = dx > dy ? dx : dy;
  576.  
  577.                   console.log('ratio: ' + ratio + ' after w,h: '+ (sW/ratio)*fixed_ratio + ',' + (sH/ratio)*fixed_ratio );
  578.  
  579.                   PopupImage.setWidth((sW/ratio)*fixed_ratio);
  580.  
  581.                   PopupImage.setHeight((sH/ratio)*fixed_ratio);
  582.  
  583.                 }
  584.  
  585.                 else
  586.  
  587.                 {
  588.  
  589.                   PopupImage.setWidth("");
  590.  
  591.                   PopupImage.setHeight("");
  592.  
  593.                 }
  594.  
  595.               }
  596.  
  597.               else
  598.  
  599.               {
  600.  
  601.                   PopupImage.setWidth("");
  602.  
  603.                   PopupImage.setHeight("");
  604.  
  605.               }
  606.  
  607.               
  608.  
  609.             }
  610.  
  611.           },
  612.  
  613.           false);
  614.  
  615.           
  616.  
  617.         srcImgNode.addEventListener('mouseout',         
  618.  
  619.           function(ev)
  620.  
  621.           {
  622.  
  623.             PopupImage.hide();
  624.  
  625.           },
  626.  
  627.           false);
  628.  
  629.  
  630.  
  631.         srcImgNode.addEventListener('mousemove', 
  632.  
  633.           function(ev)
  634.  
  635.           {     
  636.  
  637.             var viewportWidth = window.innerWidth;
  638.  
  639.             var viewportHeight = window.innerHeight;
  640.  
  641.             var x,y;
  642.  
  643.             var paddingX= 100;
  644.  
  645.             var paddingY = 100;
  646.  
  647.             var imgWidth = PopupImage.getWidth();
  648.  
  649.             var imgHeight = PopupImage.getHeight();
  650.  
  651.             
  652.  
  653.             if(ev.pageX >= viewportWidth/2)
  654.  
  655.             {
  656.  
  657.                 x = ev.pageX - imgWidth - paddingX;
  658.  
  659.                 offsetX = (typeof(window.pageXOffset)=='undefined') ? ev.pageX - ev.clientX : window.pageXOffset;
  660.  
  661.                 x = (x >= offsetX) ? x: offsetX;
  662.  
  663.             }
  664.  
  665.             else
  666.  
  667.             {
  668.  
  669.                 x = eval(ev.pageX + paddingX);
  670.  
  671.                 var dx = (ev.pageX + imgWidth + paddingX) - viewportWidth;
  672.  
  673.                 x = (dx > 0) ? x-dx : x;
  674.  
  675.             }
  676.  
  677.             
  678.  
  679.             if (ev.clientY >= viewportHeight/2)
  680.  
  681.             {
  682.  
  683.                 y = ev.pageY - imgHeight - paddingY;
  684.  
  685.                 offsetY = (typeof(window.pageYOffset)=='undefined') ? ev.pageY - ev.clientY : window.pageYOffset;
  686.  
  687.                 y = (y >= offsetY) ? y : offsetY;
  688.  
  689.             }
  690.  
  691.             else
  692.  
  693.             {
  694.  
  695.                 y = eval(ev.pageY + paddingY);
  696.  
  697.                 dy = (viewportHeight -( ev.clientY + imgHeight) - paddingY);
  698.  
  699.                 y = (dy >= 0) ? y : y+dy-50;
  700.  
  701.             }
  702.  
  703.  
  704.  
  705.             PopupImage.setViewerPos(x, y);
  706.  
  707.           },
  708.  
  709.           false);
  710.  
  711.           
  712.  
  713.         
  714.  
  715.       },
  716.  
  717.       
  718.  
  719.     //列舉元素
  720.  
  721.     this.selectNodes = 
  722.  
  723.       function(xpathExpr)
  724.  
  725.       {
  726.  
  727.         var nodes = new Array(); 
  728.  
  729.         var iters = document.evaluate(xpathExpr, document, null, XPathResult.ANY_TYPE, null); 
  730.  
  731.         var node; 
  732.  
  733.         while (node = iters.iterateNext()) 
  734.  
  735.         { 
  736.  
  737.           nodes.push(node); 
  738.  
  739.         };
  740.  
  741.         return nodes;   
  742.  
  743.       },
  744.  
  745.      
  746.  
  747.     //檢查網址
  748.  
  749.     this.check = function() 
  750.  
  751.       {
  752.  
  753.         if (location.href.match(self.urlExpression))
  754.  
  755.           self.set();
  756.  
  757.       },
  758.  
  759.     
  760.  
  761.     //建立所有物件及連結
  762.  
  763.     this.set = function()
  764.  
  765.     {
  766.  
  767.       PopupImage.isGetProfile = true;
  768.  
  769.       var nodes = this.selectNodes(this.imgSelector);
  770.  
  771.       for(var i=0;i<nodes.length;i++)
  772.  
  773.       {
  774.  
  775.         //建立原始圖片元素
  776.  
  777.         this.appendTrueImage(nodes[i], this);
  778.  
  779.  
  780.  
  781.       }
  782.  
  783.     }
  784.  
  785.     
  786.  
  787.   },
  788.  
  789.   
  790.  
  791.   //存放所有樣式組
  792.  
  793.   patterns : null,
  794.  
  795.   
  796.  
  797.   //頁面不支援的訊息
  798.  
  799.   NOT_SUPPORT_MSG : 'Not support this page !',
  800.  
  801.  
  802.  
  803.   //載入樣式
  804.  
  805.   loadPatterns :
  806.  
  807.     function()
  808.  
  809.     {
  810.  
  811.       var d = this.data;
  812.  
  813.       var aList = [];
  814.  
  815.       
  816.  
  817.       for (var i=0; i<d.length; i++)
  818.  
  819.       {
  820.  
  821.         var set = d[i];
  822.  
  823.         var p = new this.PatternSet();
  824.  
  825.         p.urlExpression = set[0];
  826.  
  827.         p.patternBefore = set[1];
  828.  
  829.         p.patternAfter = set[2];
  830.  
  831.         p.imgSelector = set[3];
  832.  
  833.           
  834.  
  835.         aList.push(p);
  836.  
  837.       }
  838.  
  839.       
  840.  
  841.       this.patterns = aList;
  842.  
  843.       return d.length;
  844.  
  845.     },
  846.  
  847.   
  848.  
  849.   //viewer flag
  850.  
  851.   isViewerShow: false,
  852.  
  853.   
  854.  
  855.   //match profile
  856.  
  857.   isGetProfile: false,
  858.  
  859.   
  860.  
  861.   //show not support alert
  862.  
  863.   isAlert : true,
  864.  
  865.   
  866.  
  867.   //auto fit
  868.  
  869.   isFitWindow: true, 
  870.  
  871.   
  872.  
  873.   //viewer hide or show
  874.  
  875.   hide: function()
  876.  
  877.   {
  878.  
  879.     var viewer = document.getElementById('pi_viewer');
  880.  
  881.     if (viewer)
  882.  
  883.     {
  884.  
  885.       viewer.style.display = 'none';
  886.  
  887.       viewer.style.zIndex = 0;
  888.  
  889.     }  
  890.  
  891.   },
  892.  
  893.   
  894.  
  895.   show: function()
  896.  
  897.   {
  898.  
  899.     var viewer = document.getElementById('pi_viewer');
  900.  
  901.     if (viewer)
  902.  
  903.     {
  904.  
  905.       viewer.style.display = 'block';
  906.  
  907.       viewer.style.zIndex = 65535;
  908.  
  909.     }
  910.  
  911.   },
  912.  
  913.   
  914.  
  915.   //設定位置
  916.  
  917.   setViewerPos: function(x,y)
  918.  
  919.   {
  920.  
  921.     var viewer = document.getElementById('pi_viewer');
  922.  
  923.     if (viewer)
  924.  
  925.     {
  926.  
  927.       viewer.style.top = eval(y + 10) + 'px';
  928.  
  929.       viewer.style.left = eval(x+ 10) + 'px';
  930.  
  931.     }    
  932.  
  933.   },
  934.  
  935.  
  936.  
  937.   //取得寬度
  938.  
  939.   getWidth: function()
  940.  
  941.   {
  942.  
  943.     return document.getElementById('pi_viewer').offsetWidth;
  944.  
  945.   },
  946.  
  947.  
  948.  
  949.   //取得高度
  950.  
  951.   getHeight: function()
  952.  
  953.   {
  954.  
  955.     return document.getElementById('pi_viewer').offsetHeight;
  956.  
  957.   },
  958.  
  959.   
  960.  
  961.   setWidth: function(val)
  962.  
  963.   {
  964.  
  965.     var p = document.getElementById('pi_viewer');
  966.  
  967.     if (val)
  968.  
  969.     {
  970.  
  971.       p.style.width = val + ' px';
  972.  
  973.       p.width = val;
  974.  
  975.     }
  976.  
  977.     else  //val = ''
  978.  
  979.     {
  980.  
  981.       p.style.removeProperty('width');
  982.  
  983.       p.removeAttribute('width');
  984.  
  985.     }
  986.  
  987.   },
  988.  
  989.   
  990.  
  991.   setHeight: function()
  992.  
  993.   {
  994.  
  995.    var p = document.getElementById('pi_viewer');
  996.  
  997.     if (val)
  998.  
  999.     {
  1000.  
  1001.       p.style.height = val + ' px';
  1002.  
  1003.       p.height = val;
  1004.  
  1005.     }
  1006.  
  1007.     else  //val = ''
  1008.  
  1009.     {
  1010.  
  1011.       p.style.removeProperty('height');
  1012.  
  1013.       p.removeAttribute('height');
  1014.  
  1015.     }
  1016.  
  1017.   },
  1018.  
  1019.  
  1020.  
  1021.   getElementsByClassName : function (parentElement,className){
  1022.  
  1023.     var elems = parentElement.getElementsByTagName("*");
  1024.  
  1025.     var result=[];
  1026.  
  1027.     for (i=0; j=elems[i]; i++){
  1028.  
  1029.       if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1)
  1030.  
  1031.       {
  1032.  
  1033.         result.push(j);
  1034.  
  1035.       }
  1036.  
  1037.     }
  1038.  
  1039.     return result;
  1040.  
  1041.   },
  1042.  
  1043.  
  1044.  
  1045.   //改變顯示路徑
  1046.  
  1047.   setViewerSrc: function(src)
  1048.  
  1049.   {
  1050.  
  1051.     //alert(src);
  1052.  
  1053.                   
  1054.  
  1055.     var viewer = document.getElementById('pi_viewer');
  1056.  
  1057.     if (viewer)
  1058.  
  1059.     {
  1060.  
  1061.       viewer.setAttribute('src', src);
  1062.  
  1063.     }    
  1064.  
  1065.   },
  1066.  
  1067.     
  1068.  
  1069.   //create PopupViewer Element
  1070.  
  1071.   setViewer: function()
  1072.  
  1073.   {
  1074.  
  1075.     var viewerNode = document.getElementById('pi_viewer');
  1076.  
  1077.     if (!viewerNode )
  1078.  
  1079.     {
  1080.  
  1081.       viewerNode = document.createElement('img');
  1082.  
  1083.       viewerNode.setAttribute('id', 'pi_viewer');
  1084. ///decembre change : de dashed à solid 20px
  1085.       viewerNode.setAttribute('style', 'background: white;display: none;z-index:99;top:0;left:0;color:black;position:absolute;border:#888 solid 20px');
  1086.  
  1087.  
  1088.  
  1089.       document.body.appendChild(viewerNode);
  1090.  
  1091.  
  1092.  
  1093.       viewerNode.addEventListener('mouseover', function() {PopupImage.show();}, false);
  1094.  
  1095.       viewerNode.addEventListener('mouseout', function() {PopupImage.hide();}, false);
  1096.  
  1097.       viewerNode.addEventListener('click', function(){PopupImage.hide();}, false);
  1098.  
  1099.  
  1100.  
  1101.     }
  1102.  
  1103.   },
  1104.  
  1105.   
  1106.  
  1107.   //append a tool box
  1108.  
  1109.   setToolTip: function()
  1110.  
  1111.   {
  1112.  
  1113.     if (document.getElementById('pi_tooltip') == null)
  1114.  
  1115.     {
  1116.  
  1117.       var toolBox = document.createElement('div');
  1118. /// decembre Change : width de 20px à 5px ; position fixed à ; top: de 300px à 500px, left à right , border de solid gray 1px à 0, padding de 2px à 0px, background : de #F2A531 (orange) à #FFFFFF (blanc)
  1119.       toolBox.setAttribute('style', 'width:5px; position:fixed; top:350px;right:10px;border:0;padding:0px;background:#FFFFFF;opacity:0.5;font:8px verdana !important;');
  1120.  
  1121.       toolBox.setAttribute('id', 'pi_tooltip');
  1122.  
  1123.       document.body.appendChild(toolBox);
  1124.  
  1125.     }  
  1126.  
  1127.   },
  1128.  
  1129.   
  1130.  
  1131.   //append a reload button
  1132.  
  1133.   setReloadButton: function()
  1134.  
  1135.   {
  1136.  
  1137.  
  1138.  
  1139.     if (document.getElementById('pi_reload') == null)
  1140.  
  1141.     {
  1142.  
  1143.       var reloadImg = document.createElement('img');
  1144.  
  1145.       reloadImg.setAttribute('style', 'border:0;');
  1146. /// decembre change image reload par bouton bleu
  1147.       reloadImg.src="data:;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABc0lEQVQ4je2Tz27TQByEv7XXSYgtIqWh4U9aop7gCThxgCOvwIG34EF4KlQJVQhUJLhUpCRumjiOY9fuZnd/HMqpROoZiZFGc5pvTqM+ffOtH5kMvlwy/pwxOitlP7c8MI6OqbFmw+Z6TupmTMlJsUGGoyCiQWP1zMv7gwPehUMOkxL9aEMwqWDRQLUF5yDw2LYhjzO+d+f+2K042VR8LYrgXP+qebW3x7glaB1AqBShAqUgjqAfC8976Gc9BoOI/nbF4XLC+GxCki78sRYI2CEFhAruacWgA09i4WGboBK6sub+MpZuWarOzvJt0M5UNwN3Au7Sf8A/AZDbFrwA4sEJ6K3HWI8X+btkPKyN8LMEDUxDrMso8pTFbKnyNFNX6uUH92b0lLdJT143in5uaK3MzZFqA8aB3WKpyfUFp9GEj5Jx0tTqtKrUVPHCBwzptB/LKNnnqBXLkYoYWkdiGrzZsL6ek7oLzln+ubOnQHOFxv4Gzp29cH1mY9IAAAAASUVORK5CYII=";
  1148. /// decembre Change : 
  1149. //      reloadImg.setAttribute('style', "position:fixed; top:20px;left:10px;border:0;cursor:pointer;");
  1150.  
  1151.       reloadImg.setAttribute('style', "border:0;cursor:pointer;");
  1152.  
  1153.       reloadImg.setAttribute('title', 'PopupX reload');
  1154.  
  1155.       reloadImg.setAttribute('id', 'pi_reload');
  1156.  
  1157.       reloadImg.addEventListener('click', function(){PopupImage.load(); }, false);
  1158.  
  1159.       document.getElementById('pi_tooltip').appendChild(reloadImg);
  1160.  
  1161.     }
  1162.  
  1163.   },
  1164.  
  1165.   
  1166.  
  1167.   //append a checkbox
  1168.  
  1169.   setFitCheckbox: function()
  1170.  
  1171.   {
  1172.  
  1173.     if (document.getElementById('pi_fit') == null)
  1174.  
  1175.     {
  1176.  
  1177.       var fit = document.createElement('label');
  1178.  
  1179.       fit.setAttribute('fit', '1');
  1180.  
  1181.       fit.setAttribute('id', 'pi_fit');
  1182. ///decembre change : black à red
  1183.       fit.setAttribute('style', 'color:red !important;cursor:pointer;');
  1184.  
  1185.       fit.textContent = 'S: ' + (__fit ? "O" : "X");
  1186.  
  1187.       fit.setAttribute('title', fit.textContent);
  1188.  
  1189.       fit.addEventListener('click', function(){
  1190.  
  1191.         __fit = fit.getAttribute('fit') == '1' ? true : false;
  1192.  
  1193.         this.isFitWindow = __fit;
  1194.  
  1195.  
  1196.  
  1197.         fit.setAttribute('fit', (!this.isFitWindow)*1+'');
  1198.  
  1199.         fit.textContent = 'S: ' + (this.isFitWindow ? "O" : "X");
  1200.  
  1201.         fit.setAttribute('title', fit.textContent);
  1202.  
  1203.       }, false);
  1204.  
  1205.       
  1206.  
  1207.       document.getElementById('pi_tooltip').appendChild(document.createElement('hr'));
  1208.  
  1209.       document.getElementById('pi_tooltip').appendChild(fit);      
  1210.  
  1211.     }
  1212.  
  1213.   },
  1214.  
  1215.     
  1216.  
  1217.   //check browser
  1218.  
  1219.   CheckBrowser: function()
  1220.  
  1221.   {
  1222.  
  1223.     if (navigator.userAgent)
  1224.  
  1225.     {
  1226.  
  1227.       if (typeof String.prototype.replace_regx == 'function')
  1228.  
  1229.       //if Google Chrome
  1230.  
  1231.         String.prototype.replace = String.prototype.replace_regx;
  1232.  
  1233.     }
  1234.  
  1235.   },
  1236.  
  1237.  
  1238.  
  1239.   //init
  1240.  
  1241.   init: function()
  1242.  
  1243.   {
  1244.  
  1245.     this.CheckBrowser();
  1246.  
  1247.     this.setViewer();
  1248.  
  1249.     this.setToolTip();
  1250.  
  1251.     this.setReloadButton();
  1252.  
  1253.     this.setFitCheckbox();
  1254.  
  1255.     
  1256.  
  1257.   },
  1258.  
  1259.   
  1260.  
  1261.   //load all
  1262.  
  1263.   load : function()
  1264.  
  1265.   {
  1266.  
  1267.     this.init();
  1268.  
  1269.     
  1270.  
  1271.     var count = this.loadPatterns();
  1272.  
  1273.     for(var i=0;i<count;i++)
  1274.  
  1275.     {
  1276.  
  1277.       this.patterns[i].check();
  1278.  
  1279.     }
  1280.  
  1281.     
  1282.  
  1283.     if (!PopupImage.isGetProfile && PopupImage.isAlert)
  1284.  
  1285.     {
  1286.  
  1287.       alert(this.NOT_SUPPORT_MSG);
  1288.  
  1289.     }
  1290.  
  1291.   }
  1292.  
  1293.   
  1294.  
  1295.   
  1296.  
  1297. };
  1298.  
  1299.  
  1300.  
  1301. (function()
  1302.  
  1303. {
  1304. //decembre change : Added support to Autopager
  1305.   PopupImage.isAlert = false;
  1306.  
  1307.   PopupImage.load();
  1308.  
  1309.   window.addEventListener('AutoPagerAfterInsert', function(){PopupImage.load(); }, false);
  1310.  
  1311. })();
  1312.  
  1313.  
  1314.  
  1315.  
  1316.  
  1317. })();
  1318.  
  1319.