JavaScript Photo Showroom II

Javascript Photo Showroom Om Dayz

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, "", [
        ["http://1.bp.blogspot.com/-nbfeaBtnMBU/TsZsvX2DW5I/AAAAAAAAAhE/exf0zEEolsU/s1600/or8.jpg", "His little voodoo was a success"],
        ["http://1.bp.blogspot.com/-UkSmyhMdTJM/TsZsqG70FUI/AAAAAAAAAgc/pJSKeD-cE88/s1600/or46.jpg", "She arrived from nowhere"],
        ["http://4.bp.blogspot.com/-e6WvJb0qIek/TsZsx2JEuXI/AAAAAAAAAhU/WfErCaVqerA/s1600/or10.jpg", "as cute as she could be"],
        ["http://1.bp.blogspot.com/-ns-Hsewomx0/TsZstdbYlqI/AAAAAAAAAg0/vCNuzppNx68/s1600/or4.jpg", "It was a night of full moon"],
        ["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"],
        ["http://4.bp.blogspot.com/-bjmswfQArAY/TsZswygsgBI/AAAAAAAAAhM/J-3WvCS6YRA/s1600/or9.jpg", "He had been certain of his success"],
        ["http://1.bp.blogspot.com/-3FW2sVbi1RQ/TsZsummpyAI/AAAAAAAAAg8/UM8diJiqKf8/s1600/or6.jpg", "In a few days after"],
        ["http://4.bp.blogspot.com/-0dxWIiKN69E/TsZs3J8q3vI/AAAAAAAAAh8/5gvOF8XnmSc/s1600/or27.jpg", "All the tools were in place"],
        ["http://4.bp.blogspot.com/--7JkfmRKdas/TsZs04TBtRI/AAAAAAAAAhs/kj7GNQIapM8/s1600/or14.jpg", "The girl left a note..."],
        ["http://3.bp.blogspot.com/-YbLLOjvN0Lg/TsZs4VTYjgI/AAAAAAAAAiE/gbUdVQyV0Ec/s1600/or30.jpg", "...saying she had left home"],
        ["http://3.bp.blogspot.com/-Ka-u1hJlOpE/TsZsrSafEBI/AAAAAAAAAgk/cfFu_Fid3g8/s1600/or1.jpg", "''So what's with the panic?''"],
        ["http://3.bp.blogspot.com/-SEIzxwfPWVw/TsZssqxoutI/AAAAAAAAAgs/tziGHdLzp6s/s1600/or2.jpg", "Tears for fears"],
        ["http://3.bp.blogspot.com/-JqNZoQKaQ5c/TsZszh3SxaI/AAAAAAAAAhk/N11udsn_NfQ/s1600/or12.jpg", "A light in the dark"],
        ["http://4.bp.blogspot.com/-OH0tKx8x_RA/TsZs7z_yi7I/AAAAAAAAAic/6Ae32x6WTUw/s1600/or44.jpg", "Flashes of pain and hope"],
        ["http://1.bp.blogspot.com/-_rQ8IYfGUZ8/TsZs7EvclqI/AAAAAAAAAiU/BLVHF1h9xjs/s1600/or39.jpg", "If only we could capture..."],
        ["http://1.bp.blogspot.com/-YOhycBiXcJY/TsZs5lma06I/AAAAAAAAAiM/SxTyLMZngI0/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="http://4.bp.blogspot.com/-Ntad7D1UnGo/TsZsy9QRFoI/AAAAAAAAAhc/aDQbXspCWMg/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&amp;loop=1&amp;autoplay=1&amp;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&amp;loop=1&amp;autoplay=1&amp;volume=125" name="FlashVars" />
</object>
Sampai disini dulu artikel ini sobat blogger, jika mengalami kesulitan silahkan berkomentar dibawah :)
Happy Blogging :)
Bagikan ke Teman ›
om-dayz lintasme
om-dayz facebook share
om-dayz Tweet Button
om-dayz digg Submitter

41 komentar Untuk JavaScript Photo Showroom II

  1. anjritttt keren bgt om,, =)) =)) bikin ahhh,, =))

    BalasHapus
  2. Gagal Petmax beli solar aja w om =))

    Keyend Oy

    BalasHapus
  3. wah, bagus nih bro.
    tapi saya masih belum tahu bagaimana cara pasang dan penggunaannya. :D

    BalasHapus
  4. MntapOm...
    LngsungKeTKP
    Goooooooo.... :D

    BalasHapus
  5. berkunjung sob..sukses selalu yah
    salam kenal :)

    BalasHapus
  6. HEmmmm.... :-*
    Boleh juga,tp dikit bikin berat blogku kalau di pasang :D

    (^-^) Piece :D

    BalasHapus
  7. hehe.... kapan sy ikutin kontes seo eagh...

    BalasHapus
  8. hemmm.... bikinnberat gak newh sob kbanyakan scrip

    BalasHapus
  9. wooooowww keren bangettt :)) scriptnya banyak banget yah o.O

    BalasHapus
  10. mantap oh Script Template nih ? kapan" nyobah ah :D

    BalasHapus
  11. wah keren banget sob, mantap deh om-dayz.
    ow pantes dipasang lagu toh, idm ane langsung otomatis download.

    BalasHapus
  12. ehhh tapi previewnya gak bisa dahh

    BalasHapus
  13. mampir lagi .. gag bosan2 nih lihat showroomnya :D

    BalasHapus
  14. kok ane klik P R E V I E W-nya gag bisa diliat sob??

    BalasHapus
  15. Lihat lagi ah... :D
    Soalnya pikir2 dulu lau mau di terapin :D kayaknya ikin berat blog :D

    BalasHapus
  16. kunjungan kesin i lagi ah nunggu postingan barunya :)

    BalasHapus
  17. Link demo nya error gan,
    mohon di perbaikin biar bisa diliat demo nya :)

    BalasHapus
  18. mampir ke sini OM , nunggu semp*K terbarunya

    BalasHapus
  19. Orang luar sana banyak yang kreatif yah !

    BalasHapus
  20. si Om mane nih ? ane mampir ke rumah ga ada orangnya

    BalasHapus
  21. nice post gan...
    sering sering mampir di blog ane and follow balik yah.
    http://anakgilaonline.blogspot.com/

    BalasHapus
  22. Mohon maaf gan :)
    link sudah saya update
    silahkan dilihat previewnya :)

    btw , terima kasih atas kunjungannya ya sobat :)

    BalasHapus
  23. om,, gimaa nehh bikinnya,, kok aku udah bikin postingan tapi gak bisa,, :3 cuma muncul background gelap aja,, :3 postingan di blogspot kyk biasa kan..?

    BalasHapus
  24. Wah keren ya..
    Makasih kk scriptnya :D
    CeMunGudH kK ^ ^

    BalasHapus
  25. waw keren gan..
    makasih banyak ni infonya gan :)

    sukses selalu ya..

    BalasHapus
  26. kren,.. makasi banyak but infonya,..!! sukses slalu

    BalasHapus
  27. gan ane cobain lagi gak bisa sob, gak bekerja

    BalasHapus
  28. Salam Kenal OM
    [Blog Walker]

    Kok Gk Bisa Yah ?
    Om Day Bisa Buatin Xmlnya ?

    BalasHapus
  29. :W klau di msukin semua script di atas pasti ga bisa..!!
    harus di pisah"

    BalasHapus
  30. mengenai Javascript Photo Showroom

    BalasHapus

Follow Me On Twitter Facebook Fanspage Circle Me On Google Plus Subscribe to RSS Feed