オリジナルサイズ表示

2009/05/09 2022/04/01

【パソコン】【パソコン】［カスタマイズ］ 0 0

当ブログでは掲載画像は､殆どサムネイル表示していませんが､
稀にサムネイルを使用している場合があります｡
その際に､オリジナル画像を表示する方法を
これまで２つ取り上げましたので､ここで纏めておきます｡
（サンプルが各リンク先のページにありますのでご覧下さい）

（１）画像サイズに合ったウインドウを開く（popup.js）
　　参考サイト：春木屋　 creazy photograph

（２）サムネイルから本画像表示（Highslide JS）
　　参考サイト：a-cat MEMO　nlog(n)

機能の多様性では（２），導入のし易さでは（１）でしょうか｡

２つの手法の大きな違いは記事を書く時の記載方法です｡

（１）「画像サイズに合ったウインドウを開く」の場合
　投稿欄にimg要素を記述する際に､class="js_popup"を設定するだけです｡
　<img src="画像ファイルのURL" class="js_popup" alt="" title="" />
　　この方法は画像ファイルの縮小版を自動的に作成してくれるので､
　サムネイルファイルを作成･アップする必要がありません｡

（２）「サムネイルから本画像表示」の場合
　<a href="画像ファイルのURL" class="highslide" onclick="return hs.expand(this)">
　<img src="サムネイル画像のURL" alt="画像のタイトル" /></a>
　この方法は記事内にサムネイルファイルを表示しておいて､リンクで元画像を表示します｡

以前にも､「Highslide JS」の導入を試みた事がありましたが､
ページエラーが発生し､已む無く取り外しておりました｡
今回､a-cat MEMO の導入解説（FC2用!!）を参考に
再チャレンジし､何とか使えるようになりました｡

サーバーへの転送ファイルも23個ありましたが､
FC2の改善で現在は1回に6ファイル纏めてアップ出来るので楽になりました｡

（注記）H21.8.18.
残念ながら､現在､a-cat MEMO 様へはリンク切れとなっております｡