Trying to replicate custom titles in new version of Fancybox

Question

In the old version of Fancybox, I was able to find a code that would allow me custom titles for individual images. But upgrading to Fancybox v.2, I can't figure out how to update the function so it will still work. Yes, I'm a newbie. Help, or a link, would be greatly appreciated.

Old code...

<script type="text/javascript">
    $(document).ready(function() {

        $("a[rel=blanchard_group]").fancybox({
            'transitionIn'      : 'fade',
            'transitionOut'     : 'fade',
            'titlePosition'     : 'over',
            'titleShow'     : 'true',
            'overlayShow'       : 'true',
            'overlayColor'      : '#fff',
            'overlayOpacity'    : '0.9',
            'showNavArrows'     : 'true',
            'enableEscapeButton'    : 'true',
            'scrolling'     : 'no',
            'onStart':function(currentArray,currentIndex,currentOpts){
                var obj = currentArray[ currentIndex ];
                if ($(obj).next().length)
                this.title = $(obj).next().html();},
            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">' + title + '</span>';
            }
        });
    });
</script>

New code ...

    <script type="text/javascript">
$(document).ready(function() {
    $(".fancyproject").fancybox({
        prevEffect  : 'fade',
        nextEffect  : 'fade',
        nextClick   :  true,
        helpers : {
            title   : {
                type    : 'inside'
            },
            overlay : {
                opacity : 0.9,
                css : {
                    'background-color' : '#fff'
                }
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    });

});
</script>

Look at the original script where it says 'onStart' that is the javascript that sets the title. — The Muffin Man, Dec 08 '11 at 00:33
So I should change 'onstart' to 'beforeLoad' and 'titleFormat' to ? — 4rederick, Dec 08 '11 at 00:48
I tried that, and a lot of other things. Spent the last couple hours pouring through stackoverflow looking for answer, and nothing. All I want to do is be able to create a div that contains custom text that will appear instead of the default title when fancybox opens. I will hide the div with display:none with CSS so it does not appear on the site. Help please, or if you need more info in order to offer advice, please let me know. Thanks, everyone. — 4rederick, Dec 08 '11 at 03:13
Are you using a gallery? I mean, will every element of the gallery show a different custom title? .... or just want to open a single element with a different title from the one on the title attribute? — JFK, Dec 08 '11 at 03:27

score 1 · Answer 1 · edited May 23 '17 at 12:20

Thanks, JFK, for you answer in another post. It was what I was looking for. Much appreciated ...

https://stackoverflow.com/a/8425900/1084188

What I would do is to set the titles to appear in Fancybox in a hidden DIV so my tooltip will show a different content from the title in Fancybox:

<a rel="group" class="fancylink" href="images/01.jpg" title="default title 1">image 1</a>
<a rel="group" class="fancylink" href="images/02.jpg" title="default title 2">image 2</a>
<a rel="group" class="fancylink" href="images/03.jpg" title="default title 3">image 3</a>

and the Fancybox titles:

<div id="fancyboxTitles" style="display: none;">
<div>fancybox title one</div>
<div>fancybox title two</div>
<div>fancybox title three</div>

using this script:

$(document).ready(function() {
$(".fancylink").fancybox({ afterLoad : function() {this.title = $("#fancyboxTitles div").eq(this.index).html();}}); //fancybox}); // ready

Trying to replicate custom titles in new version of Fancybox

1 Answers1