JavaScript Photo ShowRoom

JavaScript Photo ShowRoom
Karya mengagumkan dari Gerrard Fernandez, setelah sebelumnya saya memberikan JavaScript "No-Click" disini saya akan memberikan javascript khusus untuk Photo Showroom, desain yang menarik dan mengagumkan ini bisa memuat hingga 8 Foto/gambar sekaligus , banyak yang request jadi ya aku post ajah deh :D
HTML Codenya sudah saya tambahkan dengan Script anti-klik kanan, ctrl+u, jadi kalian tinggal edit saja bagian fotonya di Notepad lalu simpan dalam extensi ".html".


Berikut adalah source codenya :
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title>HANDPAINTING UNIK DAN LUARBIASA</title>
<meta name="Author" content="Gerrard Fernando">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
    html {
        overflow: hidden;
    }
    body {
        background: #000;
        width:100%;
        height:100%;
        margin:0;
    }
    #screen {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    #img {
        visibility: hidden;
    }
    #screen img  {
        position:absolute;
        left:-10000px;
        z-index:100;
        -ms-interpolation-mode:nearest-neighbor;
        image-rendering: optimizeSpeed;
        cursor: pointer;
        border:#333 solid 1px;
    }
    #tit {
        text-align:center;
        position:absolute;
        color:#fff;
        font-family:verdana;
        font-weight:bold;
        font-size:48px;
        filter: alpha(opacity=30);
        opacity: 0.3;
        width:100%;
        bottom:12px;
        z-index:10000;
    }
</style>
<script type="text/javascript">
// =======================================================
// script: Gerard Ferrandez - Ge-1-doot - May 22, 2004
// Updated: February 2010 - namespaced
// =======================================================


var diapo = function () {
    var object = new Array(),
        K  = Math.PI / 180,
        N  = 0,
        xm = 0,
        ym = 0,
        mx = 0,
        my = 0,
        ax = 0,
        ay = 0,
        Nb = 0,
        tit = 0,
        img = 0;
////////////////////
    var zM = 4;
////////////////////
    var CObj = function (N, x, y, z){
        var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length];
        var o = document.createElement("img");
        o.onclick = function () {
            if (object[N].on == true) object[N].on = false;
            else object[N].on = true;
        }
        o.onmouseover = function () {
            if (Nb != N) {
                Nb = N;
                tit.innerHTML= I.alt;
            }
        }
        o.onmouseout = function () {
            Nb = -1;
            object[N].on = false;
        }
        o.onmousedown = new Function("return false");
        o.src = I.src;
        scr.appendChild(o);
        this.obj  = o.style;
        this.z    = Math.round(z * ny * .25);
        this.x    = Math.round(x * ny * .25);
        this.y    = Math.round(y * ny * .25);
        this.on   = false;
        this.zOOm = 1;
        this.N    = N;
    }

    CObj.prototype.anim = function () {
        var xP = this.z * Math.sin(mx * K) + this.x  * Math.cos(mx * K);
        var zP = this.z * Math.cos(mx * K) - this.x  * Math.sin(mx * K);
        var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K);
        zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K);
        var w = (zP * .25 + ny * .25) * this.zOOm;
        var h = w * .8;
        if (this.on && zP > 0) {
            if (this.zOOm < zM) this.zOOm += .05;
        } else {
            if (this.zOOm > 1) this.zOOm -= .025;
        }
        this.obj.left   = Math.round(xP + nx * .5 - w * .5) + "px";
        this.obj.top    = Math.round(yP + ny * .5 - h * .5) + "px";
        this.obj.width  = Math.round(w) + "px";
        this.obj.height = Math.round(h) + "px";
        this.obj.zIndex = Math.round(1000 + w);
    }

    var run = function () {
        dx = (1 * xm) - mx;
        dy = (1 * ym) - my;
        mx += dx / 60;
        my += dy / 60;
        var i = 0, o;
        while (o = object[i++]) o.anim();
        setTimeout(run, 16);
    }

    var resize = function () {
        nx = scr.offsetWidth;
        ny = scr.offsetHeight * .9;
    }

    var init = function () {
        scr = document.getElementById("screen");
        img = document.getElementById("img");
        tit = document.getElementById("tit");
        resize();
        scr.onselectstart = new Function("return false");
        onresize = resize;
        scr.onmousemove = function(e){
            if (window.event) e = window.event;
            xm = (e.x || e.clientX);
            ym = (e.y || e.clientY);
        }
        object.push( new CObj(0,1,-1,-1) );
        object.push( new CObj(1,1,1,-1) );
        object.push( new CObj(2,-1,-1,-1) );
        object.push( new CObj(3,-1,1,-1) );
        object.push( new CObj(4,1,-1,1) );
        object.push( new CObj(5,1,1,1) );
        object.push( new CObj(6,-1,-1,1) );
        object.push( new CObj(7,-1,1,1) );
        run();
    }
    ////////////////////////////////////////////////////////////
    return {
        init : init
    }
}();

onload = function (){
    diapo.init();
}

</script>
</head>

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

<div id="screen">
    <div id="img">
        <img alt="HAND PAINTING 1" src="../handpainting/1.jpg">
        <img alt="HAND PAINTING 2" src="../handpainting/2.jpg">
        <img alt="HAND PAINTING 3" src="../handpainting/3.jpg">
        <img alt="HAND PAINTING 4" src="../handpainting/4.jpg">
        <img alt="HAND PAINTING 5" src="../handpainting/5.jpg">
        <img alt="HAND PAINTING 6" src="../handpainting/6.jpg">
        <img alt="HAND PAINTING 7" src="../handpainting/7.jpg">
        <img alt="HAND PAINTING 8" src="../handpainting/8.jpg">
    </div>
    <div id="tit" ></div>
</div>

</body>
</html>
Warna Merah adalah deskripsi Gambar Kalian, dan yang Warna Hijau adalah URL gambar kalian.

Sekian dulu sobat blogger, tetap berkarya \m/

Referensi : http://www.minang-cyber.com/showthread.php?tid=2
Bagikan ke Teman ›
om-dayz lintasme
om-dayz facebook share
om-dayz Tweet Button
om-dayz digg Submitter

9 komentar Untuk JavaScript Photo ShowRoom

  1. boleh juga nih dicoba..
    makasih infonya... :)

    BalasHapus
  2. manteb ni,,, coba dulu ya sob..

    kalo kaga ngerti bisa nanya kan? :D

    BalasHapus
  3. haha,, ok bro ;)
    bertanya ajah :D

    BalasHapus
  4. om ada script laennya lagi gak :D

    BalasHapus
  5. @Anon
    ada koq masbro :D
    ntar aku share dah :)

    BalasHapus
  6. ada yang muuat lebih dari 10 gambar ga kk?

    BalasHapus
  7. Woow,,mkasih gan..keren benerr script nya..Izin nyedot yo..

    BalasHapus

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