Running photocradle with jQuery and Asp.net

Running photocradle with jQuery and Asp.net

I am trying to generate a photocradle slideshow inside the jQuery function by instantiating a div and calling photocradle to generate the photocradle slideshow with the photocradle class in div. It works when I place the code after the closing </form> tag and before the closing </body> tag in the aspx page, but when I wrap the code inside a secondary function such as

$(document).ready(function () {
function myfunction(){
rest of the code...
}
});.

The photocradle slideshow no longer shows up.
What I want is to be able to call the jQuery function when I click a button so I can instantiate a div with a slideshow. This is trying to call the jQuery function by wrapping it inside a javascript function myfunction so I can call it from the button click. The second attempt is to call it using c# registerstartupscript, but the slideshow also does not show up even though the Ajax part of jQuery code is working, so I am out of idea as to how to get the slideshow to show up with the code $('.photocradle1').photocradle(params1, options1); since I am new to jQuery.

            var s = @"       
            $(document).ready(function () {

            var elm = '<div class=""photocradle1"" ' +
                'style=""width: 520px; height: 340px; margin: 170px 0px 0px 120px; float: left"">' +
                '</div>';
            $(elm).appendTo(""#f"");
            $("".photocradle"").remove();

            $.ajax({
                type: 'POST',
                url: './Todolist.aspx/GetDate',
                data: '{}',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    return confirm(msg.d);
                }
            });

            var options1 = {
                firstImageIndex: 0,
                borderWeight: 4
            },
          params1 = {
          sources: [
            {
                thumbnail: '../images/thumbnails/banner2.jpg',
                preview: '../images/previews/banner2.jpg',
                original: '../images/originals/banner2.jpg',
                title: 'Woods troll'
            }
        ]
    };
$('.photocradle1').photocradle(params1, options1);
});";
            PageContext.RegisterStartupScript(s);



The PageContext is from FineUI. The above code tries to call jQuery from c# and only the Ajax part is working. I am not sure if it is because I have to insert the <script type="text/javascript" src="../builds/jquery.photocradle-0.4.2.min.js"></script> code somewhere to get the photocradle reference, but I assume it can find it in the head tag. The below code works in the aspx page when placed after the closing </form> tag and before the open </body> tag.

</form>

<script type="text/javascript">

 $(document).ready(function () {


            var elm = '<div class="photocradle" ' +
                'style="width: 520px; height: 340px; margin: 170px 0px 0px 120px; float: left">' +
                '</div>';
            $(elm).appendTo("#f");

            $.ajax({
                type: "POST",
                url: "./Todolist.aspx/GetDate",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    return confirm(msg.d);
                }
            });

    params1 = {
        sources: [
            {
                thumbnail: '../images/thumbnails/banner2.jpg',
                preview: '../images/previews/banner2.jpg',
                original: '../images/originals/banner2.jpg',
                title: 'Woods troll'
            }
        ]
    };
            $('.photocradle').photocradle(params1, options1);
        });
    </script>
</body>
</html>

Let me know how to generate a photocradle slideshow by either using the javascript or c# call with a button click in asp.net.