Пользовательское позиционирование Fancybox v.2

Question

Попытка разместить заголовок Fancybox слева от изображения.

Вы можете видеть на 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 1002 *

jQuery(".my_class").fancybox({

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

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

CSS

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