グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

※14/10/8　追記
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。

ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。


よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。

ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。

jQuery and Fancybox: How to automatically set the height of an iframe lightbox

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
});

上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
  'scrolling' : 'no',
  'onComplete' : function() {
    $('#fancybox-frame').load(function() {
      $('#fancybox-content').height($(this).contents().find('body').height());
      $('#fancybox-overlay').height($(document).height());
    });
  }
});

これで高さが自動調整されます。
google chromeだとローカルでは動きません。

※12/7/11　追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。

不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。

また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。

ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・

時間があるときにいじってみたいです。

LightBox風に画像やswf、webページなどのコンテンツを表示できる
jQuery Pluginの1つとしてFancyboxがありますが、
オプションを日本語でまとめているサイトが見当たらなかったので
自分用に翻訳してみたものをメモしておこうと思います。

(2016.7.19) 訳せてないものは原文入れました。

以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。

オプション	デフォルト値	説明
'padding'	10	枠の幅
'margin'	20	枠の外側の余白。 表示するコンテンツがウインドウより大きい場合、この幅を確保して縮小されます。
'opacity'	false	When true, transparency of content is changed for elastic transitions
'modal'	false	true にすると、'overlayShow'→ true、'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton'→ talse になります
'cyclic'	false	ギャラリーの一番端でNext/Backボタンを押した時にループするか
'scrolling'	'auto'	スクロールバーの有無（auto／yes／no）
'width'	560	コンテンツの幅（iframe、swf時）
'height'	340	コンテンツの高さ（iframe、swf時）
'autoScale'	true	ビューポートに収まるようにスケーリングするか。 'true'の場合、表示するコンテンツがウインドウより大きいと自動的に縮小します。（画像だと無効？）
'autoDimensions'	true	For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results
'centerOnScroll'	false	コンテンツを常に中央に表示するか
'ajax'	{ }	Ajaxオプション
'swf'	{wmode: 'transparent'}	SWFオブジェクトのparams設定
'hideOnOverlayClick'	true	オーバーレイ部分をクリックした時にfancyboxを閉じるか
'hideOnContentClick'	false	コンテンツをクリックした時にfancyboxを閉じるか
'overlayShow'	true	オーバーレイの有無
'overlayOpacity'	0.3	オーバーレイの不透明度
'overlayColor'	'#666'	オーバーレイの色
'titleShow'	true	タイトルの表示/非表示
'titleFormat'	null	Callback to customize title area. You can set any html - custom image counter or even custom navigation
'titlePosition'	'outside'	タイトルの位置（outside／inside／over）
'transitionIn' 'transitionOut'	'fade'	開閉時の動き（fade／elastic／none）
'speedIn' 'speedOut'	300	開閉時のスピード
'changeSpeed'	300	ギャラリーでコンテンツを切り替えた時のサイズ変更スピード
'changeFade'	'fast'	ギャラリーでコンテンツを切り替えた時のフェードスピード
'easingIn' 'easingOut'	'swing'	アニメーションに使用するイージング
'showCloseButton'	true	クローズボタンの有無
'showNavArrows'	true	ギャラリーでNext/Backボタンを表示するか
'enableEscapeButton'	true	Escボタンを押した時にfancyboxを閉じるか
'onStart'	null	Will be called right before attempting to load the content
'onCancel'	null	Will be called after loading is canceled
'onComplete'	null	Will be called once the content is displayed
'onCleanup'	null	Will be called just before closing
'onClosed'	null	Will be called once FancyBox is closed

Advancedオプション	説明
'type'	コンテンツタイプ。'image' 'ajax' 'iframe' 'swf' 'inline' が設定できます。
'href'	コンテンツのURL。HTMLのhref=""で設定したものよりも優先されます。
'title'	コンテンツのタイトル。HTMLのtitle=""で設定したものよりも優先されます。
'content'	コンテンツの内容。任意のHTMLデータを入れることができます。
'orig'	Sets object whos position and dimensions will be used by 'elastic' transition
'index'	Custom start index of manually created gallery (since 1.3.1)