画像の拡大表示

[smastu]

webmaster様

お世話になっております。
又、質問させて頂きます。
画像のThumbnailからマウスオーバーで拡大表示する
zoomi.jsというライブラリーを使用したページのCMS化を実現しようとしましたが
うまく行きませんでした。
指定の方法は以下で単純に"images_l.jpg"の部分をMS化しまいたがうまく
動きませんでした。
<img class="zoomi" src="imag_s.jpg" alt="images_l.jpg">

リファレンスマニュアル45ページにある方法も試して見ましたが
一息ついて表示される感じなので別途javascriptライブラリを
探しています。
CMS DesigerでThumbnailの拡大表示を行う時に扱いやすい
javascriptライブラリをお教え頂きたいのですがよろしくお願い致します。

[webmaster]

smatsu さん、いつもご利用ありがとうございます。

ご質問の件についてですが、zoomi.jsというライブラリをこちらでも試しに使用してみました。

具体的には、

コード: 全て選択

<img src="{myphoto1}" />

となっていた箇所（何の変哲もなく画像を埋め込んでいる箇所）を、

コード: 全て選択

<img src="{myphoto1}" class="zoomi" width="100" />

のように、幅100ピクセルの固定表示（保存される写真はたいていこれ以上の大きさなので、ブラウザによって縮小表示されます）にして、"zoomi"のclassを指定しました。

jqueryの読み込みと、zoomi.jsの読み込みは、HTMLのhead内で行っています。

これで、zoomiのデモ通りの動きとなりました。画像のマウスオーバーで画像が拡大して表示されます。

もし、このやり方ではなく、別の結果が必要な場合には、大変お手数ですが再度ご連絡頂ければ幸いです。

[smastu]

webmaster様

ご連絡遅くなり申し訳ありません。
ご指導のように設定して問題なく表示する事が出来ました。
html内でclassを指定するものだとばかり思っていたのですが
デザイン定義に指定するとは思いませんでした。
これは基本的な知識なのでしょうか。
当分、お世話になりますのでよろしくお願い致します。

[webmaster]

webmasterです。smatsuさん、ご報告ありがとうございます。うまく表示されたとのことで、ほっとしております。

CMS Designerのデザイン定義は、最終的にはHTMLとして出力されますので、CMS化した部分にCSSなどで何らかの装飾をしたい場合は、デザイン定義側に手を入れることが多いです。

またご不明の点がございましたら、なんなりとご質問ください。