try: 產生image外連語法(picasa)

by cactus77kiki

HTML

<!--try:picasa tool(get album data,url data)-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.6/vue.min.js"></script>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
function showcode(){
	var resultcode="";
  $(".imgsel").each(function() {
    //尺寸
  	var srcdata = $(this).attr("src").replace("s70","s"+$("#photosize").val());    
    //說明標籤photoalt
    var photoalt = "";
    if($('#photoalt').val()==="1"){
    	photoalt=" alt='' ";
    }
    //console.log($(this).data("summary"));
    //照片連結photohref
    var photohref1 = "";
    var photohref2 = "";
    if($('#photohref').val()==="1"){
    	photohref1="<a href='"+srcdata+"'"+" target='_blank' >" ;
      photohref2="</a>";
    }    
    resultcode+=photohref1+"<img src='"+srcdata +"'"+ photoalt+"/>"+photohref2;
    //換行符號brcode
    if($('#brcode').val()==="1"){
      resultcode+="<br/>";
    }
  });
  //console.log(resultcode);
  $("#htmlcode").val(resultcode);
}
function selectall(){   
  //$("#listview img").toggleClass("imgsel");
  $("#listview img").attr("class","");
  $("#listview img").addClass("imgsel");  
  showcode();
}
function deselectall(){    
  $("#listview img").attr("class","");
  $("#listview img").addClass("imgunsel");  
  showcode();
}
var listdata = new Array;
   function changephotoStyle(pid){     
     if($("#photo_"+pid).attr("class")=="imgunsel"){       
       $("#photo_"+pid).attr("class","imgsel");  //選取
     }else{
       $("#photo_"+pid).attr("class","imgunsel");  //非選
     };
     showcode();
      //genhtml();
   }   
function htmlDetail(e){
    var boxss = [];
    boxss = e.split("/");
    var resulturl = "";                                
    for (var i = 0; i < boxss.length; i++) {
       if (i == boxss.length - 1) {
          resulturl += "s70/";   //add size
       }
       resulturl += boxss[i];
       if (i == boxss.length - 1) { }
    ...

CSS

div{display: block;}
div a { cursor: pointer; cursor: hand; }
div a:link {
    text-decoration: none;
}
#content{
  height:120px;width:400px;
  overflow:auto;  
  border: 1px solid #666; padding: 0px;
}

//div .contentblock{display:inline;}
.showstyle{
  height:80px;width:80px;border:0px;
}

#detail{
  height:250px;width:400px;
  overflow:auto;  
  border: 1px solid #666; padding: 0px;
}
/*deselect*/
.imgunsel {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
-moz-opacity: 0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5; 
}
/*select*/
.imgsel {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); 
-moz-opacity: 1.0; 
-khtml-opacity: 1.0; 
opacity: 1.0; 
}

#htmlcode{font-size: 10px;}

JavaScript

/*picasa api已關閉.圖檔無法正常顯示
*/
var url = "https://picasaweb.google.com/data/feed/api/user/105491382522976985520?deprecation-extension=true&alt=json";
jQuery.getJSON(url).success(function (data) {
var vue =new Vue({
  el: '#app-2',
  data: {
    albums: data.feed.entry    
  },
  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 += "s160-c/";   //add size
                    }
                    resulturl += boxss[i];
                    if (i == boxss.length - 1) { }
                    else {
                        resulturl += "/";
                    }
                }                
                return resulturl;                
            },
    mouseOver:function(e){
        $("#dspan").text(e);        
    },
    mouseLeave:function(){
        $("#dspan").text("");
    },
    /*showPhotos: function(){         
        this.albums.photos=[] ;
        },*/
    getPhotos: function (album) {
        var id = album.gphoto$id.$t;
        //console.log(id);
        $.ajax({
           url: "https://picasaweb.google.com/data/feed/api/user/" + "105491382522976985520" + "/albumid/" + id + "?deprecation-extension=true&alt=json",
           type: 'get',
           dataType: 'json',
           async: false,
           success: function (sdata) {										   
             //Vue.set(data, 'photos', sdata.feed.entry);
             //Vue.set(data, 'dateReady', true);
             //album.photos=sdata.feed.entry;
             listdata = sdata.feed
             //console.log(listdata[0].content.src);
             $('#detail tr').each(function() {
                var $tds = $(this).find('td');                
                if($tds.length != 0) {
                  $tds.eq(0).text("");
      ...