dポイントプレゼントキャンペーン実施中！

nyroModal HEADタグ内の記述について

解決済

  • 質問者：noname#160377
  • 質問日時：
  • 回答数：3件

nyroModal HEADタグ内の記述について

http://nyromodal.nyrodev.com/#download

上記ページより、nyroModal1.6.2をダウンロードしました。
設置方法を下記サイト

http://www.css-lecture.com/log/javascript/014.html

で調べて、サイトの説明どおり設置してみたところ、headタグ内に記述する５行のソースが古いのか（jsファイルが1.2.8になってる）ダウンロードしたファイルと合わず、動作しませんでした。
自分なりに試行錯誤してみて、あてずっぽうですが、下記ソースに書き換えたところ、ギャラリー表示は正常に動作するようになりました。


<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<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>


しかし下記ページの一番下にあるデモと同じように、Googleへのリンク（外部ページを読み込む）

http://www.css-lecture.com/template/2008/1001/


をする場合に、

<p><a href="http://www.google.co.jp/" class="nyroModal">Google</a></p>　と、記述してもウィンドウサイズが400×300くらいに固定されてしまって縦横にスクロールバーが出てしまい、サイト全体が表示できません。


cssやjsのファイルを編集しようと探してみましたが、ウィンドウサイズを指定しているような記述を見つけることができませんでした。
現在のヴァージョンで正常に動作させるためには、headタグ内にどのような記述をしたら良いでしょうか。
また、外部リンクの際にウィンドウサイズを指定できる方法はありますでしょうか。

当方、ネットで独学で調べて設置をしている初心者ですので的外れな質問をしているかもしれませんが、ご教授いただけますでしょうか。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： yyr446
  • 回答日時：

例えば、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のセレクター指定を工夫すればよいでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しいご説明ありがとうございます。４つめの<script></script>までコピペさせていただいたところ、解決しました。他はなにもいじっていないのですが、ウェブの場合800×600に固定され、写真の際は自動的にサイズ調整されています。

ちなみに、デモのページのGoogleのリンクは、ソース内に特別な記述がないのに600×400くらいで固定されているのが不思議でなりません。他にjsファイルなどで指定してリンクしてあるのでしょうか。
昔のヴァージョンがそうなのかなと、ためしに、1.2.8 のヴァージョンで試してみても、だめでした。

とりあえず必要な動作は出来るようになりました。ありがとうございます。
さらに使いこなせるように地道に勉強したいと思います。

通報する
お礼日時：2010/10/27 13:13

No.3

  • 回答者： yyr446
  • 回答日時：

ついでに、回答


＜＝＝
「デモのページの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圧縮とかと根本的に違って、もとに戻す事は出来ないです（当然、ブラウザー
は、そのままの型式で理解できますが）
　圧縮型式だと特殊な人間しか読めないので、普通の人が改造したり、お勉強したり、
デバッグしたりする時は、非圧縮のファイルを弄ります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど、圧縮ファイルだったのですね！
だからひとつで良いのですね。
色々とご親切にありがとうございました。

通報する
お礼日時：2010/10/28 00:03

No.1

  • 回答者： yyr446
  • 回答日時：

「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つでいいはずです。

参考URL：http://nyromodal.nyrodev.com/#download
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
違うファイル名なのに同じということですか？

通報する
お礼日時：2010/10/27 13:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報