常連

スクロールした位置に合わせてモーダルウィンドウとオーバーレイの表示位置を常に中央にしたいです。
pcだと常に中央に表示されるのですが、スマホで見ると画面上部に固定されてしまいます。

positionをfixedにしたり、
```css
transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
```
上記のコードをいれてみたりしたのですが、場所が間違っているのか上手くいきませんでした。
js内の[centerOnscroll](http://www.gravity-works.jp/gravica/web/js/002431.html)に何か加えれば中央に表示されるでしょうか？

下記はfancy boxのcssと一部jsです。アドバイスよろしくお願いいたします。

```css
#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-left: -20px;
	cursor: pointer;
	overflow: hidden;
	z-index: 1104;
	display: none;
}

#fancybox-loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 480px;
	background-image: url('fancybox.png');
}

#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1100;
	display: none;
}

#fancybox-tmp {
	padding: 0;
	margin: 0;
	border: 0;
	overflow: auto;
	display: none;
}

#fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	z-index: 1101;
	outline: none;
	display: none;
}

#fancybox-outer {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
}

#fancybox-content {
	width: 0;
	height: 0;
	padding: 0;
	outline: none;
	position: relative;
	overflow: hidden;
	z-index: 1102;
	border: 0px solid #fff;
}

#fancybox-hide-sel-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 1101;
}

#fancybox-close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	background: transparent url('fancybox.png') -40px 0px;
	cursor: pointer;
	z-index: 1103;
	display: none;
}

#fancybox-img {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	line-height: 0;
	vertical-align: top;
}

#fancybox-frame {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

#fancybox-left, #fancybox-right {
	position: absolute;
	bottom: 0px;
	height: 100%;
	width: 35%;
	cursor: pointer;
	outline: none;
	background: transparent url('blank.gif');
	z-index: 1102;
	display: none;
}

#fancybox-left {
	left: 0px;
}

#fancybox-right {
	right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
	position: absolute;
	top: 50%;
	left: -9999px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	cursor: pointer;
	z-index: 1102;
	display: block;
}

#fancybox-left-ico {
	background-image: url('fancybox.png');
	background-position: -40px -30px;
}

#fancybox-right-ico {
	background-image: url('fancybox.png');
	background-position: -40px -60px;
}

#fancybox-left:hover, #fancybox-right:hover {
	visibility: visible; /* IE6 */
}

#fancybox-left:hover span {
	left: 20px;
}

#fancybox-right:hover span {
	left: auto;
	right: 20px;
}

.fancybox-bg {
	position: absolute;
	padding: 0;
	margin: 0;
	border-left-width: 0;
	border-right-width: 0;
	border-bottom: 0;
	border-top-width: 0;
	width: 20px;
	height: 20px;
	z-index: 1001;
}

#fancybox-bg-n {
	top: -20px;
	left: 0;
	width: 100%;
	background-image: url('fancybox-x.png');
}

#fancybox-bg-ne {
	top: -20px;
	right: -20px;
	background-image: url('fancybox.png');
	background-position: -40px -162px;
}

#fancybox-bg-e {
	top: 0;
	right: -20px;
	height: 100%;
	background-image: url('fancybox-y.png');
	background-position: -20px 0px;
}

#fancybox-bg-se {
	bottom: -20px;
	right: -20px;
	background-image: url('fancybox.png');
	background-position: -40px -182px; 
}

#fancybox-bg-s {
	bottom: -20px;
	left: 0;
	width: 100%;
	background-image: url('fancybox-x.png');
	background-position: 0px -20px;
}

#fancybox-bg-sw {
	bottom: -20px;
	left: -20px;
	background-image: url('fancybox.png');
	background-position: -40px -142px;
}

#fancybox-bg-w {
	top: 0;
	left: -20px;
	height: 100%;
	background-image: url('fancybox-y.png');
}

#fancybox-bg-nw {
	top: -20px;
	left: -20px;
	background-image: url('fancybox.png');
	background-position: -40px -122px;
}

```


```js
b.fn.fancybox.defaults={padding:10,margin:40,opacity:false,modal:false,cyclic:false,scrolling:"auto",width:560,height:340,autoScale:true,autoDimensions:true,centerOnScroll:false,ajax:{},swf:{wmode:"transparent"},hideOnOverlayClick:true,hideOnContentClick:false,overlayShow:true,overlayOpacity:0.7,overlayColor:"#0E0E0F",titleShow:true,titlePosition:"float",titleFormat:null,titleFromAlt:false,transitionIn:"fade",transitionOut:"fade",speedIn:300,speedOut:300,changeSpeed:300,changeFade:"fast",easingIn:"swing",
easingOut:"swing",showCloseButton:true,showNavArrows:true,enableEscapeButton:true,enableKeyboardNav:true,onStart:function(){},onCancel:function(){},onComplete:function(){$.fancybox.center();},onCleanup:function(){},onClosed:function(){},onError:function(){}};b(document).ready(function(){b.fancybox.init()})})(jQuery);
```

モーダルウィンドウ、オーバーレイの表示位置をスクロールに合わせたい-fancybox1.3.4

以下のコードで、fancyboxが展開しません。
consoleでエラーを見てもfancyboxはちゃんと読み込まれています。
何が原因か分かりますでしょうか？

```html
コード
<ul class="banner">
	<div class="buttons clear">
		<a href="modal/xxx.html" class="modal">
			<img align="left" src="common/img/xxx.png" alt="" >
		</a>
		<a href="modal/yyy.html" class="modal">
			<img align="right" src="common/img/yyy.png" alt="">
		</a>
	</div>
</ul>
<style>
.buttons{
	text-align: center;
	margin-top: 30px;
}
.buttons a{
	display: inline-block;
	margin: 0 10px;
}
	
</style>
<script>
    $(document).ready(function($) {
      $("a.modal").fancybox({
        'width'          : 760,
        'height'         : 450,
        'padding'        : 1,
        'autoScale'      : false,
        'transitionIn'   : 'elastic',
        'transitionOut'  : 'none',
        'speedIn'        : 250,
        'overlayColor'   : '#ccc',
        'easingIn'       : 'swing',
        'overlayOpacity' : 0.8,
        'type'           : 'iframe',
        'scrolling'      : 'no',
		'autoSize' : false
        });
    });
</script>
```
![イメージ説明](ba1e7098352d7007e663e4453b968b93.jpeg)

このようなエラーがあるのは関係ありますか？

fancyboxでボックスが展開しない

ピンチアウトに対応しているfancy-box3を導入し、have_posts()およびthe_post()で取得した画像+テキストがあるモーダルを表示したところ、
殆どのモーダルはピンチアウトにより、画像を拡大できるのですが、
一部のデータがピンチアウトができない状態です。

なぜこのような違いが出るか、不可解です。なぜ違いが出るのか、改善するのはどうすればいいかお聞きしたいです。
ピンチアウトできるデータとピンチアウトできないデータを比較すると、
ピンチアウトできるデータは少しスクロールできるのですが、後者はスクロールができません。


モーダル部分
```php
<li>
    <?php $attachment_id=CFS()->get('case_image',$post->ID); ?>
    <?php $url = wp_get_attachment_image_url( $attachment_id ); ?>
    <a href="<?php echo $url ?>" data-src="#pop-<?php the_ID(); ?>" data-fancybox="group">
        <div><?php echo wp_get_attachment_image($attachment_id,case_image_s); ?></div>
        <span><?php echo CFS()->get('test_title'); ?></span>
        <h3><?php echo CFS()->get('test_name'); ?></h3>
    </a>
</li>
```

footer.php
```php
	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function() {
	$('[data-fancybox]').fancybox({
	});
});
</script>
```

fancy-box: 一部モーダルがピンチアウトできない

最近サーバー移行とテーマ変更をしたのですが、移行前から動作しなかったEasyFancyboxやResponsive LightboxのFancyboxが、変更後の現在も動作しません。
（なぜかResponsive LightboxのNivo Lightboxのみ正常に動作しております。）

検証としてローカルでEasyFancyboxを導入してテストしてみたところ、そちらは正常に動作しました。

ローカル、サーバー、両方でEasyFancyboxのみを有効化した状態でhead内の要素を確認してみると、サーバー側の方はどうやら固定でjQueryのv2.2.4が読み込まれているようでした。

【ローカル】
```
<link rel="dns-prefetch" href="//ajax.googleapis.com">
〜〜〜〜
<link rel="stylesheet" id="fancybox-css" href="https://local_example.com/wp-content/plugins/easy-fancybox/css/jquery.fancybox.1.3.23.min.css" type="text/css" media="screen">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
![リソース](59285344ff66cc2f68bea4ff75bb75e0.png)

【サーバー】
```
<link rel="dns-prefetch" href="//ajax.googleapis.com">
〜〜〜〜
<link rel="stylesheet" id="fancybox-css" href="https://example.com/wp-content/plugins/easy-fancybox/css/jquery.fancybox.1.3.23.min.css" type="text/css" media="screen">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
```
![リソース](18777dbf5328ee005b2234dff1617b65.png)

恐らくWordPressのjQueryではなく別に古いver.を読み込んでいると思われることが動作しない原因なのではないかと思っているのですが、当方初心者ゆえ修正の仕方が分かりません。

ちなみにChrome、Safari両方で検証すると以下のようなアドセンスのエラーやWarningが出ています。こちらも動作しない原因となるのでしょうか？（コンフリクトしているのでしょうか？）
![Chrome側](df78ac3c10b6dd1ff61cb7115be002fd.png)
![Safari側](11ce23d580ee76621028e6bd41877286.png)
![Safari側](a9b9960553f1dc89f215c3c89a5d755b.png)

ソース情報が足りていなかったら申し訳ございません。
他に必要なソースなどの情報がございましたら、ご提示いただいたら随時追記していきます。
最悪サイトアドレスを公開することも考えております…。
引き続き自分でも調べておりますが、様々な情報で混乱してきており…。どなたかご教授いただけますと幸いです。
よろしくお願いいたします。

【追記】
情報追加と修正依頼をいただきましたので、サイトのアドレスを開示させていただきます。
よろしくお願いいたします。
https://nicchu_media.com/

【2018.12.30追記】
フッターあたりにjQueryを読み込む$関数が記述されているのを確認しました。こちらがコンフリクトして動作しない原因となっているのでしょうか？
どこから記述されているのかと修正方法がまだ分からないので、引き続き調べてみます。

WordPressで読み込まれているjQueryのver.が固定で古いものになっておりFancyboxが動作しません。

Wordpressで「Easy FancyBox」プラグインを利用してiframeで記事ページの「single01」を読み込んでいます。

```php
<a href="/single01/" class="fancybox-iframe">
<img src="single01.jpg">
</a>
```

iframeが開いたあとのbodyの背景を透過させて、トップページのレイアウト全体が透けて見えるようにしたいのですが、行き詰まりまして助けてほしいです。
fancyboxのプラグインファイルに「allowtransparency="true"」を追加して、「single01」に以下classを入れましたがだめでした。

そもそも他ページの枠を透過することは不可能なのでしょうか。

```ここに言語を入力
<iframe id="fancybox-frame" allowtransparency="true" style="border:0;margin:0;overflow:auto" src="/single01/" allow="autoplay; encrypted-media" tabindex="999"></iframe>
```

```css
body.single01,html.single01 {
background: transparent;
}
```

すいませんがよろしくお願いいたします。

Fancybox展開後、iframeの背景透過

###前提・実現したいこと
ajaxで動的に生成した要素に対して、fancyboxを割り当てています。
本来できないらしいのですが、live関数を使うとできるとのことで、
一度liveで設定してから、それ自体にfancyboxを起動させています。
参考： [https://2inc.org/blog/2012/03/02/1270/](https://2inc.org/blog/2012/03/02/1270/)
```
jQuery('.fancybox').live('click', function() {
    jQuery.fancybox(this);
    return false;
});
```
しかし、これだとfancyboxのオプションが設定できないため、
設定できるようにしたいのです。

```
jQuery('.fancybox').live('click', function() {
    jQuery(this).fancybox( { // <- 変更
        "width": 450, // <- サイズを指定
        "height": 200
    });
    return false;
});
```


とすると、1回目のクリックでは何も起きず、2回目からfancyboxが起動してしまいます。サイズ指定もききません。

同じく [https://2inc.org/blog/2012/03/02/1270/](https://2inc.org/blog/2012/03/02/1270/) を参考に、
```
jQuery('.fancybox').live('hover', function() { // 'click' -> 'hover'
    jQuery(this).fancybox( {
        "width": 450,
        "height": 200,
    });
    return false;
});
```

に変更しましたが、fancyboxは一回で起動しますが、サイズ指定がききません。
ajaxで生成した要素に対してのオプション設定は不可能なのでしょうか。

###バージョンなど
jQuery 1.4.2 (理由があり、1.8以下を使用しています。)
fancybox 1.3.1

わかる方いらっしゃいましたら、よろしくお願いいたします。

ajaxで生成した要素に対するfancyboxのオプション設定

### 前提・実現したいこと
fancybox3を使っていいますが、data-captionで使っている文字を大きくしたり太字にする方法
を教えてください。
### 発生している問題・エラーメッセージ


### 該当のソースコード
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<p class="veu_leadTxt text-center">ギャラリー</p>
<figure>
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="exhi_outer"><a href="http://XXXX1.com/wp-content/uploads/2018/09/el-salvador_01.jpg" data-fancybox="gallery" data-caption="ああああ。&lt;br /&gt;いいい&lt;br /&gt;ううううう"><img class="alignnone wp-image-343 size-large" src="http://XXXX1.com/wp-content/uploads/2018/09/zzz_01-1024x679.jpg" alt="" width="750" height="497" /></a></div>
</div>


### 試したこと

Font指定をソースに入れたがうまく反映しない

### 補足情報（FW/ツールのバージョンなど）

fancybox3の質問

WordPressにfancybox3を設置しています。
[fancybox3公式ページ](http://fancyapps.com/fancybox/3/docs/)
スマホで閲覧時に画像外の部分をタップでclose動作を実装したいのですが、公式を見てもそのようなオプションが用意されていませんでした。
PCなら領域外クリックでcloseが実装できているのですが、どなたか方法をご存知でしょうか？

###現在のoption設定
```javascript
$(document).ready(function() {
	$('[data-fancybox]').fancybox({
		animationEffect: "zoom-in-out",
		transitionEffect : 'fade',
		loop : true,
		clickOutside : "close",
		mobile : {
        dblclickContent : function( current, event ) {
            return current.type === 'clickOutside' ? 'close' : true;
        }
    },

	});
});
```
下記が試してみたメディア設定の部分です。

```javascript
		mobile : {
dblclickContent : function( current, event ) {
            return current.type === 'clickOutside' ? 'close' : true;
        }
    },

```
シンタックスエラーは出ませんが何も状況は変わっておりません。

よろしくお願いいたします。