try:Vue, jquery顯示picasa圖片,製作image gallery

by cactus77kiki

HTML

<!--try:picasa api+不一次locad完全所有相簿，改透過點下按鈕時才獲取下一分頁內的相簿資料-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.6/vue.min.js"></script>
<div id="albumdata">                 
 
                    <ul id="myList" class = "portfolio-area">
                        <li class="portfolio-item2" v-bind:data-id="'id-'+album.gphoto$id.$t" v-for="album in albums | orderBy 'media$group.media$title.$t' -1  ">
                        <!--<p ><span class="popnum" v-if="album.isnew>0">NEW！</span></p>-->
                        <div >
                            <span class="image-block">                        
                                <a class="image-zoom" v-bind:href="pageurl+album.gphoto$id.$t" >
                                    <div class="nailthumb-container">                                    
                                        <img v-bind:src="coverurl(album.media$group.media$content[0].url)"  />                                    
                                    </div>                                
                                </a>
                            </span>
                            <div class="home-portfolio-text">
                                <h2 class="post-title-portfolio">
                                    <a rel="bookmark" v-bind:title="album.title.$t">{{ album.title.$t }}</a>
                                </h2>
                                <p class="post-subtitle-portfolio">共 {{ album.gphoto$numphotos.$t }} 張照片</p>
                            </div>
                        </div>
                        </li>
                        <div class="column-clear"></div>    
                    </ul>

                    <br/>
                   <div style="text-align:center;"><div id="loadMore" >瀏覽更多(Load More)</div></div>
                   
                   
                </div>

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;}
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;}
/*a:hover{color:#65a42d; text-decoration:underline;}*/
.column-clear{ clear:both;}
/*--170110 change album size s --*/
/*.wrapper{ margin:0px auto; padding:0px;width:1080px;}
.portfolio-content, .portfolio-area{width:1080px;}*/
.wrapper{ margin:0px auto; padding:0px;width:1000px;}
/*#wrapper{ margin:0px auto; padding:0px;width:1000px;}*/
.portfolio-content, .portfolio-area{width:1000px;}
/*--170110 change album size e --*/
/*.title-page{font-size:40px;margin:50px 0px 60px 0px;color:#151515;}*/
.title-page{font-size:40px;margin:15px 0px 40px 0px;color:#151515;}
/*change type --e-- */
.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 {...

JavaScript

/*
picasa 此服務已關閉,無法正常顯示圖片
*/
var url = "https://picasaweb.google.com/data/feed/api/user/105491382522976985520?deprecation-extension=true&alt=json";
jQuery.getJSON(url).success(function (data) {    
    getView(data); 
}).complete(function () { 
   //ref:https://jsfiddle.net/cse_tushar/6FzSb/
   size_li = $("#myList li").size();
    x=20;	//初始化:20筆
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+12 <= size_li) ? x+12 : size_li;	//按下按鈕再取12筆
        $('#myList li:lt('+x+')').show();
        if( size_li-x==0)
        {
          $('#loadMore').hide();
        }
    });    
});

var getView = function (data) {
    new Vue({
        el: '#albumdata',
        data: {
            albums: data.feed.entry,
            pageurl: 'phdetail.html?albumid=',
            
        },
        
        methods: {
            coverurl: function (e) {
                var boxss = [];
                boxss = e.split("/");
                var resulturl = "";
                for (var i = 0; i < boxss.length; i++) {
                    if (i == boxss.length - 1) {
                        resulturl += "s240/";   //add size
                    }
                    resulturl += boxss[i];
                    if (i == boxss.length - 1) { }
                    else {
                        resulturl += "/";
                    }
                }
                return resulturl;
            },
            
        }
        
    });
}