Custom Fancybox v.2タイトルの位置付け

Question

イメージの左側にファンシーボックスタイトルを配置しようとしています。

http://www.josephfrederick.comで、CSSをハックしてタイトルを移動することができましたが、Fancyboxは新しい幅を計算していないため、ライトボックスは中央に配置されていません。これは、小さな画面で水平の画像に大きな問題を引き起こします。

私はFancyboxバージョン1.4（このサイトのように：http://sarahewain.com/index.php）でそれを行うことができましたが、物事はFancybox 2にあなたが提供することができます任意の助け

感謝を変更しました。そして、アドバイスを提供するために他に何かが必要な場合はお知らせください。ここで

は、小型の説明は次のようになります...対応するCSSです

.fancybox-outer { 
     background: white repeat scroll 0% 0%; 
     text-shadow: none; 
    margin-left:-180px; /*must match A*/ 
    border: 0px solid #000; 
} 

.fancybox-inner { 
    position:relative; 
    left:180px; /*must match A*/ 
} 

.fancybox-image { 
    padding-left:0px; 
} 

.fancybox-prev { 
    top:30%; 
    left:-220px; 
    right:auto; 
     width: 36px; 
    height: 111px; 
    background: url(images/arrow_prev.png) no-repeat scroll 0% 0%; 
    opacity: 0.3; 
    filter:alpha(opacity=30); 
} 

.fancybox-next { 
    top:30%; 
     width: 36px; 
    height: 111px; 
    left:auto; 
    right:-38px; 
    background: url(images/arrow_next.png) no-repeat scroll 0% 0%; 
    opacity: 0.3; 
    filter:alpha(opacity=30); 
} 

.fancybox-next:hover, .fancybox-prev:hover { 
    opacity: 1.0; 
    filter:alpha(opacity=100); 
} 

.fancybox-next span, .fancybox-next:hover span { 
    display:none; 
} 

.fancybox-prev span, .fancybox-prev:hover span { 
    display:none; 
} 

.fancybox-title { 
    position:absolute; 
    width:160px; /*must match B*/ 
    left:-160px; /*must match B*/ 
    bottom: 20px; 
} 

Answer 1

JS

jQuery(".my_class").fancybox({ 

    margin : [0, 0, 0, 160], 

    helpers : { 
     title : { 
      type : 'outside' 
     } 
    } 
}); 

CSSそれでもこれを戦っ

.fancybox-title { 
    position:absolute; 
    width:160px; 
    left:-160px; 
    bottom: 20px; 
}