google drive gallery with thumb

by anov siradj

by Anov Siradj

HTML

<div id="avz_thumb_place_tag">Tunggu...,</div>

<div id="avz_image_display_wrap">
    <input type="button" value="Close" onclick="hideImag();"/>
    <!--iframe id="avz_image_display_tag" src="javascript:;"></iframe-->
</div>

<!--
HOW-TO:
- open your gDrive contain your image(s).
- double click one image (to view this image).
- click "POP-OUT" before the close button. (will open new tab). this url something like "drive.google.com/file/d/{the_id}/view" "the_id" used as "gd_id" in json.
- view source the new tab.
- find meta tag with property "og:image". this content something like "lh4.googleusercontent.com/{the_id}=w1200-h630-p" you can delete "=w1200-h630-p",
-->

CSS

#avz_image_display_wrap {
    position:absolute;
    background-color;
    display:none;
    top:0px;bottom:0px;left:0px;right:0px;
    background-color:rgba(34,34,34,0.6);
}
#avz_image_display_tag {
    width:90%;
    height:90%;
    margin:5px auto;
    display:block;
    border:none;
    background-color:rgba(34,34,34,0.6);
}

JavaScript

var http = "https://";
var gd_url = "drive.google.com/file/d/";
var thumbSize = "=s200"; // can be 'w200-h200-p' etc
var placeThumb = document.getElementById("avz_thumb_place_tag");
var wrapImag = document.getElementById("avz_image_display_wrap");
var placeImag = document.getElementById("avz_image_display_tag");
var imagData = [
{
"guc_url":"lh5.googleusercontent.com/LvJEPF5Gf7qh0_DS7GJf6pZaH35_moyY2VIz38kZ6i9XjathVXs-Ng",
"gd_id":"0B5QQvAjRq64hOU0wejBDT1NJVW8"
},{
"guc_url":"lh4.googleusercontent.com/PbSsltz9ft4unbR78taODNmlkW6NdHTrgKtezlaztroXkawnthWuUQ",
"gd_id":"0B5QQvAjRq64hSjlnTjgxZnNRMTA"
}
];
window.onload = setThumb();
function setThumb() {
    placeThumb.innerHTML = "";
    for(var n = 0; n < imagData.length; n++) {
        placeThumb.innerHTML += thumbTpl(imagData[n],n);
    }
}
function thumbTpl(n,r) {
    var tpl = "<img src=\""+http+n.guc_url+thumbSize+"\" onclick=\"showImag(imagData["+r+"])\"/>";
    return tpl;
}
function showImag(n) {
    //wrapImag.innerHTML = "<iframe id=\"avz_image_display_tag\" src=""></iframe>
    //placeImag.src = http+gd_url+n.gd_id+"/preview";
    var ifr = document.createElement('iframe');
    ifr.id = 'avz_image_display_tag';
    ifr.src = http+gd_url+n.gd_id+"/preview";
    wrapImag.appendChild(ifr);
    wrapImag.style.display = "block";
}
function hideImag() {
    wrapImag.style.display = "none";
    document.getElementById("avz_image_display_tag").remove();
    //placeImag.src = "javascript:;";
}
Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
} //http://stackoverflow.com/questions/3387427/remove-element-by-id