Namespace issue when calling function in one .js file from another .js file

Question

In an attempt to make a swipe-able slideshow for many images, I am attempting to stitch together two plugins, Swipe.js and lazyloader.js. I want to have the slideshow timer event from the Swipe plugin call the update function inside of Lazyloader. From researching, it seems my problem appears to be one of namespace; that is, Swipe doesn't know about the stuff inside Lazyloader, and therefore cannot call the function.

1. Given the following code, am I understanding my problem correctly?
2. If so, how can I get Swipe to access Lazyloader's functions?

Thank you.

FOLLOW UP: After Q&A with Cheeso, I see now that I was asking the wrong question in regard to what I ultimately needed to happen. I add this comment to avoid having any future readers getting confused because of my bad question. This is not about namespace or even about accessing a private function, which shouldn't be done. This thread is utimately about how inadvisable it may be to try and frankenstein libraries together if you don't really know what you're doing. ; ) END FOLLOW UP

The callback in swipe.js:

this.callback = this.options.callback || function() {

the script called inside the html:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script src='js/swipe.js' type="text/javascript"></script>

<script type="text/javascript">$(document).ready(function() {


    function myAlert(){
        //call a function from inside jquery.lazyload.js
        alertMe();
    }

    //instantiate a swipe object and pass in a bunch of 
    //options, especially "callback" which fires on every slide change
    window.mySwipe = new Swipe(document.getElementById('slider1'), {
        startSlide: 0,
        speed: 1000,
        auto: 5000,
        callback: function(){
            myAlert();
        }
    });
    // run lazyload on every VISIBLE image with the class "lazy" on load, and on every click
    $("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});
    }); 
</script>

jquery.lazyloader.js:

 //outside of the container below, I can be called by myAlert()
 function alertMe() {
        alert("it worked!");
    }


(function($, window) {

    $window = $(window);

    $.fn.lazyload = function(options) {

    ///
    ///Here be a bunch of lazyloader stuff
    ///

    //I work when above, but once I am inside this container, I cannot be called by myAlert(), 
    //and I will error as 'not a valid function'
    function alertMe() {
        alert("it worked! Even inside of this container! ");
    }


})(jQuery, window);

Answer 1

Could be as simple as this: to set the callback option on the Swipe instance to point to a function that does LazyLoader things. This is just a guess, because I don't know swipe, but I looked at the code dump and saw that callback function; it appears to be the key point of extension for Swipe.

If I'm correct, then it's not a namespace issue at all. It's just what you said - knitting together disparate libraries or modules. Typically a js module will have an extension point or two that allows this. I'm guessing Swipe's extension point is that callback.

Maybe something like this:

function myFn() {
  // do whatever lazyload thing you want to do, here. 
}

$(document).ready(function() { 
    var slider1 = new Swipe(document.getElementById('slider1'),
                            {startSlide: 0,
                             speed: 1000,
                             auto: 10000,
                             callback:myFn}); 
    $("img.lazy").lazyload({event: "click"}); 
}); 

You may have to refactor to make either slider1 or some other variables global, so they are accessible outside of the doc.ready function.

FOLLOWUP

You have this:

<script type="text/javascript">
    $(document).ready(function() {   
        function myAlert(){   
            //call a function from inside jquery.lazyload.js   
            alertMe();   
        }   

        //instantiate a swipe object and pass in a bunch of    
        //options, especially "callback" which fires on every slide change   
        window.mySwipe = new Swipe(document.getElementById('slider1'), {   
            startSlide: 0,   
            speed: 1000,   
            auto: 5000,   
            callback: function(){   
                myAlert();   
            }   
        });   
        $("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});   
    });    
</script>   

There are several problems with that code. It should be closer to this:

<script type="text/javascript">
    function myThing(){   
        // ** Do something useful here. This may involve calling
        // ** other functions.  Those functions need not be defined
        // ** within jquery.lazyload.js.
    }   

    $(document).ready(function() {   
        //instantiate a swipe object and pass in a bunch of    
        //options, especially "callback" which fires on every slide change.

        // ** There is no need, as far as I can tell, to assign the
        // ** output to a global variable. (window.mySwipe).  In fact, given
        // ** the code you have, there is no need to retain the output at all. 
        new Swipe(document.getElementById('slider1'), {   
            startSlide: 0,   
            speed: 1000,   
            auto: 5000,   
            // ** Just use the function name. You don't need to define
            // ** a new anonymous function to wrap around it. 
            callback: myThing
        });   
        $("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});   
    });    
</script>   

---

MORE

I suppose that what you want is to lazily load the "next few" images so that they are available as the user swipes through a list. From what I read (briefly), you need to call lazyload() only once, for all images on the page. If your images are inside a "container", then specify the container option on lazyload. (See http://www.appelsiini.net/projects/lazyload) The plugin then monitors the viewport for that container and loads images as necessary. There is no need to call "lazyload" again, no need for a callback.

If this is not working, then Swipe and jquery.lazyload.js may not be usable together, because of assumptions made in lazyload. In that case, you can still get lazy-loading, but you need to do it yourself.

To do that, eliminate lazyload.js completely. Then, in the Swipe callback, do what you would like lazyload to have done: set the src attribute on the "next" image. Setting the attribute will cause the webpage to load the image. To get lazy loading, in the original state the src attributes on all images must be blank, or set to some fixed image URL, before the swiping begins. Now, you may ask: in the callback how will you know which image to load? And which URL to set into the src attribute? That is up for you to determine. I presume there is some way to get the appropriate information from Swipe in that callback.

If you don't understand this, then you need some instruction or some further reading to establish the basic understanding of how browsers handle images. From my reading, you do not need Swipe to call lazyload's update().

Some general suggestions:

• for any module, you should not try to call functions defined internal to that module. They are internal for a reason.

• for any module, you should not modify its source code unless you are very certain you know what you are doing. If you are poking around and trying things, put the code in your own module. Your own javascript code belongs in the web page, or in a separate module referenced by the webpage.

• you should probably not be defining functions within $(document).ready() unless you have a good reason.

• read the documentation. I had never heard of Swipe or lazyload before today. The suggestions I made here about them - specifically, regarding the callback on Swipe, and the container option on lazyload - came from me reading the doc for how to use them.