0

i am working on a custom lightbox in which images next or previous is loaded via ajax calls. i want to achieve a effect before the ajax call is done so that the present image is rolled out before the ajax is called and the next image is loaded . here is my code for ajax

function loadimgagg(mipic){


var miid=$('#mipicview-overlay-content').attr('vwid')

var dataString = 'mipic='+ mipic+'&miid='+miid;

$.ajax({
type: "POST",
url: "eg.php",
data: dataString,
cache: false,

success: function(html){
$("#eg").html(html);
 }
 });

can anyone help me with this ?

4
  • Have you tried using the animation functions callback to call your ajax function. Take a look here jsfiddle.net/8Bcb7
    – Jeemusu
    Aug 10, 2012 at 8:57
  • thanks for the demo friend , i am just trying for the roll out effect but no sucess plus any other method execpt beforeSend Aug 10, 2012 at 8:58
  • oh, you said fadeout in your question...
    – Jeemusu
    Aug 10, 2012 at 9:01
  • yes ,but mainly i wanted to know about roll out as mentioned in question title too Aug 10, 2012 at 9:02

1 Answer 1

0

You may use the beforeSend callback in $.ajax :

$.ajax({
type: "POST",
url: "modules/gallery/miloader.php",
data: dataString,
cache: false,
beforeSend: function() {
// something here
},
success: function(html){
    $("#mipicview").html(html);
}
});

or you can do the effects before the ajax call :

function loadimgagg(mipic){
  var miid=$('#mipicview-overlay-content').attr('vwid')

  var dataString = 'mipic='+ mipic+'&miid='+miid;

 $('image').fadeOut( 100, function() { 
 $.ajax({
    type: "POST",
    url: "modules/gallery/miloader.php",
    data: dataString,
    cache: false,

    success: function(html){
        $("#mipicview").html(html);
    }
 });  
})
11
  • any other soltuion then of beforeSend ? Aug 10, 2012 at 8:55
  • when i try to use it before ajax call the effect dosen't even completes and nt image is loaded Aug 10, 2012 at 9:03
  • 1
    @SakshiSharma try using it with a callback; like the one above (Updated).
    – Vishal
    Aug 10, 2012 at 9:08
  • but what for the roll out effect i want to achieve Aug 10, 2012 at 9:14
  • You can just use animate instead of fadeOut, there are some great examples on the jquery site.
    – Jeemusu
    Aug 10, 2012 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.