Custom Fancybox v.2 title positioning

Question

Trying to place Fancybox title to the left of the image.

You can see at http://www.josephfrederick.com that I was able to hack the CSS and move the title, but Fancybox is not calculating the new width and thus the lightbox is not centered (instead being way left of center). This causes big problems with horizontal images on smaller screens.

I was able to do it in Fancybox version 1.4 (like this site: http://sarahewain.com/index.php ), but things have changed in Fancybox 2.

Thanks for any help you can offer. And let me know if you need anything else to offer advice.

Here is the corresponding 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;
}