圖片+說明

某網友問

您好，您網站上的圖片+圖說的樣式很好看，可以請教一下，是怎樣做出來的呢？

是不是有plugin可使用？

答：沒有 plugin 可用，這是為了分享我家天秘近況，使用 JavaScript + css 小技巧弄出來的玩意兒，以下為代碼

JavaScript

javascript · [高亮] · [原始]

  1. (function($) {
  2.   $.fn.figure = function() {
  3.     $(this).each(function(i) {
  4.       var $self = $(this),
  5.           $img  = $self.find(‘img’);
  6.           $html = $self.find(‘p.figure_html’),
  7.           width = $img.width(),
  8.           text  = $html.length ? $html.remove().html() : $img.attr(‘alt’);
  9.  
  10.       $self.width(width).append(‘<p class="caption"><em class="title">Figure ‘+(++i)+‘</em>’+text+‘</p>’);
  11.     });
  12.   };
  13.  
  14.   $(document).ready(function() {
  15.     $(‘div.figure’).figure();
  16.   });
  17. })(jQuery);
(function($) {
  $.fn.figure = function() {
    $(this).each(function(i) {
      var $self = $(this),
          $img  = $self.find(\'img\');
          $html = $self.find(\'p.figure_html\'),
          width = $img.width(),
          text  = $html.length ? $html.remove().html() : $img.attr(\'alt\');

      $self.width(width).append(\'<p class="caption"><em class="title">Figure \'+(++i)+\'</em>\'+text+\'</p>\');
    });
  };

  $(document).ready(function() {
    $(\'div.figure\').figure();
  });
})(jQuery);

[高亮] · [原始] · javascript

以上代碼需存為 .js 檔，搭配 jQuery 一同服用。
在網頁的 <head> 範圍內或 </body> 之前加入讀取 JavaScript 的代碼

xml · [高亮] · [原始]

  1. <script type="text/javascript" src="http://your.domain.com/path/to/jquery.js"></script>
  2. <script type="text/javascript" src="http://your.domain.com/path/to/figure.js"></script>
<script type="text/javascript" src="http://your.domain.com/path/to/jquery.js"></script>
<script type="text/javascript" src="http://your.domain.com/path/to/figure.js"></script>

[高亮] · [原始] · xml

CSS

css · [高亮] · [原始]

  1. .figure {
  2.   margin: 0 0 1.5em;
  3.   color: black;
  4.   background: #fee;
  5.   border: 1px solid #edd;
  6.   padding: 5px;
  7.  
  8. }
  9. .figure .figure_html {
  10.   display: none;
  11. }
  12. .figure img,
  13. .figure .caption,
  14. .figure .figure_html {
  15.   margin: 0;
  16.   padding: 0;
  17. }
  18. .figure .title {
  19.   font-weight: bold;
  20.   padding-right: 2px
  21. }
  22. .figure .title:after {
  23.   content: ‘:’
  24. }
.figure {
  margin: 0 0 1.5em;
  color: black;
  background: #fee;
  border: 1px solid #edd;
  padding: 5px;

}
.figure .figure_html {
  display: none;
}
.figure img,
.figure .caption,
.figure .figure_html {
  margin: 0;
  padding: 0;
}
.figure .title {
  font-weight: bold;
  padding-right: 2px
}
.figure .title:after {
  content: \':\'
}

[高亮] · [原始] · css

使用方式：

xml · [高亮] · [原始]

  1. <!–無 HTML 的圖片說明–>
  2. <div class="figure">
  3.   <img src="your_photo.png" alt="圖片說明" />
  4. </div>
  5.  
  6. <!–使用 HTML 的圖片說明–>
  7. <div class="figure">
  8.   <img src="your_photo.png" alt="圖片說明" />
  9.   <p class="figure_html">使用 <acronym title="Hypertext Markup Language">HTML</acronym> 的圖片說明</p>
  10. </div>
<!--無 HTML 的圖片說明-->
<div class="figure">
  <img src="your_photo.png" alt="圖片說明" />
</div>

<!--使用 HTML 的圖片說明-->
<div class="figure">
  <img src="your_photo.png" alt="圖片說明" />
  <p class="figure_html">使用 <acronym title="Hypertext Markup Language">HTML</acronym> 的圖片說明</p>
</div>

[高亮] · [原始] · xml

參考文件：If I Told You You Had a Beautiful Figure…

訓練大小便

上禮拜的天秘。我媽店裡面員工送的衣服；我也買了幾件狗衣，不過都太大件沒辦法穿。

家裏（我弟）以前也曾經養過兩隻狗，一隻柴犬、一隻長得像拉布拉多但不知真實品種是啥的聰明狗。牠們的運氣跟天秘比起來硬是差上一大截。只能在車庫或陽台吃喝拉撒睡，再加上幼年時期的我三不五時就要去耍一下狗。諸如「出去」「進來」指令好像下免錢的，因為白目死小孩很少給獎品；再不就是吃薯條時要特地跑到陽台，薯條入口之前必須在狗狗嘴巴前面「過爐」一下，然後狗狗的表情就會從很興奮轉換到有點期待而後有點低落最後在失望中帶點企盼，千變萬化、煞是有趣。現在回想當年，真是充滿著無限的罪惡感哪！什麼？你說你感受到我的無限緬懷？更正更正！是罪惡感！


好，其實以上重點並不在於小時候的我有多白目，我只是想表達家裏還沒有把狗養在室內的先例，因此訓練狗大小便對我們而言變成很重要的課題。
Read the rest of this entry »

中華民國身份證檢查函式

剛剛在網路上晃呀晃，才知道中華民國身份證天字第一號是 Y10000001，持有人為[空一頁]蔣公。

然後再順路逛到中華民國國民身分證解釋頁，才了解原來身份證是這樣算的呀（請見 wiki）～

用 PHP 檢查身份證號是否合法差不多就是這樣…

php · [高亮] · [原始]

  1. function is_valid_id($id)
  2. {
  3.   $cities = array(
  4.     ‘A’ => 10,  // 台北市
  5.     ‘B’ => 11,  // 台中市
  6.     ‘C’ => 12,  // 基隆市
  7.     ‘D’ => 13,  // 台南市
  8.     ‘E’ => 14,  // 高雄市
  9.     ‘F’ => 15,  // 台北縣
  10.     ‘G’ => 16,  // 宜蘭縣
  11.     ‘H’ => 17,  // 桃園縣
  12.     ‘I’ => 34,  // 嘉義市
  13.     ‘J’ => 18,  // 新竹縣
  14.     ‘K’ => 19,  // 苗栗縣
  15.     ‘L’ => 20,  // 台中縣
  16.     ‘M’ => 21,  // 南投縣
  17.     ‘N’ => 22,  // 彰化縣
  18.     ‘O’ => 35,  // 新竹市
  19.     ‘P’ => 23,  // 雲林縣
  20.     ‘Q’ => 24,  // 嘉義縣
  21.     ‘R’ => 25,  // 台南縣
  22.     ‘S’ => 26,  // 高雄縣
  23.     ‘T’ => 27,  // 屏東縣
  24.     ‘U’ => 28,  // 花蓮縣
  25.     ‘V’ => 29,  // 台東縣
  26.     ‘W’ => 32,  // 金門縣
  27.     ‘X’ => 30,  // 澎湖縣
  28.     ‘Y’ => 31,  // 陽明山
  29.     ‘Z’ => 33,  // 連江縣
  30.   );
  31.  
  32.   $id = strtoupper($id);
  33.  
  34.   // 檢查格式
  35.   if (!preg_match(‘/[A-Z][1-2]\d{8}/’, $id))
  36.     return false;
  37.  
  38.   $city = (string)$cities[$id[0]];
  39.  
  40.   $total = $city[0];
  41.   $id[0] = $city[1];
  42.  
  43.   for ($i=0; $i<10; $i++)
  44.     $total += $id[$i] * (9 - $i);
  45.  
  46.   $total += $id[9];
  47.  
  48.   return (($total % 10) === 0);
  49. }
function is_valid_id($id)
{
  $cities = array(
    \'A\' => 10,  // 台北市
    \'B\' => 11,  // 台中市
    \'C\' => 12,  // 基隆市
    \'D\' => 13,  // 台南市
    \'E\' => 14,  // 高雄市
    \'F\' => 15,  // 台北縣
    \'G\' => 16,  // 宜蘭縣
    \'H\' => 17,  // 桃園縣
    \'I\' => 34,  // 嘉義市
    \'J\' => 18,  // 新竹縣
    \'K\' => 19,  // 苗栗縣
    \'L\' => 20,  // 台中縣
    \'M\' => 21,  // 南投縣
    \'N\' => 22,  // 彰化縣
    \'O\' => 35,  // 新竹市
    \'P\' => 23,  // 雲林縣
    \'Q\' => 24,  // 嘉義縣
    \'R\' => 25,  // 台南縣
    \'S\' => 26,  // 高雄縣
    \'T\' => 27,  // 屏東縣
    \'U\' => 28,  // 花蓮縣
    \'V\' => 29,  // 台東縣
    \'W\' => 32,  // 金門縣
    \'X\' => 30,  // 澎湖縣
    \'Y\' => 31,  // 陽明山
    \'Z\' => 33,  // 連江縣
  );

  $id = strtoupper($id);

  // 檢查格式
  if (!preg_match(\'/[A-Z][1-2]\\d{8}/\', $id))
    return false;

  $city = (string)$cities[$id[0]];

  $total = $city[0];
  $id[0] = $city[1];

  for ($i=0; $i<10; $i++)
    $total += $id[$i] * (9 - $i);

  $total += $id[9];

  return (($total % 10) === 0);
}

[高亮] · [原始] · php