CODEWITHSUNDEEP
jqueryhtmlcssfancybox
Simon
Simon

Reputation: 237

Fancybox custom title not working titleFormat function

I am trying to implement a custom title into my fancybox lightbox and it doesn't seem to be calling the function. I have also tried directly copying and pasting the example from the fancybox website (http://fancybox.net/blog) and that doesn't seem to work either and was wondering if anyone could help me.

My code is as follows: 

function formatTitle(title, currentArray, currentIndex, currentOpts) {
        return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
        console.log('Custom fancyTitle shown');
      }

      $('.mosaic-overlay').fancybox({             
        custom_counterText: 'Image {#index#} of {#count#}',
        'titlePosition' : 'inside',
        titleFormat: formatTitle
      });

With the html:

<li>  <!--Circle--> 
  <div class="mosaic-block circle">
    <a title="Custom Title 1"  rel="aapGroup" href="<?php bloginfo('template_directory'); ?>/img/webProjects/aapBlog.jpg" class="mosaic-overlay ">&nbsp;</a>       
    <div class="mosaic-backdrop"><img src="<?php bloginfo('template_directory'); ?>/img/screenshots/AAPBlog.png"/></div>
  </div>
</li>

The page I am trying to achieve this on is www.alivedesign.co.uk , in the 'Web Projects' bit and is the first box.

Thanks for your help!

Upvotes: 1

Views: 3203

Answers (1)

Simon
Simon

Reputation: 237

Turns out I was using Fancybox 2.1.3, and the method is no longer supported by that version. I solved the solution using /r/webdesign/ which can be seen here...

http://www.reddit.com/r/webdesign/comments/14bl6r/fancybox_custom_title_not_working_titleformat/

Thanks for your help though JFK.

Upvotes: 1

Related Questions