[相簿] Coppermine Photo Gallery Album Expander

今天看到 gslin大神文章：PIXNET Album Expander，然後裝了一下，發覺非常好用，而我自己本身也有架設相簿，相簿程式是 open source Coppermine Photo Gallery，想說就自己練習看看，寫一個自己上傳相簿之後，可以快速瀏覽相簿，而這隻程式要先安裝好外掛 Greasemonkey，這隻外掛我之前有介紹過：firefox and IE 的 greasemonkey，大家可以看看，google 上面也有很多文章 script：Coppermine Photo Gallery Album Expander 測試相簿：我的相簿 Angel & Devil

原本的顯示如下：

裝完之後，顯示 normal 的圖形這樣看起來非常方便，不用一直點連結，就可以看到該頁面所有圖片我順便去測試了一下 segaa 大大的相簿系統：薰衣草之戀，測試結果如下老大的相簿系統太 sex 了，哈哈我在 script 裡面還有另外寫一個顯示方法，就是直接把圖片換成 normal 而已，沒有經過排列，顯示如下轉錄 jQuery 的取值教學：jQuery Attributes 筆記

@addClass( class )
// 在 


  節點裡加入class = "selected"
  // 移除 : removeClass( class ).
  $("p").addClass("selected")
  
  @attr( name ) 
  // 取得 裡的src值
  // before : 
  // Result :  test.jpg
  $("img").attr("src");
  
  @attr( properties ) 
  // 將  加入 src="test.jpg" alt="Test Image"
  // before : 
  // Result :  
  $("img").attr({ src: "test.jpg", alt: "Test Image" });
  
  
  @attr( key, value ) 
  // 指定物件 的 key 並 設定 value
  // 將  加入 src = "test.jpg"
  // before : 
  // Result :  
  $("img").attr("src","test.jpg");
  // 將  加入 value = "test.jpg"
  // before : 
  // Result : 
  $("input").attr("value","test.jpg");
  
  @attr( key, fn ) 
  // 在裡加入 title 
  //title 值 則是用function 回傳
  //Before: 
  //Result: 
  $("img").attr("title", function() { return this.src });
  //Before : 
  //Result: 
  $("img").attr("title", function(index) { return this.title + (++index); });
  
  
  @html() 
  // 取得 
  
  

    xxx 
   xxx <= 取得的東西
  // Before : 
  
  
    xxx 
  
  // Result : xxx 
  $("div").html()
  
  
  @html( val ) 
  // 改變 
  
  
    xxx
   為 
  
  
    new stuff
  
  // Before : 
  
  
    xxx 
  
  // Result : 
  
  
    new stuff
  
  $("div").html("
  
  new stuff");
  
  
  @removeAttr( name ) 
  //移除
  // Before : 
  // Result : 
  $("input").removeAttr("disabled")
  
  
  @removeClass( class )
  //移除 
  
  
    裡的 class
    // Before : 
    
    

      Hello
    
    // Result : 
    
    
      Hello
    
    $("p").removeClass()
    
    // Before : 
    
    
      Hello
    
    // Result : 
    
    
      Hello
    
    $("p").removeClass("selected")
    
    // Before : 
    
    
      Hello
    
    // Result : 
    
    
      Hello
    
    $("p").removeClass("selected highlight")
    
    
    @text() 
    //取得  
    
    
      裡的字串
      // Before : 
      
      

        Test Paragraph.
      
      
      
        Paraparagraph
      
      // Result : Test Paragraph.Paraparagraph
      $("p").text();
      
      
      @text( val ) 
      //取代
      
      
        內的字串
        // Before : 
        
        

          Test Paragraph.
        
        // Result :  
        
        
          Some new text.
        
        $("p").text("
        
        Some new text.");
        
        // Before : 
        
        
          Test Paragraph.
        
        // Result :  
        
        
          Some new text.
        
        $("p").text("
        
        Some new text.", true);
        
        
        @toggleClass( class )
        // 將
        
        
          有 class="selected" 移除 , 如果
          
          

            沒有 class="selected" 則加入 
            // Before :  
            
            

              Hello
            
            
            
              Hello Again
            
            // Result : 
            
            
              Hello
            , 
            
            
              Hello Again
            
            $("p").toggleClass("selected")
            
            
            @val()
            // 抓取 INPUT 的 VALUE值
            // Before :  
            
            
            // Result :  "some text"
            $("input").val();
            
            
            @val( val ) 
            // 將INPUT 的 VALUE 值 改變為指定
            // Before :  
            // Result :  
            $("input").val("test");

See also