設定記錄 10

設定光箱！（差不多該收手了，浪費超多時間Orz）步驟一：解除Blogger+Picasa的圖片外連限制。<script type='text/javascript'>
  $(function() {
    $.fn.colorbox.settings.bgOpacity = "0.9";
    $("a[onblur]").hover(function() {this.href = this.href.replace("/s1600-h/", "/s1600/");});
    $('.separator > a').hover(function() {this.href = this.href.replace('/s1600-h/', '/s1600/');});
    $("a[onblur]").colorbox({transition:"elastic"});
    $('.separator > a').colorbox({transition:"elastic"});
  });
</script>在紅色部分可以自己設定要改成什麼解析度（選擇有：s72、s144、s200、s288、s320、s400、s512、s576、s640、s720、s800、s912、s1024、s1152、s1280、s1440、s1600），重點是去掉連結中的「-h」。步驟二：從眾多的泛lightbox特效種選擇想用的，把所需的js檔、css檔、還有圖片檔上傳到自己的空間。步驟三：加入colorbox的script（選用理由：新、有在維護、捲動或調整視窗大小背景不會破掉、效果合胃口）。<link href='http://sites.google.com/site/verksday/home/for-colorbox/e4/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/verksday/home/for-colorbox/colorbox-1/jquery.colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function(){
         $(&quot;a[rel=&#39;colorbox&#39;]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;70%&quot;, height:&quot;90%&quot;});
         $(&quot;a[@href$=.bmp]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;70%&quot;, height:&quot;90%&quot;});
         $(&quot;a[@href$=.jpg]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;70%&quot;, height:&quot;90%&quot;});
         $(&quot;a[@href$=.jpeg]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;70%&quot;, height:&quot;90%&quot;});
         $(&quot;a[@href$=.png]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;70%&quot;, height:&quot;90%&quot;});
         $(&quot;a[@href$=.gif]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;70%&quot;, height:&quot;90%&quot;});
             });
</script>紅色網址是上傳到自己空間的部份，綠色部分為特效參數設定，設定為沒有轉場，並且為視窗大小的固定比例，後面藍色部分是試著自己設定selector，但是目前沒有function（刪掉無妨），先留著懶得改了。

額外學習重點一：javascript放的地方不一樣，讀取的順序就不一樣，放在head當然最早讀取，因為要早點讀到，所以就決定放在head啦。額外學習重點二：「<!--」跟「-->」是html不會讀取的註解標示，javascript則是用「//（單行註解）」或是「/*（多行註解）*/」。另外可以用title=""增加光箱出現時的文字描述。

待解決一：還是沒辦法自動生成，rel='colorbox'還是要手動加，這部份要知道怎麼設定「selector」。待解決二：如果可以融會貫通三個破解的script寫法就更好了...。待解決三：colorbox用的圖片好像不是我上傳的是官網的？？

參考網站：1. jQuery lightBox plugin官網 2. colorbox官網 3. Blogger和Picasa的圖片外連限制 4. 破解一（挖網站原始碼的ReplaceImageLink.js） 5. 破解二（用不出來，而且是thickbox的，還要再改） 6. 破解三（最後用colorbox搭這個，而且感覺應該是通用的，不會限某種xxxbox使用） 7. 光箱jQuery.Lightbox安裝方法 8. 選擇哪些連結要套用特效要用選擇器(selector)，教學$( )函數 9. Google大神 。