Scroller Doesn't Animate in Page Loaded into a Div, Only works on its own page

Please help me.

Im trying to get this thumbnail scroller to animate:

开发者_运维百科

http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_vertical.html

http://manos.malihu.gr/jquery-thumbnail-scroller

I get it working perfectly fine on the page I have it embedded on. Using this code:

<!--Thumbnail Scroller-->
<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>

    <script>
    $(window).load(function() {
        /* 
        ThumbnailScroller function parameters: 
        1) id of the container (div id) 
        2) thumbnail scroller type. Values: "horizontal", "vertical"
        3) first and last thumbnail margin (for better cursor interaction) 
        4) scroll easing amount (0 for no easing) 
        5) scroll easing type 
        6) thumbnails default opacity 
        7) thumbnails mouseover fade speed (in milliseconds) 
        */
        ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);
    });
    </script>
    <!--End Thumbnail Scroller-->

I load the necessary files in my html with:

<!--JQuery-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!--Thumbnail Scroller-->
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

The 2 pages are in the same directory.

I have the sets of code identical on both pages, the one with the embedded scroller, and the page thats loading that page into a div.

I cannot get it to work on the parent page thats loading it into a div, and thats where I really need it to work.

Not sure how much this matters, but here is the code on the parent page im using to load my external pages:

<!--Page Loading Mechanism-->
<script type="text/javascript">
    $( document ).ready( function() {
        $( 'a.dynamicLoad' ).click( function( e ) {
            e.preventDefault();   // prevent the browser from following the link
            e.stopPropagation();  // prevent the browser from following the link

            $( '#MainDivBeingTargeted' ).load( $( this ).attr( 'href' ) );

        });
    });


</script>
<!--End Page Loading Mechanism-->

Can anyone tell me what is wrong and how i can fix this issue? Ive been fighting with this for a week now and still cant figure it out.

---

I'm pretty sure this is because you're loading the content into a <div> and then using $(window).load() to execute code, presumably when the content has been loaded into that <div>.

This isn't how the load() event handler works. According to the documentation:

This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

So you can't use the load event handler to run code in HTML that has been loaded into a <div>. Instead, since you're loading content into a <div> using AJAX, you can just use the callback parameter of the load() function:

$( document ).ready( function() {
    $( 'a.dynamicLoad' ).click( function( e ) {
        e.preventDefault();   // prevent the browser from following the link
        e.stopPropagation();  // prevent the browser from following the link

        $( '#MainDivBeingTargeted' ).load( $( this ).attr( 'href' ), function() {
            /* Content is now loaded */
            ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);
        });

    });
});