てきとうな説明でてきとうに作ろう

ImageCloud

サンプル

別窓

概要

公式
画像の一部がサムネイルとなって散らばってて、マウスを乗せると画像全体が見れるカワイイ感じのやつです。
ページを読み込む度、毎回配置がランダムに変わります。

2019.06


やりかた

まずは公式サイト開いてすぐのDOWNLOADボタンを押してImageCloud-master.zipを手に入れ、解凍しましょう。


「jquery.imagecloud.min.js」、「imagecloud.jquery.json」、「jquery.imagecloud.js」の3つを自サイトの場所へコピーします。
参照関係があると思うので3つのファイルは同じ場所に置いておきましょう。


<head>～</head>内に以下のコードをコピペします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="ファイルの場所/jquery.imagecloud.min.js"></script>

<script>は</body>直前に置くとはやくなるらしいですが、気にする人がやればいいでしょう。
ファイルの場所は移動させたところに書き換えてくださいね。

次は使用したい画像のタグを編集します。

画像グループを<div id="myDiv" class="imagecloud"></div>で囲うだけです。

<div id="myDiv" class="imagecloud">
    <img src="画像1の場所/画像1.jpg" alt="1"  />
    <img src="画像2の場所/画像2.jpg" alt="2"  />
    <img src="画像3の場所/画像3.jpg" alt="3"  />
    <img src="画像4の場所/画像4.jpg" alt="4"  />
    <img src="画像5の場所/画像5.jpg" alt="5"  />
</div>


簡単でしたね。
しかし、これだけでは問題が起こる場合があります。
imagecloudは配置がランダム、サムネイルもランダムに切り取られているため、そのまま配置すると画面外にはみ出てしまうことがあります。
そのため、以下のように配置を画面のど真ん中にすると安定すると思います。

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="ファイルの場所/jquery.imagecloud.min.js"></script>
  <style type="text/css">
    div#wrap {
        width: 100vw;
        height: auto;
        min-height: 100vh;
        position: relative;
    }  
    div#myDiv {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }  
  </style>
</head>
<body>
<div id="wrap">
    <div id="myDiv" class="imagecloud">
            <img src="画像1の場所/画像1.jpg"  width="50%" height="auto" alt="1"  />
            <img src="画像2の場所/画像2.jpg"  width="50%" height="auto" alt="2"  />
            <img src="画像3の場所/画像3.jpg"  width="50%" height="auto" alt="3"  />
            <img src="画像4の場所/画像4.jpg"  width="50%" height="auto" alt="4"  />
            <img src="画像5の場所/画像5.jpg"  width="50%" height="auto" alt="5"  />
    </div>
</div>
</body>

簡単に言うと、wrapを画面の大きさにして、myDiv（ImageCloudが配置される領域）をwrap内のど真ん中に表示させるようにしています。
これでだいたい大丈夫ですが、扱う画像がけっこう大きい場合はImageCloud自体をあきらめた方がいいと思います。


オプションなど

その他細かい部分を変える方法です。物足りない方はやってみてください。
<script src="ファイルの場所/jquery.imagecloud.min.js"></script>の下に次のように記述します。

<script type="text/javascript">
$(document).ready(function() {
  $("#myDiv").imageCloud({
    'width': 500,
    'height': 400,
    'color': '#00ff00',
    'speed': 1000,
    'borderSize': 2,
    'borderStyle': 'dotted',
    'borderRadius': 100,
    'boxWidth': 100,
    'boxHeight': 100,
    'random': false
  });
});
</script>

これを設定するとこうなります。

以下が設定できるオプション一覧です。設定したい項目の分だけ「'オプション名': 値」を,で区切って羅列してください。

オプション名 デフォルト 効果
width 600 ImageCloudが配置される領域の幅です。単位はピクセルです。
height 400 ImageCloudが配置される領域の高さです。単位はピクセルです。
color '#800000' 外枠の色です。カラーコードを'で囲ってください。
speed 250 マウスを乗せてから画像が最大化するまでの時間です。
単位はミリ秒です。
borderSize 6 外枠の線の太さです。単位はピクセルです。
borderStyle solid 外枠の線の種類です。htmlのborder-styleプロパティと同じです。
solid、dotted、dashed、double、groove、ridge、inset、outset、hidden、noneが設定できます。
borderRadius 0 外枠の角丸です。htmlのborder-radiusプロパティと同じです。
boxWidth -1 サムネイルの幅です。単位はピクセルです。
0以上を指定すると全サムネイルが同じ幅になります。
-1は各サムネイルでランダムな幅になります。
boxHeight -1 サムネイルの高さです。単位はピクセルです。
0以上を指定すると全サムネイルが同じ高さになります。
-1は各サムネイルでランダムな高さになります。
random true trueにすると、サムネイルの配置はランダムな場所になります。
falseにすると、ImageCloud領域の左上にひとつだけ固定され、残りはランダムな場所になります。

inserted by FC2 system