javascriptで簡単設定イメージ画像拡大スクリプト

イメージを拡大表示するのにおしゃれなのは、lightboxhighslideがありますがページの修正やcssの追加とか、タイプによればaltの設定とかid、class属性の追加など表示枚数が少なければいいが、100枚、200枚となってくるとちょっと…、
というわけでシンプルに組み込めるのを作ってみました。
CB1300SF とりあえずimgpickup_shadow.jsをダウンロードして(UTF-8で保存)
<head>…..</head>の間に、
<script src=”http:**アドレス**/imgpickup_shadow.js” type=”text/javascript”></script>
と挿入するだけでリンク属性が画像を指している場合は勝手に背面にシャドーがかかり画像が中央に表示されます。
DOCTYPEの指定無しタイプも作動します。(多分)IE7,IE6とFF2でテスト済み。

不具合は保障しませんけど、使いたい方は使ってください。
質問はコメント欄へお願いします。

  • onloadで他に命令されている場合はうまくいかないときもあります。
  • リンクに設定されているのonclickよりも優先します。

“javascriptで簡単設定イメージ画像拡大スクリプト” への8件の返信

  1. 表示ウィンドウサイズまでのズームと、ズームアウトして自然に消えるの付け加えました。リンク先の画像の存在を確認するように修正しました。

  2. blogger用に製作したつもりですが、bloggerのサーバーにプログを載せている場合のリンク先画像は直リンク禁止となっているみたいで、リンクの画像が直リンク禁止の場合は作動しません。

  3. 重なりを(z-index)指定しているページに組み込む時は、
    Pickup.style.zIndex = 51;
    bigimage.style.zIndex = 50; shadow.style.zIndex = 49;
    loading_div.style.zIndex = 48;

    とstyle.zIndexで、指定しないと背面に回り込みます。

  4. Pickup.style.zIndex = 51;
    bigimage.style.zIndex = 50;
    loading_div.style.zIndex = 49;
    shadow.style.zIndex = 48;

    z-indexの指定間違っていましたので修正です。

  5. PORSCHE911C4S-WINGはBLOGGERにホストしているプログですが、このスクリプトを<head>と</head>の間に設置すると普通に作動しました。
    多分、使っている画像の場所がbloggrで無いからだと思いますが・・・

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください