画像のランダム表示とMTポップアップテンプレートの改造について

画像のランダム表示とMTポップアップテンプレートの改造について

ここのところのアクセスログを調べていると、検索で『マビノギ』より『MT 画像 ポップアップテンプレート』やら『画像 ランダム表示』の検索でここを訪れる人がかなり多いがわかりますた_| ̄|○

うちはコレでもオンラインゲーム『マビノギ』のプレイ日記を扱うblogなんで、MTのカスタマイズやらJava Scriptの話はここではなくて『iwashiwomizu的。』の方でやりたいんですが、仕方ないんでやりますよ。。。

■画像のランダム表示
・TOPページ右側の画像は、アクセスするごとにランダムで画像が表示されるようにJava Scriptで表示を操作しています。閲覧者によってはセキュリティや軽量化のためにブラウザ側でJava ScriptをOFFにしている場合は表示されません。
画像追加の時にJava Scriptを書き換える場所が1箇所と非常に少ないため、更新が楽です。(ただし、ファイル名は統一しないとダメ)

この方式では画像ファイルのサイズはそのまま表示されるので、事前に画像を加工してサイズを統一しておかないとページのレイアウトが崩れる場合があります。
因みにTOPページ右側のランダム画像は幅280~310ピクセル、高さ フリーで統一しています。

<script language="JavaScript">
function random_img1(num1,num2) {
if ((num1 - num2) > 0) {
var big = num1
var small = num2
} else {
var big = num2
var small = num1
}
var range = big - small + 1
var number = Math.floor(Math.random()*range) + small
return(number)
}
function random_img2(){
var img_src="ランダム画像フォルダまでのパス(絶対パスでも相対パスでもOK)/ランダム表示用画像の統一ファイル名"+random_img1(1,15) +".jpg"
document.write("<img src='"+img_src+"'>")
}
</script>

<script language="JavaScript">random_img2()</script>

・赤太字の数字は画像ファイル名に振られた連番です。
例:
neko1.jpg、neko2.jpg、neko3.jpg...neko15.jpg

画像を追加した場合、この右側の数字を増えた画像の連番にすれば、追加された画像もランダム表示されます。
例:
ランダム画像ファイルに新しくneko16.jpg、neko17.jpg、neko18.jpgを追加

赤太字右側(15)の数字を18に置き換える。

特に問題がなければ、コレで動くはずです。


■画像のポップアップテンプレート
2回も説明するのが面倒くさいので『iwashiwomizu的。-画像のポップアップテンプレートを弄ってみる。』の説明を見てください。(手抜き)。

(2008/09/13追記:リンク先の記事が消えているため書き直し)

この改造にはJavaScriptを使っています。そのため、閲覧者がJavaを切っていると使えないかもしれません。その点に気をつけて必ずテンプレートのバックアップを取った上で、自己責任でお使いください。不具合が起きても当方にて責任は取りません。

なお、この改造はMT4.21で動作確認を行いました。バージョンが古いと対応できない可能性があります。

 

テンプレートのポップアップ画像を開き、ヘッダータグの下辺りに以下のJavaScriptを追加します。

<SCRIPT LANGUAGE="JavaScript">
<!--
function CloseWin(){
    window.close();
}
// -->
</SCRIPT>

次にimgタグ

<img src="<$mt:ImageURL$>" width="<$mt:ImageWidth$>" height="<$mt:ImageHeight$>" alt="<$mt:ImageURL$>" style="margin: 0;padding: 0;border: 0;" />

これを下のものに差し替えます。

<a href="javascript:CloseWin()">
    <img src="<$mt:ImageURL$>" width="<$mt:ImageWidth$>" height="<$mt:ImageHeight$>" alt="<$mt:ImageURL$>" style="margin: 0;padding: 0;border: 0;" /></a>

これで保存。
新しく書く記事のポップアップ画像には改造後のテンプレートが適用されます。

この改造前に作成された記事のポップアップ画像の変更には使えません。過去記事については地道に手動で書き換え作業を行ってください。

トラックバック(0)

トラックバックURL: http://dotmoflog.com/mt5/mt-tb.cgi/203

コメントする

カレンダー

カレンダー取得中...

アーカイブ

「マビノギ スタッカート」ドラマCD
「マビノギ スタッカート」ドラマCD

ついったーマビノギ部

携帯版.moflog

携帯でも観れます

http://dotmoflog.com/mt4i/index.cgi?id=2

Powerd by MT4i


『.moflog』はさくらのレンタルサーバ スタンダード で運営されています。

ブログリスト

記事の更新がRSSで確認されたブログは上部に表示されます。
更新してるのに上に表示されないぞ!というブロガーさんは『http://www.blogpeople.net/ping/ 』をping送信先に追加してみてください。
あわせて読みたい

マビノギ・RMT反対同盟
*about?/random*
*back/next*