Setelah postingan pertama saya mengenai Javascript Photo Showroom pertama disini saya akan memberikan script PhotoShowroom keren part II buatan Gerrard Fernandez, Script ini dapat memuat 16 foto sekaligus dalam 1 HTML yang saya padukan dengan Script Anti Klik Kanan + Ctrl U + Ctrl C - No Ribet dan menambahkan embed lagu, sehingga seakan-akan Javascript ini nampak seperti Flash. Silahkan Lihat Preview-nya..
Berikut adalah source code dari HTML preview diatas :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PHOTOSHOWROOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="Dayz Hidayat">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
top: 1%;
left: 1%;
width: 98%;
height: 98%;
background: #000;
color: #fff;
}
#screen div {
position: absolute;
overflow: hidden;
cursor: pointer;
}
#screen img {
position: absolute;
width: 100%;
height: 100%;
}
#screen .label {
position: absolute;
color: #FFF;
background: #000;
font-family: arial;
white-space: no-wrap;
}
</style>
<!-- utilities -->
<script type="text/javascript" src="http://lorddayz.googlecode.com/files/minilib.js"></script>
<script type="text/javascript">
// ========================================================
// ====== Javascript Slideshow ======
// script written by Gerard Ferrandez - December 31, 2006
// ========================================================
var diap = {
/////////////////////////////////
BR : 3, // border size in px
ZR : .75, // zoom ratio
SP : .08, // speed
/////////////////////////////////
V : false,
S : false,
G : true,
resize : function () {
/* ==== window resize event ==== */
diap.nw = diap.scr.offsetWidth;
diap.nh = diap.scr.offsetHeight;
diap.nwu = (diap.nw * diap.ZR);
diap.nhu = (diap.nh * diap.ZR);
diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;
diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;
diap.rc = 255 / ((diap.nw / diap.NX) - diap.nwt);
if (diap.N) {
diap.setPosition();
if (!diap.G) diap.delLabels();
}
},
setPosition : function () {
/* ==== calculate image target position ==== */
var k = 0;
var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;
for (var j = 0; j < this.NY; j++) {
var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;
for (var i = 0; i < this.NX; i++) {
var o = this.spa[k++];
o.y1 = y;
o.x1 = x;
o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;
o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;
x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);
}
y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);
}
},
delLabels : function () {
/* ==== remove texts ==== */
for ( var i = 0; i < diap.N; i++) {
var o = diap.spa[i];
if (o.T) diap.scr.removeChild(o.T);
o.T = false;
}
},
run : function () {
/* ==== main loop ==== */
for ( var i = 0; i < diap.N; i++) diap.spa[i].move();
setTimeout(diap.run, 16);
},
init : function (container, NX, NY, path, images) {
/* ==== initialize script ==== */
this.scr = id(container);
if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }
this.NX = NX;
this.NY = NY;
this.spa = {};
this.resize();
var k = 0;
for (var y = 0; y < this.NY; y++) {
for (var x = 0; x < this.NX; x++) {
/* ==== create HTML elements ==== */
var s = this.spa[k] = document.createElement('div');
s.img = document.createElement('img');
/* ==== opacity optimized function ==== */
s.img.setOpacity = function (alpha) {
if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100;
if (alpha == 100) {
/* ==== speed opt - remove IE filter ==== */
this.style.visibility = 'visible';
this.style.filter = '';
this.style.opacity = 1;
return 100;
} else if (alpha == 0) {
/* ==== hide image, remove opacity ==== */
this.style.visibility = 'hidden';
this.style.filter = '';
this.style.opacity = 0;
return 0;
}
if (this.filters) {
/* ==== IE filter ==== */
if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';
else this.filters.alpha.opacity = alpha;
/* ==== CSS opacity ==== */
} else this.style.opacity = alpha * .01;
return alpha;
}
s.img.src = id('loading').src;
s.appendChild(s.img);
this.scr.appendChild(s);
/* ==== pre-load image ==== */
s.pre = new Image();
s.pre.obj = s;
s.pre.onload = function() { this.obj.img.src = this.src; }
s.pre.src = path + images[k][0];
/* ==== set image variables ==== */
s.x = x;
s.y = y;
s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;
s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;
s.x1 = x * (this.nw / this.NX);
s.y1 = y * (this.nh / this.NY);
s.w0 = 0;
s.h0 = 0;
s.w1 = 0;
s.h1 = 0;
s.V = 0;
s.t = images[k][1];
s.T = false;
/* ==== function move image ==== */
s.move = function() {
/* ==== position images ==== */
this.style.left = px(this.x0 += (this.x1 - this.x0) * diap.SP);
this.style.top = px(this.y0 += (this.y1 - this.y0) * diap.SP);
this.style.width = px(this.w0 += (this.w1 - this.w0) * diap.SP);
this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP);
if (this != diap.S) {
/* ==== set image background color ==== */
if (Math.abs(this.w1 - this.w0) > 1) {
var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt));
this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')');
}
if (this == diap.V) {
/* ==== on mouseover: fade in ==== */
if (this.V < 100) this.img.setOpacity(this.V += 5);
} else {
/* ==== fade out ==== */
if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2);
}
}
/* ==== text effect ==== */
if (this.T) this.dispLabel();
}
/* ==== display text function (typewriter FX) ==== */
s.dispLabel = function() {
if (diap.G || diap.S == this) {
/* ==== zoomed image ==== */
this.T.style.left = px(this.x0);
this.T.style.top = px(this.y0);
this.T.style.width = px(this.w0);
} else {
/* ==== calculate text position ==== */
var xt = diap.S.x0 + this.w0 + diap.BR;
if (this.y == diap.Y) {
this.T.style.top = px(this.y0 - this.f - diap.BR);
if (this.y == 0) var xt = diap.S.x0;
} else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0));
if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5);
else this.T.style.left = px(xt);
if (this != diap.V) {
/* ==== text type out ==== */
this.Tp--;
this.T.innerHTML = this.t.substring(0, this.Tp);
if (this.Tp < 1) {
diap.scr.removeChild(this.T);
this.T = false;
}
} else {
if (this.Tp < this.t.length) {
/* ==== text type in ==== */
this.Tp++;
this.T.innerHTML = this.t.substring(0, this.Tp);
}
}
}
}
/* ==== create text function ==== */
s.createLabel = function () {
this.T = document.createElement('div');
this.T.className = 'label';
if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right';
this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));
if(this == diap.S) {
this.f *= 2;
this.T.style.background = 'none';
this.T.style.textAlign = 'center';
}
this.T.style.fontSize = ''.concat(this.f, 'px');
this.T.innerHTML = this.t;
this.T.style.left = px(-1000);
this.T.style.width = px(diap.nwu * .5);
this.T.style.height = px(this.f + 3);
this.Tp = 0;
diap.scr.appendChild(this.T);
}
/* ==== on mouse over event ==== */
s.onmouseover = function() {
if (diap.S != this && diap.G != this) {
/* ==== display image ==== */
this.img.setOpacity(100);
this.V = this.img.setOpacity(20);
}
/* ==== create text ==== */
if (!this.T) this.createLabel();
diap.V = this;
}
/* ==== on click event ==== */
s.onclick = function() {
/* ==== memorize selected image ==== */
diap.X = this.x;
diap.Y = this.y;
diap.V = false;
diap.G = false;
this.V = this.img.setOpacity(100);
diap.delLabels();
if (diap.S == this) {
/* ==== zoom out - grid mode on ==== */
diap.S = false;
diap.G = this;
for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel();
} else {
/* ==== zoom in ==== */
diap.S = this;
this.createLabel();
}
diap.setPosition();
}
s.createLabel();
s.ondblclick = s.onclick;
s.ondrag = function () { return false; }
k++;
}
}
this.N = NX * NY;
/* ==== add resize event ==== */
this.resize();
addEvent(window, 'resize', diap.resize);
/* ==== start main loop ==== */
this.run();
}
}
/* ==== create diaporama ==== */
onload = function () {
/* ==== container, X, T, path, [image.src, text] ==== */
diap.init("screen", 4, 4, "", [
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM25bh5y7HleTl-XCLOpxsStqc0B1cJGhxCl9A8yb0LOT3qtS55I9sSjpFVYXODS1A0VT0DI0SrJEdjvFwc8N6PdwLZ6cSVZffoY5P9e7iEDLOGNKqH2xIf3s9AWHoX4lhXd1wLmOC0fI/s1600/or8.jpg", "His little voodoo was a success"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHflrlzGlfH5k0eKW5q10ZVKbjDeP3lDbHs7rpwR85uSAG1rYxK63XWg_D-0gx0NWBbagDe-0V_BqksZHszFwO1hu7D-5hW60tI5hEIu2Vgw0u1Vmp23V6tHSD0ouTMHRAiiq88lZwb40/s1600/or46.jpg", "She arrived from nowhere"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2APyDYgGuSvJppwYlpYiwCXAuxZYXPWJCNjXNxaIpNBJY4TVOt7aH7aiMREbXwQWS0Zja6sBWujfBZx4hPKwh6nsUgmub7oJcTct5-UlorNwhnMoeKCwIBEMs3HAHFqrcHdaXQDfE-Yw/s1600/or10.jpg", "as cute as she could be"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAaQNg7kXDUdETi0Rpxv2yJ8YwXLKUo2Mm-anNCFihQJAUNU-HAbK0lZKfGqzNoInVbjnI-DHhuHZEcqurBlme2VCLPI8Mjsg7XK10gV0k7vzCBs0lgMh_7qfzWzMvmRE5uU-_CCp0XwM/s1600/or4.jpg", "It was a night of full moon"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi539nvvzHfIYgkef1y2Qib8H7CX__7_DGpODk3jSxTmI5W6qJC7QLFEHInoVR1EkY3bt6rWNy_ua4dgss0uDYP6j4msalbKJwkOwLy9XnZAgAhGoR-YLg-exFrLzsXuT5ezexxC1-pW9Y/s1600/or16.jpg", "It didn't take him anytime to fall in love"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzgVdnl2rYk0jaYMpSz521dnSwJz0fmBVN5TSP5HKAJjZ3AMfjO7jrSFSxJGakeOfWNTuxNebWXmm6aIANuM7ueanE2ATRQ80Dl6XGrXJrZpzDFrFts87h_ZDWXsBy5gWYARu9389S-io/s1600/or9.jpg", "He had been certain of his success"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xPJyrTFkTIq_etxDgeaFCNQVLSOstppLEcto9lGMp_42R7qNZ0meYQbad1IVIP9XXQDqavb2vEmQTo2VGYlXKp0CQKify-4LLwOAhHD_P7dBqcq0g_O6Zi75PygXpOVhXqwJ0jW2ErQ/s1600/or6.jpg", "In a few days after"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUskqEC23B-K66sjh_TJZoTAbf5iy6IaqSMevwM-hL7HQzZvW84ErhIL6nl6JOVdibO6J77frHG9X3dGO4jJwJpxn_skZzm6sbThVgip9qe29g8kt_hjkGJ92GhI-gnsSGHTihqPOGBlc/s1600/or27.jpg", "All the tools were in place"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZI2na5iWvy0AjOYo5CyfD2PtT0neUP0RB1SZnBqW08SOMHb506pYVVwW7CYe_T8QXex2Azg46o7YBpG4GYYs2DZtv6o1dP8lg-2vxNk8gjq3JC5lwTTsh_XVAK8yrSkIs4ZI7Z-JvbI/s1600/or14.jpg", "The girl left a note..."],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62KxR7tWawG_ue759en83Ny1guvk4NzN7K6JaS2aiVAfeRArKsA-LuuPwB9MXBsjalkRQoFflGANcYY57wdQSjecZMk9M1Mk95nIicE0nNT-Ruu2uuUxoakQKg45oxnjkJjfHJNdbqCQ/s1600/or30.jpg", "...saying she had left home"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEhFa65z4CLlQHBTtVcX4V5Z0Q2KXZnW9jfmR9GqLGGAS-poMocXSWVTiNhElbGO78zcTr9zwxEZsYmYVecPKkFTdRQdRF0Jg53lsA3l5muvqiBlfHLFLBOu1DXL50Aw7JoL_3TFi7kLY/s1600/or1.jpg", "''So what's with the panic?''"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYO-TiG33AnVn5cNPKvdWQv-ikgvT-H_QpqVu4Ug7hRwtE6TKcimCl_3ycDuvpP8pj5Fhsc8_s8-xTV5PZ26lsPgINFUHKZSuqnpZmflPUc6sNc_DzdJp3ssh5O2s5lvX-E8HVPg5wrW8/s1600/or2.jpg", "Tears for fears"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxsbo1NPVywEgxRN4bHDv3CQju0BsMR0P5ElB35wYKeymxWcK-JTXRcjJR9pt6suTTOc233Q1KSABkgjW_FlIw5sEtMUrfl1aF_pYpsrwWDuzafjZQVpJ-IXJ06nRMxck0qG-kkTyhsBA/s1600/or12.jpg", "A light in the dark"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjls30tC1oFZ-ammeZsUmwXvok8QpuMzs1JqWIMJMdrAwcwL30vBn00CQljxURz3AnHbv0k8ETxpa_oN_E6BunPDFbJdFpBVMbT13TmYRQODBMK8Xj3LdxLC8j2N3I7AVA_5lttvVPRhJc/s1600/or44.jpg", "Flashes of pain and hope"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippSUilPab7wfYBxNT1mAQuIWZdM_NLm5Y_fYtQCo4eH3HFwDwrh9ydgwViFDcWZESp_eUUZ5Id_6cwstufVBUhj-x8xl7qpB-MGE-yOPWMn7YYkzbrPvhBdcFnfCDNRVm4DNOYEudIkE/s1600/or39.jpg", "If only we could capture..."],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj78wrYTsj5QBNZzmdcXGYIftHjik22j5XWBz5TZLZxs_o-ogM0I6pMqmGU7MtoQoUNN43tyd-OKpgqweQ8AgiGfaQ0DhG6ZnAnIINxkK2x6dSHMJSuyW7EFZe7tgiJYlJz_1R9EJVqIw/s1600/or33.jpg", "...the beauty of autumn"]
]);
}
</script>
</head>
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
<div id="screen"></div>
<img id="loading" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9_zu3VV-Gj0LwOb-hNDnDa_-_8BJsBfdiqgrA5kXE7q5oW6NSwLPw82BAmQPuUWLcKdQ7bJo_wCh3Dn-1SgRdlxyE9NkYyBe6BjKeUBSjzzz-E4RYn7yHYPgFB9ZkZsl_T9Eqmpn6lM/s1600/or11.jpg" style="visibility: hidden">
<object data="http://flash-mp3-player.net/medias/player_mp3.swf" width="0" height="0" type="application/x-shockwave-flash">
<param value="#ffffff" name="bgcolor" /><br />
<param value="mp3=http://dc338.4shared.com/img/961885111/9c7d4606/dlink__2Fdownload_2F9M3w_5FzGr_3Ftsid_3D20111117-160410-726101ae/preview.mp3&loop=1&autoplay=1&volume=125" name="FlashVars" />
</object>
</body>
</html>
Untuk mengganti lagu, silahkan ambil URL lagu anda pada situs penyedia hosting untuk lagu dengan bantuan 3rd party software, kemudian ganti tulisan yang saya beri warna merah dengan URL lagu yang anda inginkan :
<object data="http://flash-mp3-player.net/medias/player_mp3.swf" width="0" height="0" type="application/x-shockwave-flash">Sampai disini dulu artikel ini sobat blogger, jika mengalami kesulitan silahkan berkomentar dibawah :)
<param value="#ffffff" name="bgcolor" /><br />
<param value="mp3=http://dc338.4shared.com/img/961885111/9c7d4606/dlink__2Fdownload_2F9M3w_5FzGr_3Ftsid_3D20111117-160410-726101ae/preview.mp3&loop=1&autoplay=1&volume=125" name="FlashVars" />
</object>
Happy Blogging :)
