try: image gallery page layout(picasa album)

by cactus77kiki

HTML

<!--try:sidebar(my gallery page)-->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
<a href="index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="http://salu099.pixnet.net/blog" target="_blank">BLOG</a>
<a href="https://www.flickr.com/photos/kanichan/" target="_blank">FLICKR</a>
<a href="https://github.com/salu099" target="_blank">GITHUB</a>
<br />    
</div> 
<div id="main">
  <span id="openleftbar" onclick="openNav()">三</span>
</div> 

<ul id="populr_list" class="portfolio-area">
<li class="portfolio-item2" data-id="data1">
  <p ><span class="popnum">NEW</span></p><!--NEW！-->
  <div>  
    <span class="image-block">                        
      <a class="image-zoom" href="phdetail.html?albumid=201309001">
        <div class="nailthumb-container">                                    
          <img src="https://c5.staticflickr.com/8/7328/11562554924_68507e827c_k.jpg">
        </div>                                
      </a>
    </span>
  </div>
  <div class="home-portfolio-text">
    <!--<p class="popnum_box"><span class="popnum">NEW</span></p>-->
    <h2 class="post-title-portfolio">
      <a rel="bookmark" title="201309橫科山夜景">201309橫科山夜景</a>
    </h2>
    <p class="post-subtitle-portfolio">共 4 張照片</p>
  </div> 
</li>

<li class="portfolio-item2" data-id="data1">
  <p ><span class="popnum">NEW</span></p><!--NEW！-->
  <div>  
    <span class="image-block">                        
      <a class="image-zoom" href="phdetail.html?albumid=201309001">
        <div class="nailthumb-container">                                    
          <img src="https://c5.staticflickr.com/8/7328/11562554924_68507e827c_k.jpg">
        </div>                                
      </a>
    </span>
  </div>
  <div class="home-portfolio-text">
    <!--<p class="popnum_box"><span class="popnum">NEW</span></p>-->
    <h2 class="post-title-portfolio">
      <a rel="bookmark" title="201309橫科山夜景">201511高美濕地</a>
   ...

CSS

/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input,p,  blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
/*test-170111*/
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
div { position:relative } 
/* END RESET STYLES */
/*change type --s--*/
/*p{margin:5px; padding:5px; font-size:10px;}*/
/*change type --e--*/


html{-webkit-font-smoothing:antialiased;}
/*change type --s-- */
/*body{background:#f5f5f5 url("../images/bkg-pat.png") repeat scroll 0 0;font: 12px/1.5em Arial, Helvetica, sans-serif, "Arial Narrow";color:#a5a5a5;}*/
body{background:#f5f5f5  repeat scroll 0 0;font: 12px/1.8em Arial, Helvetica, sans-serif, "Microsoft JhengHei";color:#a5a5a5;}
/*a{color:#65a42d;text-decoration:none;}*/
a{color:#007979;text-decoration:none;}

/*change type --e-- */
.column-clear{ clear:both;}
/*fix 20170110 --s--*/
/*.wrapper{ margin:0px auto; padding:0px;width:1080px;}
.portfolio-content, .portfolio-area{width:1080px;}*/
.wrapper{ margin:0px auto; padding:0px;width:1500px;}
.portfolio-content, .portfolio-area{width:1500px;}
/*fix 20170110 --e--*/
.title-page{font-size:40px;margin:15px 0px 40px 0px;color:#151515;}
.goto{float:right;width:130px;margin:-80px 30px 0px 0px;}

/**** PORTFOLIO STYLES*****/
.portfolio-categ{margin-bottom:30px;}
.portfolio-categ li{display:inline;margin-right:10px;}
.image-block { display:block;position: relative;}
/*fix 20170110 --s--*/
/*.image-block img{ background:#FFFFFF;padding:0px;margin:0;width:225px;height:140px}*/
.image-block img{...

JavaScript

/*
picasa api已關閉,圖檔無法正常顯示
*/
/*var boxss = [];
var stringt="https://lh3.googleusercontent.com/-dv6rMp7aiGw/WHWWELEswLE/AAAAAAAAR0M/uTsBuXrEg8EDy7zKCXkYRO_llhPeWEWKwCHM/6374165846048948401";
boxss = stringt.split("/");
var resulturl = "";
console.log(boxss.length);
for(var i = 0;i<boxss.length;i++){
  console.log(i+" # "+boxss[i]);
}

for(var i = 0;i<boxss.length;i++){
  if(i==boxss.length-1)  {
     resulturl+="s240/";
  }
  resulturl+=boxss[i];
  if(i==1){
    resulturl+="/";
  }else if(i==boxss.length-1){
  
  }else{
    resulturl+="/";    //every
  }  
}
console.log(resulturl);*/