イメージを拡大表示するのにおしゃれなのは、lightboxやhighslideがありますがページの修正やcssの追加とか、タイプによればaltの設定とかid、class属性の追加など表示枚数が少なければいいが、100枚、200枚となってくるとちょっと…、
というわけでシンプルに組み込めるのを作ってみました。
とりあえずimgpickup_shadow.jsをダウンロードして(UTF-8で保存)
<head>…..</head>の間に、
<script src=”http:**アドレス**/imgpickup_shadow.js” type=”text/javascript”></script>
と挿入するだけでリンク属性が画像を指している場合は勝手に背面にシャドーがかかり画像が中央に表示されます。
DOCTYPEの指定無しタイプも作動します。(多分)IE7,IE6とFF2でテスト済み。
不具合は保障しませんけど、使いたい方は使ってください。
質問はコメント欄へお願いします。
- onloadで他に命令されている場合はうまくいかないときもあります。
- リンクに設定されているのonclickよりも優先します。
表示ウィンドウサイズまでのズームと、ズームアウトして自然に消えるの付け加えました。リンク先の画像の存在を確認するように修正しました。
blogger用に製作したつもりですが、bloggerのサーバーにプログを載せている場合のリンク先画像は直リンク禁止となっているみたいで、リンクの画像が直リンク禁止の場合は作動しません。
拡大時にズームアップ＆ズームダウンのボタンが邪魔なのでシャドウをかけました。
重なりを(z-index)指定しているページに組み込む時は、
Pickup.style.zIndex = 51;
bigimage.style.zIndex = 50; shadow.style.zIndex = 49;
loading_div.style.zIndex = 48;
とstyle.zIndexで、指定しないと背面に回り込みます。
表示途中でのキャンセル(close)時のエラー修正しています。これで結構使いまわせるかも?
Pickup.style.zIndex = 51;
bigimage.style.zIndex = 50;
loading_div.style.zIndex = 49;
shadow.style.zIndex = 48;
z-indexの指定間違っていましたので修正です。
PORSCHE911C4S-WINGはBLOGGERにホストしているプログですが、このスクリプトを<head>と</head>の間に設置すると普通に作動しました。
多分、使っている画像の場所がbloggrで無いからだと思いますが･･･
ピンバック: PHP 画像に文字を追加 – ヘアサロン店長の独り言♂