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/AVvXsEiOK0IvRlwEMO1uK6aMune_Sc12lre0QSWU3MGZr1_z8LNg5Aw7U2il5EDUaa-2AnjPYlR07Og3vQjbYCuUH_iOWbNtnsUT8QHZqqQzVjvsz7QrLFvu0sfVvKD4jIHoY0_gz1VJ9ha8gq0/s1600/or8.jpg", "His little voodoo was a success"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DSDyFFRLJ2TAsnMSotXgebLKhaEUswn7HA27uHN3f_e-bdfsf3IfSPdjyVR0WGl7dF77oSxbWUvBPelfGmQDZ0UBDATvCWlykQnGvQEiFj_yl9rZPP-AVvL6o89trJvRVs1U7wLjN8E/s1600/or46.jpg", "She arrived from nowhere"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0SEhP7_M139wyhVJM_ePUhYIkXHX7S-OwLQPSWQEuVMbuE-ZB6XWJwEBwErwwc_DzoErQTDx_vD7A1z6kmto9aU2l07IjahoS7CzEw_dsyw9RWnQhtHpjv82hjp6kWzz1TuSOeZjixDg/s1600/or10.jpg", "as cute as she could be"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Yd3Dgn5QnHmiNo-rVe2kjg0gdrGwOo37HZaLXz9MMcRui-YTdawdmW06Iyv15tOYDVDHoVc05yiUIj_exLsmkOMM1AUiTYqSLRtqedAdrEzAlx_RshmbZU5R5DlZFE3-cwVLX7T09wU/s1600/or4.jpg", "It was a night of full moon"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJN5RBT88CrLzmysgeR40GIJXVCAhrICJmO658aRzq0b1n6D63iCYfhJfgANrTrfcfmwEf8U15s-Zr7jWtXJMJUWMVopNVAnRgCzJdskNSW9RgRciHMxU-xvVBeiHU_cxcWVGObE9_4sI/s1600/or16.jpg", "It didn't take him anytime to fall in love"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ryHWqjzs8iVBtUkGRd13pjaX95S2IgKsIKVyjfz-sWP8Wr0Xv1NHJLMzAPPoIefdOvfWf6JKhfThl-bLF40F890UyUFe52YW_y_qiwXiSuT731GRgdqO_CGZlraPOdHuxppsFhbqvZc/s1600/or9.jpg", "He had been certain of his success"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEMjqBcC7tedS4LTwlZy710lJmX8GY3aUcObJISdbuoEfVWkPhQaqokOVa-mvoytupqOxrrQmyqTB9aI4yBrYByLwTjK3W-Bi2Cnatm98eVPjucWABOZ2gloL4VXsFMxRnU222GlHBHGI/s1600/or6.jpg", "In a few days after"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyWRnDpnSn7nw5IhvoBGPy4YdoE_5z1KC7eBgPjRKuRNJ_cTozTspVyPZuEE8fnckvxG50NUVY4S-oslkd1JbUySc9f6IgaV79vtI2MaYHoMzvcGWGfPFzbkfvqiQH8nKNqJA9LQQ6NEE/s1600/or27.jpg", "All the tools were in place"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikrigXR15YrHdSSfLuSeZdy0eleeBmXlPPrk_4W_Ofuyyy-l3o9CEIxkNVDqmQNa3EQU4P0E14YtDuYPK-UXOeqHfSlM5Xp_qypIjUDBQYiWcIbcDiuUOGH8KLRRJWdJGr-2PIQD046Do/s1600/or14.jpg", "The girl left a note..."],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8qh8WHkVfD6uYKCuqrbOsl1bMe2woxVANnOXQfBQrZUL8nUiPsH_MQ9V2sRvMtkoZ3DXtW8ZEHGVFS2cW4xwPNMhUHF53SkZLo2R9jTNYbkgq27oH3BSVazGOOqwTzKf_VgSqTUEFNA/s1600/or30.jpg", "...saying she had left home"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71j85sYHOePZ8fzN9EGevhMR9Kn7Bfe-AdpZsf9zUaksIdZDqtVZlcim106hwcwqtJ9PijI2mXBFHBuyE0F5QfgJ8Umm9PsjDx9UxVD4ctiZ5A8TeJyr-ozMEP81L0dvyvkx8ocoli3g/s1600/or1.jpg", "''So what's with the panic?''"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEmYd0E88w_gMwsuqZEKdl7CU_s3bFqSkcJ1v-Ovf39XCR1xjNELz60bNu_5xac9xgOGVMaZEo-cPTm5tk7vCbxjCC6zs9MsgEbELWJ7AksZzkYL8tnVM5uCqfXIbJP8uKzzFuypTKm8/s1600/or2.jpg", "Tears for fears"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwz2VdY6xxQ323XBwypAg9fa5V9kA5UBU0jCUvt7s4NCwXSSntSDY-1i8E8zdXlgm3jFu-FAg6NqmGqOhH9tyZPMbWsQQec2QlerfTpDmlak7wqoGkkq765PiZ_ua3Xgz5evwgr1xGJE/s1600/or12.jpg", "A light in the dark"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7C7B97S1oV-STsjjK77Luie8nLQ02m1YBi8BQyJvPq8LZjuI_Ke4bShsKPy2OZ-0-_Z7XuwctZb7_M-3qpBcZ8wSBbah08gAoincoCD8P_hqD9x8SuSSjQvLKvhQQolZW8NJ7exM6WKY/s1600/or44.jpg", "Flashes of pain and hope"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQUM3NnMObW5eci6wIp1WPLknFCCxkJVZdLrwPM0eXybS3Mz56rFBY3TUu8C8l9AXuxsQ1napji7ti4w2pcYmewK3cVLUGIDopaRzGlDMeaVAn0rmWROnjGMFFVsEG1SLkY2Qq-Hay7M0/s1600/or39.jpg", "If only we could capture..."],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF0wTonl8aCkcciumsDP2AHu0mK8xzbXQ11Gn_e16w7WESG-vUIDA-EOWXmHDHGvq91FajEdLQl33nXF7_fBnByG3Qhq7tU9PBEWfYCcHQp3DQmQhqGgZU1ZAuTyIxM8zxVliHpt8BRF8/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/AVvXsEiDf0cFgib7eR7umzxfBTT3RGNAX4AZv6LBGy0MXZ97hM79uVFW1Yna6tzKy4Og0m7X_7hmq_egE9tZGgQGB5scLBl4gBuUD9Vg6jmUNf7ruM4rGjLtKUWb_DsUBBlSBQ-faoU2y0vT7ZQ/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">
<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>
Sampai disini dulu artikel ini sobat blogger, jika mengalami kesulitan silahkan berkomentar dibawah :)Happy Blogging :)
Terima Kasih telah membaca artikel JavaScript Photo Showroom II dengan permalink http://om-dayz.blogspot.com/2011/11/javascript-photoshowroom-ii.html yang Diposting oleh Impotensia pada 23.14. Deskripsi artikel ini adalah: JavaScript Photo Showroom II, Tutorial Blogspot Terbaru, JavaScript Photo Showroom II, dan Ratingnya sebesar 5. Semoga Artikel JavaScript Photo Showroom II bermanfaat bagi Visitor Blog ini.
PERTAMAX ahhh =))
BalasHapusanjritttt keren bgt om,, =)) =)) bikin ahhh,, =))
BalasHapusGagal Petmax beli solar aja w om =))
BalasHapusKeyend Oy
wah, bagus nih bro.
BalasHapustapi saya masih belum tahu bagaimana cara pasang dan penggunaannya. :D
MntapOm...
BalasHapusLngsungKeTKP
Goooooooo.... :D
berkunjung sob..sukses selalu yah
BalasHapussalam kenal :)
keren banget nih....
BalasHapusperlu dicoba nih .... :) mantaav oom..
waw keren om!!!!
BalasHapusHEmmmm.... :-*
BalasHapusBoleh juga,tp dikit bikin berat blogku kalau di pasang :D
(^-^) Piece :D
wooooowww keren bangettt :)) scriptnya banyak banget yah o.O
BalasHapusmantap oh Script Template nih ? kapan" nyobah ah :D
BalasHapuswah keren banget sob, mantap deh om-dayz.
BalasHapusow pantes dipasang lagu toh, idm ane langsung otomatis download.
Mampuir lagi :D Cos mante triknya :D
BalasHapusehhh tapi previewnya gak bisa dahh
BalasHapusmampir lagi .. gag bosan2 nih lihat showroomnya :D
BalasHapuskok ane klik P R E V I E W-nya gag bisa diliat sob??
BalasHapusLihat lagi ah... :D
BalasHapusSoalnya pikir2 dulu lau mau di terapin :D kayaknya ikin berat blog :D
kunjungan kesin i lagi ah nunggu postingan barunya :)
BalasHapusLink demo nya error gan,
BalasHapusmohon di perbaikin biar bisa diliat demo nya :)
mampir ke sini OM , nunggu semp*K terbarunya
BalasHapusmampir om .. sama mbah :D
BalasHapusOrang luar sana banyak yang kreatif yah !
BalasHapusmampir disini jugaa aaah ... :D
BalasHapussi Om mane nih ? ane mampir ke rumah ga ada orangnya
BalasHapushappy blog walking gan :)
BalasHapusMohon maaf gan :)
BalasHapuslink sudah saya update
silahkan dilihat previewnya :)
btw , terima kasih atas kunjungannya ya sobat :)
kunjungan awal salam kenal gan...
BalasHapusom,, gimaa nehh bikinnya,, kok aku udah bikin postingan tapi gak bisa,, :3 cuma muncul background gelap aja,, :3 postingan di blogspot kyk biasa kan..?
BalasHapusWah keren ya..
BalasHapusMakasih kk scriptnya :D
CeMunGudH kK ^ ^
waw keren gan..
BalasHapusmakasih banyak ni infonya gan :)
sukses selalu ya..
kren,.. makasi banyak but infonya,..!! sukses slalu
BalasHapusgan ane cobain lagi gak bisa sob, gak bekerja
BalasHapusMantap :D
BalasHapusSalam Kenal OM
BalasHapus[Blog Walker]
Kok Gk Bisa Yah ?
Om Day Bisa Buatin Xmlnya ?
keren gan! lanjutkan!!!!
BalasHapus:W klau di msukin semua script di atas pasti ga bisa..!!
BalasHapusharus di pisah"
thx to infonya,.
BalasHapusmengenai Javascript Photo Showroom
BalasHapus