script change to run at later moment

[turpentyne]

This script is set to run automatically. The syntax is stuff I'm not used to. How can I change this script to run at a later point? Such as when an image loads. Or another delayed point from when the page it's on is loaded in with ajax. Like this, it won't work:

I tried to change "document ready" section to when an image loads at the bottom of the page, but it didn't work either. I did something like: "$('img #trigger').ready(function() { ... but with no success.

The guts of the script seem irrelevent - if I delete everything but the alert('function is running');, it still doesn't run.

if I put it in the parent index.php file, the alert will run, but the rest of the script does nothing.

<script type="text/javascript" language="javascript">
        (function($, window, document) {

    var $doc = $(document),
        $win = $(window);
        wWidth = $win.width();

 //tried window.onload = function() - also didn't work



   $(document).ready(function() {
   alert('function is running');

                function reset() {

            timer = setInterval(function(){
                index++;

                if (index>=$img.length) {
                    index=0;
                }

                $current=$paging.eq(index);
                move();
            }, 8000);
        }


        if ( $('.slideshow').length ) {
            var h = 532;
            var $img = $('.slideshow .carousel img');
            var $paging = '';
            var $carousel = $('.slideshow .carousel div');

            if ( $('.residence-slideshow').length ) {
                h = 644;
            }


            $carousel.width(($img.length * 1200)+60);

            for (var i=0; i<$img.length;i++) {
                var c = i===0?' class="selected" ':'';
                $paging += '<a href="#" '+c+'></a>';
            }

            $paging = $($paging);

            var index = 0;
            var $current = $paging.eq(index);
            var timer = false;

            $('.slideshow-paging').append($paging);


            $paging.on('click', function(e){
                e.preventDefault();
                index = $paging.index(this);
                $current=$(this);
                move();
                reset();
                return false;
            });

            $('.slideshow .arrows').on('click', function(){
                index = $(this).hasClass('arrows-left')?index-1:index+1;
                index = (index<0)?$img.length-1:(index>$img.length-1?0:index);
                $current=$paging.eq(index);
                move();
                reset();
            });


            $img.on('mouseover', function(){
                clearInterval(timer);
            })
            .on('mouseout', reset);


            reset();
        }

        if ( $('.places-slideshow').length ) {
            $('.places-slideshow .carousel').fadeIn().carouFredSel({
                align: 'left',
                responsive: true,
                items: {
                    visible: 1
                },
                scroll: {
                    items: 1,
                    fx: 'directscroll',
                    duration: 500,
                    timeoutDuration: 5000,
                    pauseOnHover: true,
                    onAfter: function( data ) {
                        data.items.visible.find('.slide-text').fadeIn('slow');

                        setTimeout(function() {
                            data.items.visible.find('.slide-text').fadeOut('slow');
                        }, 4500);
                    }
                },

                auto: {
                     timeoutDuration: 3500,
                     delay: 3500
                },


                prev: {
                    key: 'left',
                    button: '.places-slideshow .prev-slide'
                },
                next: {
                    key: 'right',
                    button: '.places-slideshow .next-slide'
                },


                onCreate: function() {
                    var firstRound = $(this).find('.slide:eq(0) .slide-text');

                    firstRound.fadeIn('fast');

                    setTimeout(function() {
                        firstRound.fadeOut('slow');
                    }, 3350);
                }
            });
        }
    });

}(jQuery, window, document));
        </script>

[turpentyne]

Aha!

So, I didn't know that jquery ajax calls will convert all jquery in the loaded page to text for some IE issues. So I found a solution with .getscript. I went back to the page that loads the content, and added in the two scripts that way, like this:

$(function() {

    if(Modernizr.history){

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("#main_nav").delegate("a", "click", function() {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });

    function loadContent(href){
        $mainContent
                .find("#guts")
                .fadeOut(700, function() {
                    $mainContent.hide().load(href + " #guts", function() {
                        $mainContent.fadeIn(300, function() {

                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("#main_nav a").removeClass("current");
                        console.log(href);
                        $("nav a[href$="+href+"]").addClass("current");

                        // added the two 'getscripts' here to use the files here..

                            $.getScript("js/carousel2.js", function(data, textStatus, jqxhr) {
                                console.log(data); //data returned
                                console.log(textStatus); //success
                                console.log(jqxhr.status); //200
                                console.log('Load was performed.');
                                });

                            $.getScript("js/jquery.carouFredSel-6.2.1-packed.js", function(data, textStatus, jqxhr) {
                                console.log(data); //data returned
                                console.log(textStatus); //success
                                console.log(jqxhr.status); //200
                                console.log('Load was performed.');
                                }); 

                    });
                });
    }

    $(window).bind('popstate', function(){
       _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
       loadContent(_link);
    });

} // otherwise, history is not supported, so nothing fancy here.


});