ホーム >> sbzoom

sbzoom はシンプルな画像拡大スクリプトです。

注)sbzoom は当サイトで配布しているテンプレート専用のシンプルなスクリプトです。
画像の拡大スクリプトは高機能で、なめらかに画像を拡大表示するものがありますが
イメージタグにID属性を付けたり、特殊なタグでイメージタグを囲んだりと設置が面倒なのが現状です。

<空>

sbzoomはクリックで拡大、再びクリックで拡大画像を閉じるという
非常に シンプルなスクリプトで、当サイトで配布しているテンプレートで
簡単に利用ができます。

← 画像をクリックで確認できます。

画像自体にお手持ちのソフトウェアで
「+」マークをつけたり、虫眼鏡のようなマークをつけたりすれば
ページをより魅力的に見せることができます。

もちろん、クリックした時に同じ画像を表示しなくてもかまいません。
クリックした時、別の大きな画像を表示しても楽しいですね。

←画像をクリックで確認できます。

(このページでは画像をクリックするとページが明るくなりますが、暗くすることもできます。詳細は↓)

設置方法

下記ボタンからお使いのテンプレートと同じものをクリックして素材をダウンロードして下さい。(zip形式)

 

ダウンロードしたデータを解凍後、フォルダの中身を全て「design」フォルダに入れます。
同じファイル名の素材があるため、上書きのアラートが出ますが、そのまま上書きして下さい。

次に、設置したいページのソースを開き、ソースを表示します。
上から5〜10行目あたりにある(お使いのソフトウェアによって異なる)
<script language="JavaScript" type="text/javascript" src="design/main_flash.js"></script>
のすぐ下に、下記1行を追加します。
<script language="JavaScript" type="text/javascript" src="design/sbzoom.js"></script>



スクリプトの設置はこれでおしまいです。

小さな画像 と 大きな画像 を準備して小さな画像をページに掲載して完成!

sbzoom を利用するには、元画像と拡大表示する画像2枚を準備します。
元画像の名前と拡大画像の名前を次のようにし、元画像をページに配置すれば動作します。 

 

ちょっとカスタマイズして自分らしく

背景を暗くしたい場合は、「design」 フォルダに入っている 「back.png」 を消去して「back1.png」を「back.png」と
名前を変更して下さい。
お手持ちのソフトウェアなどで、透過情報を持つPNG画像を「design」フォルダに「back.png」で保存すれば
背景がそちらの画像に変わります。

また、拡大表示した際に画面上部に表示される  画像は「design」フォルダにある

「button.gif」という画像です。
自分の好みでボタンを作り、同じ名前で上書き保存すれば、その画像が表示されるようになります。

 

ページの上部へ

 

動作確認/免責事項/注意

 

sbzoom の動作確認はWindowsの下記のブラウザでおこないました。

 

 

他のブラウザでは、きちんと動作しない可能性があります(IE6不可)

OSの種類、バージョンなどによっても正しく動作しない場合がございますのでご了承下さい。

使用に規約などはございませんので、自由にお使い下さってかまいませんが、このスクリプトが正しく動作しない、またはスクリプトによりトラブルが発生した場合にも、当方は
一切責任を負いません。
ご理解の上、ご利用下さい。

 

 

z-index をご利用の場合

 

多くのレイヤー(div)に重なり順(z-index)を指定しているページでは画像が正しく表示されない可能性がありますので、ご注意下さい。

 

 

階層について

 

スクリプトを利用するページとスクリプトや素材が入っているフォルダは同じ階層に置いて下さい。

 

タイムラグについて

 

sbzoom はクリックでタイトルのフラッシュを一時的に消去し、再びクリックすることでタイトルフラッシュを読み込むようになっています。

そのため、拡大画像を閉じた時にタイトルフラッシュが表示されるまで若干時間がかかることがあります。

 

不具合が出たら…

 

他サイトで配布されているスクリプトや素材と併用し、不具合が出た場合には、「設置方法」で記述した

ソース箇所を削除して下さい。