Nozomi Thumbnail Gallery (html+css+js)

HTML
1
2
<body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
@import url(http://fonts.googleapis
    .com/css?family=Roboto+Condensed
    :700);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
JAVASCRIPT
1
!function(){function e(e,r){return[]
    .slice.call((r||document
    ).querySelectorAll(e))}if(window
    .addEventListener){var r=window
    .StyleFix={link:function(e){try{if
    ("stylesheet"!==e.rel||e
    .hasAttribute("data-noprefix"
    ))return}catch(t){return}var n,i=e
    .href||e.getAttribute("data-href"
    ),a=i.replace(/[^\/]+$/,""),o
    =(/^[a-z]{3,10}:/.exec(a)||[""]
    )[0],s=(/^[a-z]{3,10}:\/\/[^\/]
    +/.exec(a)||[""])[0],l=/^([^?]*)\
    ??/.exec(i)[1],u=e.parentNode,p
    =new XMLHttpRequest;p
    .onreadystatechange=function(){4
    ===p.readyState&&n()},n=function
    (){var t=p.responseText;if(t&&e
    .parentNode&&(!p.status||p.status
    <400||p.status>600)){if(t=r.fix(t
    ,!0,e),a){t=t.replace(/url\(\s
    *?((?:"|')?)(.+?)\1\s*?\)/gi
    ,function(e,r,t){return/^([a-z]{3
    ,10}:|#)/i.test(t)?e:/^\/\//.test
    (t)?'url("'+o+t+'")':/^\//.test(t
    )?'url("'+s+t+'")':/^\?/.test(t
    )?'url("'+l+t+'")':'url("'+a+t+'"
    )'});var n=a.replace(/([\\\^\$
    *+[\]?{}.=!:(|)])/g,"\\$1");t=t
    .replace(RegExp("\\b(behavior:\\s
    *?url\\('?\"?)"+n,"gi"),"$1")}var
    i=document.createElement("style"
    );i.textContent=t,i.media=e.media
    ,i.disabled=e.disabled,i
    .setAttribute("data-href",e
    .getAttribute("href")),u
    .insertBefore(i,e),u.removeChild(e
    ),i.media=e.media}};try{p.open
    ("GET",i),p.send(null)}catch(t
    ){"undefined"!=typeof
    XDomainRequest&&(p=new
    XDomainRequest,p.onerror=p
    .onprogress=function(){},p.onload
    =n,p.open("GET",i),p.send(null))}e
    .setAttribute("data-inprogress",""
    )},styleElement:function(e){if(!e
    .hasAttribute("data-noprefix"
    )){var t=e.disabled;e.textContent
    =r.fix(e.textContent,!0,e),e
    .disabled=t}},styleAttribute
    :function(e){var t=e.getAttribute
    ("style");t=r.fix(t,!1,e),e
    .setAttribute("style",t)},process
    :function(){e("style").forEach
    (StyleFix.styleElement),e
    ("[style]").forEach(StyleFix
    .styleAttribute)},register
    :function(e,t){(r.fixers=r
    .fixers||[]).splice(void 0===t?r
    .fixers.length:t,0,e)},fix
    :function(e,t,n){for(var i=0;i<r
    .fixers.length;i++)e=r.fixers[i](e
    ,t,n)||e;return e},camelCase
    :function(e){return e.replace
    (/-([a-z])/g,function(e,r){return
    r.toUpperCase()}).replace("-","")}
    ,deCamelCase:function(e){return e
    .replace(/[A-Z]/g,function(e
    ){return"-"+e.toLowerCase()})}}
    ;!function(){setTimeout(function
    (){},10),document.addEventListener
    ("DOMContentLoaded",StyleFix
    .process,!1)}()}}(),function(e
    ){function r(e,r,n,i,a){if(e=t[e]
    ,e.length){var o=RegExp(r+"("+e
    .join("|")+")"+n,"gi");a=a.replace
    (o,i)}return a}if(window
    .StyleFix&&window.getComputedStyle
    ){var t=window.PrefixFree
    ={prefixCSS:function(e,n){var i=t
    .prefix;if(t.functions.indexOf
    ("linear-gradient")>-1&&(e=e
    .replace(/(\s|:|,)(repeating
    -)?linear-gradient\(\s*(-?\d*\.?\d
    *)deg/gi,function(e,r,t,n){return
    r+(t||"")+"linear-gradient("+(90-n
    )+"deg"})),e=r("functions","(\\s|
    :|,)","\\s*\\(","$1"+i+"$2(",e),e
    =r("keywords","(\\s|:)","(\\s|
    ;|\\}|$)","$1"+i+"$2$3",e),e=r
    ("properties","(^|\\{|\\s|;)","\\s
    *:","$1"+i+"$2:",e),t.properties
    .length){var a=RegExp("\\b("+t
    .properties.join("|")+")(?!:)"
    ,"gi");e=r("valueProperties","\\b"
    ,":(.+?);",function(e){return e
    .replace(a,i+"$1")},e)}return n&&
    (e=r("selectors","","\\b",t
    .prefixSelector,e),e=r("atrules"
    ,"@","\\b","@"+i+"$1",e)),e=e
    .replace(RegExp("-"+i,"g"),"-"),e
    =e.replace(/-\*-(?=[a-z]+)/gi,t
    .prefix)},property:function(e
    ){return(t.properties.indexOf(e)?t
    .prefix:"")+e},value:function(e
    ){return e=r("functions","(^|\\s|
    ,)","\\s*\\(","$1"+t.prefix+"$2("
    ,e),e=r("keywords","(^|\\s)","
    (\\s|$)","$1"+t.prefix+"$2$3",e)}
    ,prefixSelector:function(e){return
    e.replace(/^:{1,2}/,function(e
    ){return e+t.prefix})}
    ,prefixProperty:function(e,r){var
    n=t.prefix+e;return r?StyleFix
    .camelCase(n):n}};!function(){var
    e={},r=[],n=getComputedStyle
    (document.documentElement,null),i
    =document.createElement("div"
    ).style,a=function(t){if("-"===t
    .charAt(0)){r.push(t);var n=t
    .split("-"),i=n[1];for(e[i]
    =++e[i]||1;n.length>3;){n.pop
    ();var a=n.join("-");o(a)&&-1===r
    .indexOf(a)&&r.push(a)}}},o
    =function(e){return StyleFix
    .camelCase(e)in i};if(n.length>0
    )for(var s=0;s<n.length;s++)a(n[s]
    );else for(var l in n)a(StyleFix
    .deCamelCase(l));var u={uses:0}
    ;for(var p in e){var f=e[p];u.uses
    <f&&(u={prefix:p,uses:f})}t.prefix
    ="-"+u.prefix+"-",t.Prefix
    =StyleFix.camelCase(t.prefix),t
    .properties=[];for(var s=0;s<r
    .length;s++){var l=r[s];if(0===l
    .indexOf(t.prefix)){var c=l.slice
    (t.prefix.length);o(c)||t
    .properties.push(c)}}"Ms"!=t
    .Prefix||"transform"in
    i||"MsTransform"in i||!
    ("msTransform"in i)||t.properties
    .push("transform","transform
    -origin"),t.properties.sort()}
    (),function(){function e(e,r
    ){return i[r]="",i[r]=e,!!i[r]}var
    r={"linear-gradient":{property
    :"backgroundImage",params:"red,
    teal"},calc:{property:"width"
    ,params:"1px + 5%"},element
    :{property:"backgroundImage"
    ,params:"#foo"},"cross-fade"
    :{property:"backgroundImage"
    ,params:"url(a.png), url(b.png),
    50%"}};r["repeating-linear
    -gradient"]=r["repeating-radial
    -gradient"]=r["radial-gradient"]
    =r["linear-gradient"];var n
    ={initial:"color","zoom-in"
    :"cursor","zoom-out":"cursor",box
    :"display",flexbox:"display"
    ,"inline-flexbox":"display",flex
    :"display","inline-flex":"display"
    ,grid:"display","inline-grid"
    :"display","min-content":"width"}
    ;t.functions=[],t.keywords=[];var
    i=document.createElement("div"
    ).style;for(var a in r){var o=r[a]
    ,s=o.property,l=a+"("+o.params+")"
    ;!e(l,s)&&e(t.prefix+l,s)&&t
    .functions.push(a)}for(var u in n
    ){var s=n[u];!e(u,s)&&e(t.prefix+u
    ,s)&&t.keywords.push(u)}}
    (),function(){function r(e){return
    a.textContent=e+"{}",!!a.sheet
    .cssRules.length}var n={":read
    -only":null,":read-write":null,"
    :any-link":null,"::selection"
    :null},i={keyframes:"name"
    ,viewport:null,document:'regexp("
    .")'};t.selectors=[],t.atrules=[]
    ;var a=e.appendChild(document
    .createElement("style"));for(var o
    in n){var s=o+(n[o]?"("+n[o]+")"
    :"");!r(s)&&r(t.prefixSelector(s
    ))&&t.selectors.push(o)}for(var l
    in i){var s=l+" "+(i[l]||"");!r
    ("@"+s)&&r("@"+t.prefix+s)&&t
    .atrules.push(l)}e.removeChild(a)}
    (),t.valueProperties=["transition"
    ,"transition-property"],e
    .className+=" "+t.prefix,StyleFix
    .register(t.prefixCSS)}}(document
    .documentElement);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Expand for more options Login