API tools faq
paste
Advertisement
dramagod

Script Photo Showroom

dramagod
Dec 31st, 2013
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.67 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>PHOTOSHOWROOM</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta name="author" content="Dayz Hidayat">
  8. <meta http-equiv="imagetoolbar" content="no">
  9. <style type="text/css">
  10. html {
  11. overflow: hidden;
  12. }
  13. body {
  14. margin: 0px;
  15. padding: 0px;
  16. background: #000;
  17. width: 100%;
  18. height: 100%;
  19. }
  20. #screen {
  21. position: absolute;
  22. top: 1%;
  23. left: 1%;
  24. width: 98%;
  25. height: 98%;
  26. background: #000;
  27. color: #fff;
  28. }
  29. #screen div {
  30. position: absolute;
  31. overflow: hidden;
  32. cursor: pointer;
  33. }
  34. #screen img {
  35. position: absolute;
  36. width: 100%;
  37. height: 100%;
  38. }
  39. #screen .label {
  40. position: absolute;
  41. color: #FFF;
  42. background: #000;
  43. font-family: arial;
  44. white-space: no-wrap;
  45. }
  46. </style>
  47.  
  48. <!-- utilities -->
  49. <script type="text/javascript" src="http://lorddayz.googlecode.com/files/minilib.js"></script>
  50.  
  51. <script type="text/javascript">
  52. // ========================================================
  53. // ====== Javascript Slideshow ======
  54. // script written by Gerard Ferrandez - December 31, 2006
  55. // ========================================================
  56.  
  57. var diap = {
  58. /////////////////////////////////
  59. BR : 3, // border size in px
  60. ZR : .75, // zoom ratio
  61. SP : .08, // speed
  62. /////////////////////////////////
  63. V : false,
  64. S : false,
  65. G : true,
  66.  
  67. resize : function () {
  68. /* ==== window resize event ==== */
  69. diap.nw = diap.scr.offsetWidth;
  70. diap.nh = diap.scr.offsetHeight;
  71. diap.nwu = (diap.nw * diap.ZR);
  72. diap.nhu = (diap.nh * diap.ZR);
  73. diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;
  74. diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;
  75. diap.rc = 255 / ((diap.nw / diap.NX) - diap.nwt);
  76. if (diap.N) {
  77. diap.setPosition();
  78. if (!diap.G) diap.delLabels();
  79. }
  80. },
  81.  
  82. setPosition : function () {
  83. /* ==== calculate image target position ==== */
  84. var k = 0;
  85. var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;
  86. for (var j = 0; j < this.NY; j++) {
  87. var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;
  88. for (var i = 0; i < this.NX; i++) {
  89. var o = this.spa[k++];
  90. o.y1 = y;
  91. o.x1 = x;
  92. o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;
  93. o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;
  94. x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);
  95. }
  96. y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);
  97. }
  98. },
  99.  
  100. delLabels : function () {
  101. /* ==== remove texts ==== */
  102. for ( var i = 0; i < diap.N; i++) {
  103. var o = diap.spa[i];
  104. if (o.T) diap.scr.removeChild(o.T);
  105. o.T = false;
  106. }
  107. },
  108.  
  109. run : function () {
  110. /* ==== main loop ==== */
  111. for ( var i = 0; i < diap.N; i++) diap.spa[i].move();
  112. setTimeout(diap.run, 16);
  113. },
  114.  
  115. init : function (container, NX, NY, path, images) {
  116. /* ==== initialize script ==== */
  117. this.scr = id(container);
  118. if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }
  119. this.NX = NX;
  120. this.NY = NY;
  121. this.spa = {};
  122. this.resize();
  123. var k = 0;
  124. for (var y = 0; y < this.NY; y++) {
  125. for (var x = 0; x < this.NX; x++) {
  126. /* ==== create HTML elements ==== */
  127. var s = this.spa[k] = document.createElement('div');
  128. s.img = document.createElement('img');
  129.  
  130. /* ==== opacity optimized function ==== */
  131. s.img.setOpacity = function (alpha) {
  132. if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100;
  133. if (alpha == 100) {
  134. /* ==== speed opt - remove IE filter ==== */
  135. this.style.visibility = 'visible';
  136. this.style.filter = '';
  137. this.style.opacity = 1;
  138. return 100;
  139. } else if (alpha == 0) {
  140. /* ==== hide image, remove opacity ==== */
  141. this.style.visibility = 'hidden';
  142. this.style.filter = '';
  143. this.style.opacity = 0;
  144. return 0;
  145. }
  146. if (this.filters) {
  147. /* ==== IE filter ==== */
  148. if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';
  149. else this.filters.alpha.opacity = alpha;
  150. /* ==== CSS opacity ==== */
  151. } else this.style.opacity = alpha * .01;
  152. return alpha;
  153. }
  154. s.img.src = id('loading').src;
  155. s.appendChild(s.img);
  156. this.scr.appendChild(s);
  157.  
  158. /* ==== pre-load image ==== */
  159. s.pre = new Image();
  160. s.pre.obj = s;
  161. s.pre.onload = function() { this.obj.img.src = this.src; }
  162. s.pre.src = path + images[k][0];
  163.  
  164. /* ==== set image variables ==== */
  165. s.x = x;
  166. s.y = y;
  167. s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;
  168. s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;
  169. s.x1 = x * (this.nw / this.NX);
  170. s.y1 = y * (this.nh / this.NY);
  171. s.w0 = 0;
  172. s.h0 = 0;
  173. s.w1 = 0;
  174. s.h1 = 0;
  175. s.V = 0;
  176. s.t = images[k][1];
  177. s.T = false;
  178.  
  179. /* ==== function move image ==== */
  180. s.move = function() {
  181. /* ==== position images ==== */
  182. this.style.left = px(this.x0 += (this.x1 - this.x0) * diap.SP);
  183. this.style.top = px(this.y0 += (this.y1 - this.y0) * diap.SP);
  184. this.style.width = px(this.w0 += (this.w1 - this.w0) * diap.SP);
  185. this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP);
  186. if (this != diap.S) {
  187. /* ==== set image background color ==== */
  188. if (Math.abs(this.w1 - this.w0) > 1) {
  189. var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt));
  190. this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')');
  191. }
  192. if (this == diap.V) {
  193. /* ==== on mouseover: fade in ==== */
  194. if (this.V < 100) this.img.setOpacity(this.V += 5);
  195. } else {
  196. /* ==== fade out ==== */
  197. if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2);
  198. }
  199. }
  200. /* ==== text effect ==== */
  201. if (this.T) this.dispLabel();
  202. }
  203.  
  204. /* ==== display text function (typewriter FX) ==== */
  205. s.dispLabel = function() {
  206. if (diap.G || diap.S == this) {
  207. /* ==== zoomed image ==== */
  208. this.T.style.left = px(this.x0);
  209. this.T.style.top = px(this.y0);
  210. this.T.style.width = px(this.w0);
  211. } else {
  212. /* ==== calculate text position ==== */
  213. var xt = diap.S.x0 + this.w0 + diap.BR;
  214. if (this.y == diap.Y) {
  215. this.T.style.top = px(this.y0 - this.f - diap.BR);
  216. if (this.y == 0) var xt = diap.S.x0;
  217. } else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0));
  218. if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5);
  219. else this.T.style.left = px(xt);
  220. if (this != diap.V) {
  221. /* ==== text type out ==== */
  222. this.Tp--;
  223. this.T.innerHTML = this.t.substring(0, this.Tp);
  224. if (this.Tp < 1) {
  225. diap.scr.removeChild(this.T);
  226. this.T = false;
  227. }
  228. } else {
  229. if (this.Tp < this.t.length) {
  230. /* ==== text type in ==== */
  231. this.Tp++;
  232. this.T.innerHTML = this.t.substring(0, this.Tp);
  233. }
  234. }
  235. }
  236. }
  237.  
  238. /* ==== create text function ==== */
  239. s.createLabel = function () {
  240. this.T = document.createElement('div');
  241. this.T.className = 'label';
  242. if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right';
  243. this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));
  244. if(this == diap.S) {
  245. this.f *= 2;
  246. this.T.style.background = 'none';
  247. this.T.style.textAlign = 'center';
  248. }
  249. this.T.style.fontSize = ''.concat(this.f, 'px');
  250. this.T.innerHTML = this.t;
  251. this.T.style.left = px(-1000);
  252. this.T.style.width = px(diap.nwu * .5);
  253. this.T.style.height = px(this.f + 3);
  254. this.Tp = 0;
  255. diap.scr.appendChild(this.T);
  256. }
  257.  
  258. /* ==== on mouse over event ==== */
  259. s.onmouseover = function() {
  260. if (diap.S != this && diap.G != this) {
  261. /* ==== display image ==== */
  262. this.img.setOpacity(100);
  263. this.V = this.img.setOpacity(20);
  264. }
  265. /* ==== create text ==== */
  266. if (!this.T) this.createLabel();
  267. diap.V = this;
  268. }
  269.  
  270. /* ==== on click event ==== */
  271. s.onclick = function() {
  272. /* ==== memorize selected image ==== */
  273. diap.X = this.x;
  274. diap.Y = this.y;
  275. diap.V = false;
  276. diap.G = false;
  277. this.V = this.img.setOpacity(100);
  278. diap.delLabels();
  279. if (diap.S == this) {
  280. /* ==== zoom out - grid mode on ==== */
  281. diap.S = false;
  282. diap.G = this;
  283. for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel();
  284. } else {
  285. /* ==== zoom in ==== */
  286. diap.S = this;
  287. this.createLabel();
  288. }
  289. diap.setPosition();
  290. }
  291. s.createLabel();
  292. s.ondblclick = s.onclick;
  293. s.ondrag = function () { return false; }
  294. k++;
  295. }
  296. }
  297. this.N = NX * NY;
  298. /* ==== add resize event ==== */
  299. this.resize();
  300. addEvent(window, 'resize', diap.resize);
  301. /* ==== start main loop ==== */
  302. this.run();
  303. }
  304. }
  305.  
  306. /* ==== create diaporama ==== */
  307. onload = function () {
  308. /* ==== container, X, T, path, [image.src, text] ==== */
  309. diap.init("screen", 4, 4, "", [
  310. ["http://1.bp.blogspot.com/-nbfeaBtnMBU/TsZsvX2DW5I/AAAAAAAAAhE/exf0zEEolsU/s1600/or8.jpg", "His little voodoo was a success"],
  311. ["http://1.bp.blogspot.com/-UkSmyhMdTJM/TsZsqG70FUI/AAAAAAAAAgc/pJSKeD-cE88/s1600/or46.jpg", "She arrived from nowhere"],
  312. ["http://4.bp.blogspot.com/-e6WvJb0qIek/TsZsx2JEuXI/AAAAAAAAAhU/WfErCaVqerA/s1600/or10.jpg", "as cute as she could be"],
  313. ["http://1.bp.blogspot.com/-ns-Hsewomx0/TsZstdbYlqI/AAAAAAAAAg0/vCNuzppNx68/s1600/or4.jpg", "It was a night of full moon"],
  314. ["http://1.bp.blogspot.com/-bQN7_Dxg-lw/TsZs16uU1RI/AAAAAAAAAh0/M5DP02Xx-1w/s1600/or16.jpg", "It didn't take him anytime to fall in love"],
  315. ["http://4.bp.blogspot.com/-bjmswfQArAY/TsZswygsgBI/AAAAAAAAAhM/J-3WvCS6YRA/s1600/or9.jpg", "He had been certain of his success"],
  316. ["http://1.bp.blogspot.com/-3FW2sVbi1RQ/TsZsummpyAI/AAAAAAAAAg8/UM8diJiqKf8/s1600/or6.jpg", "In a few days after"],
  317. ["http://4.bp.blogspot.com/-0dxWIiKN69E/TsZs3J8q3vI/AAAAAAAAAh8/5gvOF8XnmSc/s1600/or27.jpg", "All the tools were in place"],
  318. ["http://4.bp.blogspot.com/--7JkfmRKdas/TsZs04TBtRI/AAAAAAAAAhs/kj7GNQIapM8/s1600/or14.jpg", "The girl left a note..."],
  319. ["http://3.bp.blogspot.com/-YbLLOjvN0Lg/TsZs4VTYjgI/AAAAAAAAAiE/gbUdVQyV0Ec/s1600/or30.jpg", "...saying she had left home"],
  320. ["http://3.bp.blogspot.com/-Ka-u1hJlOpE/TsZsrSafEBI/AAAAAAAAAgk/cfFu_Fid3g8/s1600/or1.jpg", "''So what's with the panic?''"],
  321. ["http://3.bp.blogspot.com/-SEIzxwfPWVw/TsZssqxoutI/AAAAAAAAAgs/tziGHdLzp6s/s1600/or2.jpg", "Tears for fears"],
  322. ["http://3.bp.blogspot.com/-JqNZoQKaQ5c/TsZszh3SxaI/AAAAAAAAAhk/N11udsn_NfQ/s1600/or12.jpg", "A light in the dark"],
  323. ["http://4.bp.blogspot.com/-OH0tKx8x_RA/TsZs7z_yi7I/AAAAAAAAAic/6Ae32x6WTUw/s1600/or44.jpg", "Flashes of pain and hope"],
  324. ["http://1.bp.blogspot.com/-_rQ8IYfGUZ8/TsZs7EvclqI/AAAAAAAAAiU/BLVHF1h9xjs/s1600/or39.jpg", "If only we could capture..."],
  325. ["http://1.bp.blogspot.com/-YOhycBiXcJY/TsZs5lma06I/AAAAAAAAAiM/SxTyLMZngI0/s1600/or33.jpg", "...the beauty of autumn"]
  326. ]);
  327. }
  328. </script>
  329.  
  330. </head>
  331.  
  332. <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
  333.  
  334. <div id="screen"></div>
  335. <img id="loading" alt="" src="http://4.bp.blogspot.com/-Ntad7D1UnGo/TsZsy9QRFoI/AAAAAAAAAhc/aDQbXspCWMg/s1600/or11.jpg" style="visibility: hidden">
  336. <object data="http://flash-mp3-player.net/medias/player_mp3.swf" width="0" height="0" type="application/x-shockwave-flash">
  337. <param value="#ffffff" name="bgcolor" /><br />
  338. <param value="mp3=http://dc338.4shared.com/img/961885111/9c7d4606/dlink__2Fdownload_2F9M3w_5FzGr_3Ftsid_3D20111117-160410-726101ae/preview.mp3&amp;loop=1&amp;autoplay=1&amp;volume=125" name="FlashVars" />
  339. </object>
  340. </body>
  341. </html>
  342.  
  343.  
  344. Referensi : http://om-dayz.blogspot.com/2011/11/javascript-photoshowroom-ii.html#ixzz1eTVuXyP6
  345. Jadilah Blogger Yang Beretika^^
  346.  
  347. <!-- Hosting24 Analytics Code -->
  348. <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
  349. <!-- End Of Analytics Code -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!