Front End Programming
  1. ホーム
  2. ブログ一覧
  3. FancyBox・iframeの高さの変更方法

FancyBox・iframeの高さの変更方法

JavaScriptjQuery

jQueryでPopupWindowを開くというのを昨日メモしましたが、ライブラリーを使ってもっとかっこよくしたい!ということでFancyboxがお勧めということで使ってみました。ギャラリーや動画などもかっこよく開けて良い感じでした。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

セブ島在住の気ままなフリーランスエンジニア。テクニカルディレクター・エンジニア講師・ブリッジSEを経て今に至る。CMS concrete5エバンジェリスト。テックブログ以外も「磨耗しない人生の選択」や「海外生活」のライフスタイルについて発信。好きなものは肉とビール。

Read More

fancyBoxをDLしてみよう

fancyBoxはクリックするとギャラリーや、動画などをポップアップ表示できる便利なJQueryライブラリーです。

Fancybox deompage

ZIPを解凍してcateId: $1に外部ファイルをおきます。

クリックしても反応しない!?

  • jQuery.fancybox.js
  • jQuery.fancybox.css
  • jQuery.js(軽量タイプのjQuery.min.js使用します)

jQuery.jsは面倒なので外部ファイルはおかずGoogleからとってきました。もちろんZIP内のものを使ってもOKです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
<script src="jquery.fancybox.js">
</script>
<link href="jquery.fancybox.css" media="screen" rel="stylesheet" type="text/css">

source内にある素材をそのまま使う場合、必要に応じてCSSからパスを書き換えておくとよいです。 ほとんどの素材はbackground(背景)で入ってます。

background: url('fancybox_loading.gif') center center no-repeat;
// 以下に書き換える
background: url('../img/fancybox_loading.gif') center center no-repeat;

通常のFancybox。内にJavascript、htmlにはクラスfancyboxにするだけ。

<!--javascript-->
<script>
    $(document).ready(function() {
        $('.fancybox').fancybox();
    }
</script>
<!--html-->
<a class="fancybox" href="1.jpg"   title="ねこの画像"><img src="1_s.jpg" alt="" /></a>

iframeの高さがなぜか設定できない

困ったことにfancyboxでiframeを使用しなければならなかったのですが、高さがなぜか設定できないことにはまってしまいました。

ネットで検索したら「‘autoScale’ : false」に設定しろというのを多く見かけましたが、まったく効きません(笑)あちこち検索した結果、「‘autoSize’ : false」に変更したらうまくいきました。

ネットの情報って検証した内容か不明、そして情報が古い可能性もあるので要注意ですね。。。

<script>
$(document).ready(function() {
    $('.fancybox').fancybox({
    'type' : 'iframe',
        'width' : 500,
        'height' : 400,
    'scrolling' : 'no',
        'autoSize' : false
    });
});
</script>

WidthとHeightは%でも指定できます。

後はfancyboxを設定したい要素のタグにdata-fancybox-type=“iframe”を追記します。これでオッケー!

<li><a class="fancybox fancybox.iframe" href="iframe.html"  data-fancybox-type="iframe">Iframe</a></li>

まとめ

fancybox本当に便利なのでいろいろ活用しようと思います。

関連記事もあわせてお読みください

Web制作に関する人気の記事

海外移住・ライフスタイルに関する人気の記事

キャリアアップ・転職に関する人気の記事