イメージをサムネイル化する

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのjThumb()プラグインを利用して イメージをサムネイル化します。 サンプルが表示されたら[Enable]ボタンをクリックします。 するとイメージがサムネイル化します。元のサイズに戻すには[Disable]ボタンをクリックします。

このサンプルは、jQueryのjThumb()プラグインを利用して イメージをサムネイル化します。 サンプルが表示されたら[Enable]ボタンをクリックします。 するとイメージがサムネイル化します。元のサイズに戻すには[Disable]ボタンをクリックします。

サムネイル化するときのサイズは、thumbs.cssに格納されているスタイルシートを 書き換えます。 

.thumb-img
{
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-bottom: 1px solid #AAA;
  border-right: 1px solid #AAA;
  position: relative;
  width: 50px;  /* 150px */
  height: 50px; /* 150px */
  margin: 10px;
  padding: 6px;
  background: #FFF;
}

.thumb-strip
{
  position: absolute;
  width: 50px; /* 150px */
  height: 10px;
  bottom: 6px;
  left: 6px;
  background: #FFF;
  filter: alpha(opacity=60);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  -moz-opacity: 0.60;
  opacity: 0.60;
}



$("#d").hide();

$("#e").click(function() {
  $("a.thumb, img.thumb").thumbs();
  $("a.thumb img, img.thumb").thumbsImg();
  $(this).hide();
  $("#d").show();
});

$("#d").click(function() {
  window.location = window.location;
});