- ベストアンサー
nyroModal HEADタグ内の記述について
- nyroModalを使用してウェブページ内にギャラリーを表示する方法について説明します。
- nyroModalの設定によって、ウィンドウサイズを指定して外部リンクを開くことができます。
- 初心者でも簡単にnyroModalを設置する方法について解説します。
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
例えば、Googleを800×600でだしたかったら、↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Test</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript" src="jquery.nyroModal-1.6.2.min.js"></script> <style type="text/css"> </style> <script type="text/javascript" charset="utf-8"> $(function(){ //$.nyroModalSettings({width:800,height:600}); //<=こっちの指定方法でもよい。 $('a.nyroModal').nyroModal({width:800,height:600}); //<=対象をセレクター選択 }); </script> </head> <body> <p><a href="http://www.google.co.jp/" class="nyroModal">Google</a></p> </body> </html> ※イメージと違って、HTMLページはサイズが分からないので、nyroModalのサイズ自動 調整がきかないのだと思います。 ※さらに、イメージの時は自動、HTMLページの時はサイズ指定、なんてやりたかったら jQueryのセレクター指定を工夫すればよいでしょう。
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
ついでに、回答 ＜＝＝ 「デモのページのGoogleのリンクは、ソース内に特別な記述がないのに600×400くらいで固定されているのが不思議でなりません。」 ＝＝＞ デモのページがつんでる「js/jquery.nyroModal-1.2.8.js」は、 $.fn.nyroModal.settings = { ｝ の中身を多少カストマイズしてあって、 minWidth: 800, // Minimum width minHeight: 500, // Minimum height とセットしてます。オリジナルの「js/jquery.nyroModal-1.2.8.js」は、 もっと小さいサイズです。 ＜＝＝ 「違うファイル名なのに同じということですか？」 ＝＝＞ たいてい、 xxx.js、xxx.min.js、xxx.pack.js とあれば、minとかpackはxxx.jsを圧縮してサイズを小さくしたものです。 minはminify型式とも呼ばれます。「YUI Compressor」というので圧縮します。 pack型式との違いは良く知りませんが、packが一番小さくなります。 zip圧縮とかと根本的に違って、もとに戻す事は出来ないです（当然、ブラウザー は、そのままの型式で理解できますが） 圧縮型式だと特殊な人間しか読めないので、普通の人が改造したり、お勉強したり、 デバッグしたりする時は、非圧縮のファイルを弄ります。
お礼
なるほど、圧縮ファイルだったのですね！ だからひとつで良いのですね。 色々とご親切にありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
「nyroModal」の本家のページには、ポップアップウィンドウを カストマイズする方法が記載されていますので、そちらを参考に して下さい。 そもそも、 <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.pack.js"></script> これ3っつとも同じです。1つでいいはずです。
お礼
ご回答ありがとうございます。 違うファイル名なのに同じということですか？
お礼
詳しいご説明ありがとうございます。４つめの<script></script>までコピペさせていただいたところ、解決しました。他はなにもいじっていないのですが、ウェブの場合800×600に固定され、写真の際は自動的にサイズ調整されています。 ちなみに、デモのページのGoogleのリンクは、ソース内に特別な記述がないのに600×400くらいで固定されているのが不思議でなりません。他にjsファイルなどで指定してリンクしてあるのでしょうか。 昔のヴァージョンがそうなのかなと、ためしに、1.2.8 のヴァージョンで試してみても、だめでした。 とりあえず必要な動作は出来るようになりました。ありがとうございます。 さらに使いこなせるように地道に勉強したいと思います。