What is wrong with my external jQuery File?

Question

I am building a image slideshow. Currently, I have attached the event to a H1 element. Here is my code stored in a file main.js in a folder jq:-

UPDATED CODE:

(function($) {
    $.fn.browseImages = function(type) {
        var image = [];
        image[3] = "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg";
        image[2] = "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg";
        image[1] = "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg";

        var imageObject = $(this);
        var selection;

        if (type == "left") {
            for (var i=1; i < image.length; i++) {
                if (imageObject.attr("src") == image[i]) {
                    selection = i + 1;
                }
            }
            imageObject.attr("src",image[selection]);
        } else {
            for (var i=1; i < image.length; i++) {
                if (imageObject.attr("src") == image[i]) {
                    selection = i + 1;
                }
            }
            imageObject.attr("src",image[selection]);
        };
    }

})(jQuery);

$(function() { // <-- equivalent to $(document).ready(...)
    $("h1").click(function() {
        $('#image').browseImages("left");
    });
});

UPDATED CODE:

(THE INIT HAs BEEN cOMMENTEd HERE) Here is my jQuery in the header tag of HTML:-

<!-- Scripts -->
        <script src="http://rhnvrm.co.cc/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="jq/main.js" type="text/javascript" charset="utf-8"></script>
            <!--Initialize jQuery
            <script type="text/javascript">
                $(document).ready( function() {
                    init()
                });
            </script>
            -->

And here is the Image in the body tag whose src attr I am editing:-

<div id="imageholder">
                <img id="image" src='http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg' width="900px" height="500px"/>
            </div>

---

NOTE: I am a person who you can categorize as a NOOB in jQuery

Answer 1

You need to initialize an object or array called image before you can add items to it.

    var image = {};
    image[3] = "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg";
    image[2] = "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg";
    image[1] = "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg";

And if your function is the only one using image, I'd take it out of the function, and have it scoped in the IIFE:

(function($) {
    var image = {};
    image[3] = "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg";
    image[2] = "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg";
    image[1] = "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg";

    function browseImages(type) {
          // you could take `imageObject` out of this function as well if the
          //    element with the ID "image" never changes.
          //  v--------------------------------------------------------------
        var imageObject = $("#image");
        var selection;

        if (type == "left") {
            for (var i=1; i < Things.length; i++) {
                if (imageObject.attr("src") == Things[i]) {
                    selection = i;
                }  // <--- removed semi-colon
            }  // <--- removed semi-colon

              // v----- use the cached object
            imageObject.attr("src",image[selection]);
        } else {
            for (var i=1; i < Things.length; i++) {
                if (imageObject.attr("src") == Things[i]) {
                    selection = i;
                }  // <--- removed semi-colon
            }  // <--- removed semi-colon

              // v----- use the cached object
            imageObject.attr("src",image[selection]);
        }  // <--- removed semi-colon
    }


    init = function() {
        $("h1").click( function() {
            browseImages("left")
        });
    };
})( jQuery );

---

EDIT: After some clarification, here's a simpler solution:

(function($) {
    var image = [
        "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg",
        "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg",
        "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg"
        ];

    var imageObject = $("#image");
    var selection = 0;

    function browseImages(type) {

        if (type == "left") {
            selection = ++selection % image.length
        } else {
            selection = (selection || image.length);
            --selection;
        }
        imageObject.attr("src", image[selection]);
    }

    init = function() {
        $("h1").click(function() {
            browseImages("left")
        });
    };
})(jQuery);
jQuery(document).ready( init );

Answer 2

You use a closure to protect the global scope (which is good), but forget to provide external interfaces for the functionality.

It's not entirely clear from your code, but I presume what you want is something like this:

// inside your browseImages function
var imageObject = $(this);

// somewhere near the bottom
$.fn.browseImages = browseImages; // so that you can use it like 

And what your're doing in init() function doesn't really belong to the plugin that you are making. You can move the whole init function directly to $(document).ready(...)

UPDATE

Complete code for main.js

(function($) {
    $.fn.browseImages = function(type) {
        var image = [];
        image[3] = "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg";
        image[2] = "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg";
        image[1] = "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg";

        var imageObject = $(this);
        var selection;

        if (type == "left") {
            for (var i=1; i < Things.length; i++) {
                if (imageObject.attr("src") == Things[i]) {
                    selection = i;
                }
            }
            imageObject.attr("src",image[selection]);
        } else {
            for (var i=1; i < Things.length; i++) {
                if (imageObject.attr("src") == Things[i]) {
                    selection = i;
                }
            }
            imageObject.attr("src",image[selection]);
        };
    }

})(jQuery);

$(function() { // <-- equivalent to $(document).ready(...)
    $("h1").click(function() {
        $('#image').browseImages("left");
    });
});