SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    276
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show lightbox after function completes

    Hi.

    I am using the colourbox jquery plugin for my light boxes and I want to display a lightbox after a current function finishes, is this possible?

    My current code is
    Code:
     function(data)
    {
    	var obj = jQuery.parseJSON(data);
    	if(obj.result=="failure")
    		{
    			//show the message in the div with a red background
    			$(".bookingResult").addClass("classroomExpertError");
    			$(".bookingResult").html(obj.Message);
            			$('.bookingResult').show('slow', function()
    			{setTimeout(function(){$('.bookingResult').hide('slow');									}, 3000); // <-- time in milliseconds 
                                                });
    		}
    	else
    		{
    			//show the message in the div with a green background
    			$(".bookingResult").addClass("classroomExpertSuccess");
    			$(".bookingResult").html(obj.Message);
            			$('.bookingResult').show('slow', function()
    				{setTimeout(function(){$('.bookingResult').hide('slow');}, 3000); // <-- time in milliseconds 
    				});
    		}
    				
    			});
    I trigger the light box with this line of code: $(".ajax").colorbox();

    Im trying to get the light box to show after the the settimeout has faded the div and I just cant manage it. can any one help me out.

    Cheers
    Chris

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi Chris,

    What you'll want to do is put your call to the colorbox() in a callback that gets executed after the .bookingResult is hidden.

    I've taken the liberty to refactor your code a little bit as well. It seemed that some of the code in the if/else clauses was the same, so I've moved it outside, this way it avoids some duplicate code.

    Code javascript:
    function(data) {
        var obj = jQuery.parseJSON(data);
     
        if(obj.result=="failure") {
            //show the message in the div with a red background
            $(".bookingResult").addClass("classroomExpertError");
        }
        else {
            //show the message in the div with a green background
            $(".bookingResult").addClass("classroomExpertSuccess");
        }
     
        // ##
        //since this code is common, we can put it outside of the if/else
        // ##
        $(".bookingResult").html(obj.Message);
        $('.bookingResult').show('slow', function() {
            setTimeout(
                function(){
                    $('.bookingResult').hide('slow', function() {
                        // ##
                        //this callback will be executed after the bookingResult is hidden
                        // ##
                        $(".ajax").colorbox();
                    });
                },
                3000 // <-- time in milliseconds 
            ); 
        });
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •