Question

I’m using this brilliant solution for showing a fancybox as a result of a POST request.

The problem is that I don’t know how to customize the fancybox behaviour.

How to show a spinning animation (or similar) while the ajax is performed?

How to set a title/show the content of the fancybox as (stylized) html?

Answer 1

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>';
} 


function showResponse(responseText){
  //first of all hide the spinning animation div
  //then process the response as you like
  $.fancybox({
            'content'               : responseText,
        'titlePosition'     : 'inside',
        'titleFormat'       : formatTitle
           });
  }

function showspinningAnimation(iddiv_container){
  //this function is called before the ajax call    
  //put your animation spinning or whatever in a div
}

var options = {       
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse 
}; 

$(document).ready(function() {
   $("#myForm").ajaxForm(options);        
});    

Explain:

formatTitle: This function format the title for your fancybox
showspinningAnimation : In this function put a spinning .gif (as example) in a div showing the loading…