jQuery customize fancybox with ajax call
I'm using this brilliant solution for showing a fa开发者_JAVA技巧ncybox 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?
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...
精彩评论