SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Call other javascript function from colorbox.js close function event.

    Hi,

    In my project I am using colorbox to call external files and show images.

    When I click on close button then following method from colorbox.js file get called.

    I want to call my custom javascript function (myJavascriptFunction() when close button is click and close popup window.
    Code:
    // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
    publicMethod.close = function () {
    	if (open && !closing) {
    		
    		closing = true;
    		
    		open = false;
    		
    		myJavascriptFunction(); // This is my javascript function
    		
    		trigger(event_cleanup, settings.onCleanup);
    		
    		$window.unbind('.' + prefix + ' .' + event_ie6);
    		
    		$overlay.fadeTo(200, 0);
    		
    		$box.stop().fadeTo(300, 0, function () {
    		
    			$box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide();
    			
    			trigger(event_purge);
    			
    			$loaded.remove();
    			
    			setTimeout(function () {
    				closing = false;
    				trigger(event_closed, settings.onClosed);
    			}, 1);
    		});
    	}
    };
    My custom function is written in same file as colorbox.

    Code:
    <link rel="stylesheet" href="include/colorbox/colorbox.css" />
    	<script src="include/colorbox/jquery.min.js" ></script>
    	<script src="include/colorbox/jquery-1.8.2.js" ></script>
    	<script src="include/colorbox/jquery.colorbox.js"></script>
    	<script>
    		//jQuery.noConflict(true);
    		$(document).ready(function(){
    			//Examples of how to assign the ColorBox event to elements
    			$(".group3").colorbox({rel:'group3', iframe:true, transition:"fade", width:"45%", height:"48%"});
    			$(".group4").colorbox({rel:'group4', iframe:true, transition:"fade", width:"37%", height:"55%"});
    		});
    
    		function myJavascriptFunction()
    		{
    			--------
    		}
    	
    	</script>

    Any Idea?

    - Thanks
    Zohaib.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi zohaib82,

    Try to implement following steps, they may help you.

    1. Try to add an id or class to that close button
    2. Write a click action which will call your function like
    $('#clsbtn').click(function () {
    myJavascriptFunction();
    });
    PHP Programming Itís more than just writing code

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many Thanks Jimmy.

    It works.


    Zohaib.


Tags for this Thread

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
  •