top

サムネイルをランダムに表示させる(改) リスト可能タイプ

以前にサムネイルをランダムに表示させるというのを覚え書きしましたが、これは画像が1つしか表示できないタイプでした。が、1つではなく複数表示させて、かつランダム画像を重複させないことは出来ないかというご質問を複数いただいたので、「画像を複数表示出来てかつランダム画像が重複しない」スクリプトを探してみました。実は私も内心そう出来たらいいなと思っていたところもあったので。

検索して見つけたものの中から、以下の頁で紹介されていたスクリプトを使わせていただきました。ありがとうございました。

画像をランダムに(重複しないように、あとそれぞれにリンクもつけて)表示させたい

MTに組み込むために多少アレンジしてあります。

■サムネイルから画像へリンクを張るタイプ
Assetで管理されている画像をランダムに表示します。サムネイルからは直接元画像に飛びます。元画像を別ウインドウで表示したい場合などは、<MTFor>の中のHTML部分に必要に応じてtarget='_blank'等を追加するといいのではと。

インデックステンプレートで新しいテンプレートを作り、 以下をraasset.jsという名前で保存します。何枚の画像を使うかは青字の数字の部分で指定。使いたい枚数より1つ少ない数を指定します(10と指定したら最新から11枚の画像がランダムに表示されることになります)。
<注>青数字はMTにアップしてる画像数より少ない数にして下さい。
サムネイルを全部正方形にするカスタマイズ入りです。サムネイルのサイズは赤字の部分で調整して下さい。

<MTAssets type="image">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<MTSetVarBlock name="push(eurl)"><$MTAssetURL$></MTSetVarBlock>
<MTSetVarBlock name="push(eimg)"><MTIf name="imgw" gt="$imgh"><$MTAssetThumbnailURL height="70"$><MTElse><$MTAssetThumbnailURL width="70"$></MTElse></MTIf></MTSetVarBlock>
<MTSetVarBlock name="push(etitle)"><$MTAssetLabel$></MTSetVarBlock>
</MTAssets>
jmpImg = new Array();
<MTFor var="i" from="0" to="10">
jmpImg[<MTVar name="i">]="<a href='<$MTVar name="eurl" index="$i"$>'><img src='<$MTVar name="eimg" index="$i"$>' title='<$MTVar name="etitle" index="$i"$>' /></a>";
</MTFor>
function raAsset() {
var rr = parseInt(Math.random()*jmpImg.length);
document.write(jmpImg.slice(rr,rr+1)[0]);
jmpImg.splice(rr,1);
}

ランダム表示させたいテンプレートの<head>~</head>内に以下を追加。

<script type="text/javascript" src="<$MTBlogURL$>raasset.js"></script>

ランダム表示させたい箇所に以下を追加。表示させたい数だけ<li></li>で囲って繰り返します。

<div class="item">
<ul>
<li><script type="text/javascript">raAsset();</script></li>
<li><script type="text/javascript">raAsset();</script></li>
<li><script type="text/javascript">raAsset();</script></li>
</ul>
</div>

■サムネイルから記事へリンクを張るタイプ
エントリーに属する画像から自動でサムネイルを作ってランダム表示します。サムネイルからは該当エントリー(ブログ記事)へ飛びます。

インデックステンプレートで新しいテンプレートを作り、 以下をraimg.jsという名前で保存します。何枚の画像を使うかは青字の数字の部分で指定。使いたい枚数より1つ少ない数を指定します(10と指定したら最新から11枚の画像がランダムに表示されることになります)。
<注>青数字は画像のある記事数より少ない数にして下さい。
サムネイルを全部正方形にするカスタマイズ入りです。サムネイルのサイズは赤字の部分で調整して下さい。

<MTEntries lastn="0">
<MTEntryAssets type="image" lastn="1">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<MTSetVarBlock name="push(eurl)"><$MTEntryPermalink$></MTSetVarBlock>
<MTSetVarBlock name="push(eimg)"><MTIf name="imgw" gt="$imgh"><$MTAssetThumbnailURL height="70"$><MTElse><$MTAssetThumbnailURL width="70"$></MTElse></MTIf></MTSetVarBlock>
<MTSetVarBlock name="push(etitle)"><$MTEntryTitle$></MTSetVarBlock>
</MTEntryAssets>
</MTEntries>
jmpImg = new Array();
<MTFor var="i" from="0" to="10">
jmpImg[<MTVar name="i">]="<a href='<$MTVar name="eurl" index="$i"$>'><img src='<$MTVar name="eimg" index="$i"$>' title='<$MTVar name="etitle" index="$i"$>' /></a>";
</MTFor>
function raImg() {
var rr = parseInt(Math.random()*jmpImg.length);
document.write(jmpImg.slice(rr,rr+1)[0]);
jmpImg.splice(rr,1);
}

ランダム表示させたいテンプレートの<head>~</head>内に以下を追加。

<script type="text/javascript" src="<$MTBlogURL$>raimg.js"></script>

ランダム表示させたい箇所に以下を追加。表示させたい数だけ<li></li>で囲って繰り返します。

<div class="item">
<ul>
<li><script type="text/javascript">raImg();</script></li>
<li><script type="text/javascript">raImg();</script></li>
<li><script type="text/javascript">raImg();</script></li>
</ul>
</div>

■cssで調整(画像リンク・記事リンク共通)
サムネイルを正方形にするカスタマイズ入りなので、以下のcssを追加。赤字の部分はjavascript内の数字と合わせます。marginなどは好きなように調整を。

.item ul {
margin:0px;
padding:0px;
list-style-type: none;
}
.item li {
display: inline;
float: left;
margin: 0px 5px 5px 0px;
overflow: hidden;
width: 70px;
height: 70px;
}

貼り付けてみました。もちろんリストにせず1つでも使えます。サンプル画像はフォトログから引っ張ってます。