1/*** 2 * http://www.page2images.com 3 * 4 * ************demo start************ 5 * // the first para is apikey, default is free key. 6 * // the second para is preload, if you want to load images when document load 7 * // the third para is includeinnerlink, if your screenshots include current domain. 8 * p2iQuery().run("Free", false, false); 9 * // Please notice your domain when use YOUR_DIRECTLINK_KEY. 10 * p2iQuery().run(YOUR_DIRECTLINK_KEY, false, true); 11 * 12 * Please add below scripts in your html. 13 * =========================================================================== 14 * <script type="text/javascript" src="/js/p2i.thumbnails.js"></script> 15 * <script> 16 * window.onload=function() { 17 * p2iQuery().run("6b51f3e77d98e07f", false, true); 18 * //p2iQuery().run("Free", true, true); 19 * }; 20 * </script> 21 * =========================================================================== 22 * ************demo end************ 23 ***/ 24(function () { 25 var p2iQuery = function () { 26 return p2iQuery.fn.init(); 27 }; 28 29 p2iQuery.fn = p2iQuery.prototype = { 30 p2iQuery: "1.0.0", 31 init: function() { 32 return this; 33 }, 34 run: function(apikey, preload, includeinnerlink) { 35 this.apikey = apikey || "Free"; 36 this.preload = preload || false; 37 this.includeinnerlink = includeinnerlink || false; 38 this.isonmouseover = true; 39 40 var is_free = apikey == "Free"; 41 this.add_page2images_popup(is_free); 42 this.preload_all_a_link_tags(); 43 }, 44 add_page2images_popup: function(is_free) { 45 if (document.getElementById('page2images_popup') == null) { 46 var p2i_pop = "<div style='border: 1px solid #222222;'><img id='page2images_img' src='' />"; 47 if (is_free) { 48 p2i_pop += '<div style="border-top: 1px solid #222222; padding: 0 3px; text-align: right;"><a href="http://www.page2images.com" style="color:#222222; font-size:10px;">Website Preview By Page2Images</a></div>'; 49 } 50 p2i_pop += "</div>"; 51 var elem = document.createElement("div"); 52 elem.id = "page2images_popup"; 53 elem.style.background = "#FFFFFF"; 54 elem.style.display = "none"; 55 elem.style.position = "absolute"; 56 elem.style.zIndex = 999; 57 elem.style.border = "1px solid #DDDDDD"; 58 elem.innerHTML = p2i_pop; 59 document.body.insertBefore(elem, document.body.childNodes[0]); 60 } 61 }, 62 verified_href: function(href) { 63 href = href.replace(/[/]$/, ''); 64 if (href == document.location.href) { 65 return false; 66 } 67 68 var p2ireg=new RegExp("^javascript"); 69 if (p2ireg.test(href)) { 70 return false; 71 } 72 73 if (this.includeinnerlink) { 74 return true; 75 } 76 77 if ((new RegExp("^http[s]?://")).test(href) || (new RegExp("^www")).test(href)) { 78 p2ireg=new RegExp(document.location.hostname); 79 if (p2ireg.test(href)) { 80 return false; 81 } else { 82 return true; 83 } 84 } else { 85 return false; 86 } 87 }, 88 get_img_api_url: function(url) { 89 if (!(new RegExp("^http[s]?://")).test(url) && !(new RegExp("^www")).test(url)) { 90 if ((new RegExp("^/")).test(url)) { 91 url = document.location.hostname+url; 92 } else { 93 url = document.location.href + '/' + url; 94 } 95 } 96 97 if (this.apikey == 'Free') { 98 return "http://api.page2images.com/freeimagetag?p2i_visual_link=1&p2i_url=" + url; 99 } else { 100 return "http://api.page2images.com/directlink?p2i_key=" + this.apikey +"&p2i_visual_link=1&p2i_url=" + url; 101 } 102 }, 103 setupmouseoverout: function(elem){ 104 elem.addEventListener('mouseover', function(evt) { 105 p2iQuery().isonmouseover = true; 106 p2iQuery().current_href = p2iQuery().get_img_api_url(this.href); 107 p2iQuery().evt = evt; 108 p2iQuery().Timer = setTimeout(function(){ 109 p2iQuery().isonmouseover = true; 110 if (!p2iQuery().isonmouseover) { 111 return; 112 } 113 var img_src = p2iQuery().current_href; 114 document.getElementById("page2images_img").src= img_src; 115 116 var p2i_popup = document.getElementById("page2images_popup"); 117 p2i_popup.style.display='block'; 118 var evt = p2iQuery().evt; 119 var pleft = evt.clientX + 15; 120 121 var sp = document.body.scrollTop ||document.documentElement.scrollTop; 122 var ptop = evt.clientY + sp + 15; 123 124 if (pleft + p2i_popup.offsetWidth > window.innerWidth) { 125 pleft = pleft - p2i_popup.offsetWidth - 30; 126 } 127 128 p2i_popup.style.left=pleft + 'px'; 129 p2i_popup.style.top= ptop + 'px'; 130 p2iQuery().isonmouseover = false; 131 }, 500); 132 }); 133 elem.onmouseout = function(evt) { 134 p2iQuery().isonmouseover = false; 135 clearTimeout(p2iQuery().Timer); 136 document.getElementById("page2images_popup").style.display = 'none'; 137 document.getElementById("page2images_img").src = ''; 138 }; 139 }, 140 preload_all_a_link_tags: function() { 141 var all_alinks = document.getElementsByTagName("a"); 142 var preload_count = 0; 143 for (var i=0;i<all_alinks.length;i++) { 144 if (this.verified_href(all_alinks[i].href)) { 145 this.setupmouseoverout(all_alinks[i]); 146 if (this.preload && preload_count < 5) { 147 preload_count ++; 148 var elem = document.createElement("img"); 149 elem.src = this.get_img_api_url(all_alinks[i].href); 150 elem.style = "display:none;"; 151 document.body.insertBefore(elem, document.body.childNodes[0]); 152 } 153 } 154 } 155 }, 156 }; 157 window.p2iQuery = p2iQuery; 158})(); 159p2iQuery().run("Free", false, false);