JavaScript Photo ShowRoom ~ Tutorial Blogspot Terbaru

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".

LIHAT PREVIEW

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

Terima Kasih telah membaca artikel JavaScript Photo ShowRoom dengan permalink http://om-dayz.blogspot.com/2011/08/javascript-photo-showroom.html yang Diposting oleh Impotensia pada 19.48. Deskripsi artikel ini adalah: JavaScript Photo ShowRoom, Tutorial Blogspot Terbaru, JavaScript Photo ShowRoom, dan Ratingnya sebesar 5. Semoga Artikel JavaScript Photo ShowRoom bermanfaat bagi Visitor Blog ini.

JavaScript Photo ShowRoom

Terkait dengan JavaScript Photo ShowRoom

10 komentar Untuk JavaScript Photo ShowRoom