Simple Javascript gallery with json.

By : anovsiradj (Mayendra Costanov). March 2015

by Anov Siradj

HTML

<table id="imgGallery">
    <tr><td></td><td id="loadInfo"></td><td></td></tr>
    <tr>
        <td><button type="button" class="imgNavogation" onclick="prevImg();">&laquo;</button></td>
        <td id="imgWrap"><img id="imgDisplay"/></td>
        <td><button type="button" class="imgNavogation" onclick="nextImg();">&raquo;</button></td>
    </tr>
    <tr><td></td><td id="imgDesc"></td><td></td></tr>
    <tr><td></td><td id="authorSign"><span>xjGallery v1.0</span><span><!-- Maret 23, 2015 -->Buatan Anov Siradj</span></td><td></td></tr>
</table>

CSS

* {
    margin:0px;
    font-family: Georgia, "Times New Roman", Times, serif;
}
body {margin-top:20px;}
#imgGallery {
    width:90%;
    margin-left:auto;
    margin-right:auto;
}
#imgGallery td {
    vertical-align:top;
}
#imgWrap {
    width:90%;
    box-sizing:border-box;
}
#preImgInfo {
    font-size:18px;
    padding:5px 0px;
}
img {
    vertical-align:middle;
}
#imgDisplay {
    width:100%;
    border: 5px solid #555;
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#imgDesc {
    padding-bottom:15px;
}
.imgNavogation {
    background-color:#eee;
    border-color:#ccc;
    display:block;
    margin:0px auto;
}
#authorSign {
    color:#999;
    font-size:12px;
    padding-top:10px;
    border-top:1px solid #eee;
}
#authorSign span:first-child {
    float:left;
}
#authorSign span:last-child {
    float:right;
}

JavaScript

var imgData = [
    {"url":"https://2c60dbe156393c09fe76a73346f84835cc85591c.googledrive.com/host/0B5QQvAjRq64hek9fUXFaeU9uTE0/rethink-ta.png","desc":"ahh","ttl":"Tugas Akhir !"},
{"url":"https://www.google.com/images/srpr/logo11w.png"},
 {"url":"https://3061dec2f14253db4f6ee2e0849ac315c5de5749.googledrive.com/host/0B5QQvAjRq64hUjQ1TnUxQnR1TWc/LogoKu_v1_versi_pertama.png"}
];
var loadInfoLoader = "<img src=\"https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/throbber.gif\"/> Sedang memuat gambar...";
var loadInfo = document.getElementById("loadInfo");
var imgWrap = document.getElementById("imgWrap");
var imgDisplay = document.getElementById("imgDisplay");
var imgDesc = document.getElementById("imgDesc");
var imgIndex = getRandomInt(0,imgData.length-1);
var hasClick = 0;
var hasClick_msg = "Sabar itu baik...,";

function nextImg() {
    if(hasClick === 1) { console.log(hasClick_msg);return; }
    imgIndex = imgIndex+1;
    if(imgIndex > imgData.length-1) {
        imgIndex = 0;
    }
    setImg();
}
function prevImg() {
    if(hasClick === 1) { console.log(hasClick_msg);return; }
    imgIndex = imgIndex-1;
    if(imgIndex < 0) {
        imgIndex = imgData.length-1;
    }
    setImg();
}

function setImg() {
    hasClick = 1;
    loadInfo.innerHTML = loadInfoLoader;
    loadImg(imgIndex);
}
function loadImg(e) {
    var oneImg = new Image();
    oneImg.src = imgData[e].url;
    var _desc = imgData[e].desc;
    var _ttl = imgData[e].ttl;
    oneImg.onload = function(event) {
        imgDisplay.style['opacity'] = 0;
        imgDisplay.addEventListener(
            "transitionend",
            function(event) {
                this.style['opacity'] = 1;
                imgDisplay.src = oneImg.src;
            },
            false
        );
        imgDisplay.addEventListener(
            "transitionend",
            function(event) {
                this.style['opacity'] = 1;
                if(typeof _desc !== "undefined") {
                   ...