jQuery - run code after scripts are loaded


Staff member
In my header I load scripts (I keep this scripts on my server, original links are added here just for you):

<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/mwheelIntent.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js">

Then on my footer I'm executing some code:

$(document).ready(function() {
            numOfPics = $('#gallery-wraper img').size();
            widthOfAll = 0;
            $('#gallery-wraper img').each(function() {
                imgWidth = $(this).width() + 20;
                widthOfAll += imgWidth;
            }); // end of each

            galleryPosition = $(window).height() / 2 - 250;
            $("#gallery").css("margin-top", galleryPosition);
});// end of document.ready()

I want it yo display my images horizontally and put it inside jScrollPane (<a href="http://jscrollpane.kelvinluck.com/" rel="nofollow">http://jscrollpane.kelvinluck.com/</a>)
But it displays my images horizontally after refresh only (or even after a few page refreshes in chrome). It looks like it tries to execute my code before page content is generated (its a wordpress theme) or before scroll libraries are loaded. What is wrong with my logic here? I'm using document.ready() so why it acts this way?