Highslide JS で画像を拡大表示

暑中見舞いのサイトも無事オープンし、ひとまず落ち着いたところで
各ページの細部にも力を入れていこうと、色々作りこんでいます。

サイトの「初めての方へ」というページにスタッフからの暑中見舞い
はがきをイメージした画像を貼り付けたのですが、ただ表示させる
のも面白みがないので、何かいい方法はないかと探していたところ、
「小粋空間」様のサイトでHighslide JSに関する記事を見つけました。

以前から存在自体は知っていたものの、何やら複雑そうなので
手を出さずにしましたが、小粋空間様のところでとても詳しく説明
されていたので、それを参考に暑中見舞いサイトで使用してみました。

説明を読みながら設置すると、ローカルでは問題なくHighslide JSが
機能したのですが、いざサーバーにアップしてアクセスしてみると
「loading」と出たまま拡大画像が表示されないではありませんか！

o(￣ー￣;)ゞううむ、どこが悪かったんだ？
ローカルでは動くのになぜ？？

と、悩むこと数時間ｗ
原因が分かりました。

それは画像がjpgではなくgifだったのです。
なるほど、gifは駄目なんですね＾＾；
背景の透過処理を施した画像だったので、gifでやったのですが
そこが問題だったようです。

jpgで動作確認後、png画像で透過処理を施し差し替えて
問題なく動作しました。

いやあ、大変便利ですねぇ〜。
しかも動きが面白い。
作った人、ホントすごいです。
自分でこんなもの作れたら、きっとすごく楽しいだろうなあと
思った瞬間でした。


補足

拡大された画像に表示される「Powered by Highslide JS」 の
文字を消したいときは、ページ内のスクリプトに
「hs.showCredits = false;」を追加することで消えるようです。

LINK
挨拶状｜はがき 印刷｜引越し はがき｜結婚報告 はがき
出産報告 はがき｜年賀状｜喪中 はがき｜暑中見舞い