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