- 締切済み
Spry と facebox の併用はできないのでしょうか？
Spryのデモページにあるこちら http://labs.adobe.com/technologies/spry/demos/products/index.html を参考に、ページを作成中です。 上記のページ右側に製品の画像が表示されていますが、ここに画像へのリンクを作成し、画像を facebox を使用して表示したいのですが、機能しません。普通に画像表示のみされます。 例えば以下のような感じです。(a タグを追加) ----- <p spry:detailregion="dsProducts" id="boxshot" class="SpryHiddenRegion"><a href="{boximage}" rel="facebox"><img src="{boximage}" alt="product box shot" width="238" height="130" /></a></p> ----- 同じページであっても、Spry領域以外(上記の spry:detailregion 以外)にサンプルでリンクを記載すると正常に機能します。 Spry と facebox の併用はできないのでしょうか？ lightbox でも試してみたのですが同じでした。
- HBN
- お礼率50% (3/6)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- DOUGLAS_
- ベストアンサー率74% (397/534)
[回答番号：No.1] の DOUGLAS_ です。 ＞上書きがお嫌なら、所定の作業によって「lightbox2.04」の 各ファイル の 相対バス を書き換えてください。 と乱暴なことを書きましたが、フォルダ構成 がお分かりでしたら、フォルダ は分けた方がよいかも知れません。 ＞facebox の見た目がよかったので、facebox でと考えていました 頑張って「facebox」の方もやってみました。 １）「demos\products」フォルダ の直下に「facebox」フォルダ を配置します。 ２）「demos\products\index.html」の <head> 部に下記 コード を追加します。 各ファイル への 相対パスは 適正なものに書き換えてください。 <link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" /> <script src="facebox/jquery.js" type="text/javascript"></script> <script src="facebox/facebox.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loading_image: 'loading.gif', close_image: 'closelabel.gif' }) }) </script> ３）次に、これが、お尋ねの件の 最重要ポイント になりますが、 <p spry:～～><img src=～～ /></p> の部分についてですが、これは「正攻法」ではなくて、「反則技」でいけそうです。 結論ですが、 <p spry:～～><a href=～～><img src=～～ /></a></p> ではなくて、 <a href=～～><p spry:～～><img src=～～ /></p></a> です！！ つまり <a href="facebox/stairs.jpg" rel="facebox"><p spry:detailregion="dsProducts" id="boxshot"><img src="{boximage}" alt="product box shot" width="238" height="130" /></p></a> のようにして保存します。 以上でいかがでしょうか？
- DOUGLAS_
- ベストアンサー率74% (397/534)
＞lightbox でも試してみたのですが同じでした。 lightbox2.04 で試してみました。 １）「products」フォルダ 直下に「lightbox2.04」の コンテンツ「css」・「images」・「js」の 各フォルダ を上書きします。 上書きがお嫌なら、所定の作業によって「lightbox2.04」の 各ファイル の 相対バス を書き換えてください。 ２）「lightbox2.04」で指定された <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> の ４行 を「demos\products\index.html」の <head> 部に追記します。 ３）「demos\products\index.html」の <img src="{boximage}" alt="product box shot" width="238" height="130" /> の部分を <a href="リンク先画像のURL" rel="lightbox"> ～ </a> で挟んで保存します。 ただし、本来、画面の中央に表示されるはずの「lightbox」がちょっと上目に表示されました。 「Spry」自体の構造が複雑ですので、私には原因を追及する意欲が沸きませんので、これでご勘弁を。
お礼
情報ありがとうございます。 ご指摘頂いたとおり実施したところ、lightbox で表示できました。 どうやら<head>ないの記載に漏れがあったようです。 facebox の見た目がよかったので、facebox でと考えていましたが、ひとまず lightbox で行こうと思います。 > 「Spry」自体の構造が複雑ですので、私には原因を追及する意欲が沸きませんので、これでご勘弁を。 ありがとうございました。
お礼
お礼が遅くなり申し訳ありませんでした。 > 頑張って「facebox」の方もやってみました。 ありがとうございます。 なるほど！ その方法までは気がつきませんでした。 この方法でやると確かにfaceboxで画像表示できました。 でも、最初に記載したように --- <a href="{boximage}" rel="facebox"> --- といった感じに、参照先を動的に与えることができないようです。 やはり、rightbox でやってみます。 重ね重ねありがとうございました。