Hi,

I am new to Umbraco and need help to resolve following

I wanted to create an image slider with the individual link and hence written following code.

<script type="text/javascript">

        // Following is the master list of URLs on the home page. Use the same while editing


        var URLS = new Array();



        URLS['a1.jpg'] = "a1.aspx";
        URLS['b1.jpg'] = "b1.aspx";
        URLS['c1.jpg'] = "c1.aspx";

        URLS['a2.jpg'] = "a2.aspx";
        URLS['b2.jpg'] = "b2.aspx";
        URLS['c2.jpg'] = "c2.aspx";

        URLS['a3.jpg'] = "a3.aspx";
        URLS['b3.jpg'] = "b3.aspx";
        URLS['c3.jpg'] = "c3.aspx";
 

        var LINKTEXT = new Array();


        LINKTEXT['a1'] = "Buy A1";
        LINKTEXT['b1'] = "Buy B1";
        LINKTEXT['c1'] = "Buy C1";

        LINKTEXT['a2'] = "Buy A2";
        LINKTEXT['b2'] = "Buy B2";
        LINKTEXT['c2'] = "Buy C2";

        LINKTEXT['a3'] = "Buy A3";
        LINKTEXT['b3'] = "Buy B3";
        LINKTEXT['c3'] = "Buy C3";

       

        $(function () {

            //Default first page selection
            $('#link\\.1').addClass("selected");

            //Function to change the images
            function Change(id) {

                $('img[id="image_a"]').attr("src", "Images/a" + id + ".jpg");
                $('img[id="image_b"]').attr("src", "Images/b" + id + ".jpg");
                $('img[id="image_c"]').attr("src", "Images/c" + id + ".jpg");

                document.getElementById('ilink_a').innerHTML = LINKTEXT['a' + id].toString()
                document.getElementById('ilink_a').href = URLS['a' + id + '.jpg'].toString()


                document.getElementById('ilink_b').innerHTML = LINKTEXT['b' + id].toString()
                document.getElementById('ilink_b').href = URLS['b' + id + '.jpg'].toString()

                document.getElementById('ilink_c').innerHTML = LINKTEXT['c' + id].toString()
                document.getElementById('ilink_c').href = URLS['c' + id + '.jpg'].toString()
            }

            //Number links click logic
            $('a[id^="link"]').click(function () {
                //alert($(this).attr('id'));

                $('a[id^="link"]').removeClass("selected");
                $(this).addClass("selected");

                var id = $(this).attr('id');
                var array = id.split(".");

                Change(array[1]);
            });

            //Previous click logic
            $("#previous").click(function () {
                var id = $('a.selected').attr('id');

                var array = id.split('.');

                id = parseInt(array[1]);
                id = --id;

                if (id < 1)
                { id = 3; }

                $('a[id^="link"]').removeClass("selected");
                $('#link\\.' + id.toString()).addClass("selected");

                Change(id);
            });

            //Next click logic
            $("#next").click(function () {
                var id = $('a.selected').attr('id');

                var array = id.split('.');

                id = parseInt(array[1]);
                id = ++id;

                if (id > 3)
                { id = 1; }

                $('a[id^="link"]').removeClass("selected");
                $('#link\\.' + id.toString()).addClass("selected");

                Change(id);
            });

            
            Change(1); //While loading the page send 1 to function change
        });
    
    </script>
    <!-- code end for slideshow-->

In the above code read  $('img[id="image_a"]').attr("src", "Images/a" + id + ".jpg");

Whenthe user clicks next the "id" is incremented and based on the same the image is fetched.

However in this case, I cannot upload the images using Umbraco Image media type.

I need help to convert this so that i can upload the images from Umbraco upload.

Thanks in advance.