2

私はfancyboxversion: 2.1.3を使用しており、私がやろうとしていることは次のとおりです:

  1. 幅と高さを 600px x 400px 固定に設定します。
  2. 画像がポップアップ ボックスよりも小さい場合は、中央に配置し、サイズを変更しないでください。

今のところ、これは私の現在の設定です:

index.html

$('.fancybox-buttons').fancybox({
    minWidth: 600,
    maxWidth: 600,
    minHeight: 400,
    maxHeight: 400,
    width: 600,
    height: 400,
    autoScale : false,
    fitToView : false,

jquery.fancybox.js

$.extend(F, {
// The current version of fancyBox
version: '2.1.3',

defaults: {
padding : 15,
margin  : 20,

width     : 600,
height    : 400,

minWidth  : 600,
minHeight : 400,

maxWidth  : 600,
maxHeight : 400,

autoSize   : false,
autoHeight : false,
autoWidth  : false,

autoResize  : false,
autoCenter  : !isTouch,
fitToView   : false,
aspectRatio : false,

結果は次のようになります: http://i.imgur.com/WX2ak.jpgしかし、次をクリックするとhttp://i.imgur.com/1HXhe.jpg .. サイズが固定されていないことがわかります主な問題です..

画像が小さい場合、ポップアップと画像サイズは次のようになりますここに画像の説明を入力

P/s : ファンシーボックスを変更しようとするのはこれが初めてで、少し混乱するかもしれません。

4

1 に答える 1

0

私には「醜い方法」がありますが、オプションの適切な組み合わせを探す時間がありません。そして、jquery-options を追加します。

    fitToView : false,
    wrapCSS: 'myclass'

スタイルを追加します。

    .myclass, 
    .myclass .fancybox-skin 
    {
        width: 600px !important;
        height: 400px !important;
        text-align: center;
    }
    .myclass .fancybox-skin 
    {
        line-height: 400px;
    }
    .myclass .fancybox-outer {
        height: inherit;
        width: inherit;
    }
    .myclass .fancybox-inner {
        display: inline-block;
        vertical-align: middle;
    }
于 2014-11-07T10:03:15.897 に答える