JavaScript + Ajax 実践サンプル集 - イメージをサムネイル化する

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

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

このサンプルは、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;
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - create thumnails jThumbs </title>
  <link href="jQuery/jThumb/page.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jThumb/thumbs.css" rel="stylesheet" type="text/css" />

$(function() {

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

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

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

});
  </script>

</head>
<body>

<p id="buttons">
    <button id="e">Enable</button>
    <button id="d">Disable</button>
  </p>
  <h3>Large image with hyperlink</h3>
  <a href="http://jsajax.com/" class="thumb">
    <img src="jQuery/jThumb/images/clouds.jpg" alt="" width="500" height="332" />
  </a>
  <h3>Large image without hyperlink</h3>
  <img src="jQuery/jThumb/images/bambu.jpg" class="thumb" alt="" width="267" height="383" />
  <h3>Exact image without hyperlink</h3>
  <img src="jQuery/jThumb/images/light.jpg" class="thumb" alt="" width="150" height="150" />
 
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
.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;  /* 150 */
  height: 50px; /* 150 */
  margin: 10px;
  padding: 6px;
  background: #FFF;
}
.thumb-inner
{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.thumb-img img
{
  border: 0;
}
.thumb-strip
{
  position: absolute;
  width: 50px; /* 150 */
  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;
}
.thumb-zoom
{
  background: url(images/search.png) no-repeat;
  position: absolute;
  width: 22px;
  height: 22px;
  right: 10px;
  bottom: 7px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/jThumb/page.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jThumb/thumbs.css" rel="stylesheet" type="text/css" />

  <script src="jQuery/jThumb/jquery.js" type="text/javascript"></script>
  <script src="jQuery/jThumb/jquery.thumbs.js" type="text/javascript"></script>

  <!--[if IE 6]>
  <style type="text/css">
    .thumb-zoom { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/search.png', sizingMethod='scale'); }	
  </style>
  <![endif]-->

  <script type="text/javascript">

    $(function() {

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

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

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

    });
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <p id="buttons">
    <button id="e">Enable</button>
    <button id="d">Disable</button>
  </p>
  <h3>Large image with hyperlink</h3>
  <a href="http://jsajax.com/" class="thumb">
    <img src="jQuery/jThumb/images/clouds.jpg" alt="" width="500" height="332" />
  </a>
  <h3>Large image without hyperlink</h3>
  <img src="jQuery/jThumb/images/bambu.jpg" class="thumb" alt="" width="267" height="383" />
  <h3>Exact image without hyperlink</h3>
  <img src="jQuery/jThumb/images/light.jpg" class="thumb" alt="" width="150" height="150" />

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

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

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

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

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!