Parallax effect on <script> block

JavaScript
1

I am trying to apply a parallax effect to a script block which rotates images around on a pageload basis. It used to work when the content of the HTML div was a static <img>. Because the Javascript looks for $('#parallaxical img').css which isn’t being used anymore due to the replacement of the static <img> with Randomize() my Parallax effect does not work anymore. I have tried changing around a great deal of things without success.

How do I let the “Header Parallax Effect” script look for the new dynamic <script> block instead of the previous <img>?

    <div class="inner" id="parallaxical">
         <script type="text/javascript">Randomize()</script>
    </div>

    #parallaxical {
      width: 100%; height: 300px; overflow: hidden; display: block; position: absolute;
    }
    #parallaxical img {
      width: 100%; height: auto; min-height: 300px !important; min-width: 1280px !important;
    }
    #parallaxical h2 {
      margin: -20px 0px 0px; top: 50%; width: 100%; text-align: center; position: absolute;
    }
    #parallaxical a {
      padding: 0px 20px; color: rgb(221, 221, 221); letter-spacing: 1px; font-size: 24px; background-color: rgba(0, 0, 0, 0.7);
    }
    #parallaxical a:hover {
      color: rgb(238, 238, 238);
    }

    /*Header parallax effect
    ======================================================*/
    (function($){
      $(document).ready(function(){
        $(window).scroll(function(){
          var window_scroll_position = $(this).scrollTop();
          var parallax_value = window_scroll_position/4;
    
          $('#parallaxical img').css({
            '-webkit-transform': 'translateY('+ parallax_value +'px)',
            '-moz-transform': 'translateY('+ parallax_value +'px)',
            '-o-transform': 'translateY('+ parallax_value +'px)',
            '-ms-transform': 'translateY('+ parallax_value +'px)',
            'transform': 'translateY('+ parallax_value +'px)'
          });
        });
        $('#parallaxical a').click(function(e){
          var title = $(this).attr('title');
          _gaq.push(['_trackEvent', 'Takeovers', 'Clickthrough to Page', title]);
        });
      });
    })(jQuery)
    
    /*Header rotate
    ======================================================*/
    function Randomize() {
        var images = new Array("images/banner/banner1.jpg","images/banner/banner2.jpg","images/banner/banner3.jpg","images/banner/banner4.jpg");
        var imageNum = Math.floor(Math.random() * images.length);
        document.getElementById("parallaxical").style.backgroundImage = "url('" + images[imageNum] + "')";
        document.getElementById("parallaxical").style.backgroundSize = 'cover';
    }
    
    window.onload = Randomize;

EDIT: For my age I am losing quite a bit of hair over this (perhaps simple) problem. I am not a web developer pur sang, but I enjoy doing it from time to time. Hence the perhaps silly question.

Thanks in advance

2

The section of code that applies the parallax effect needs to be executed after randomize is called. I would show you exactly how but since you say you like to toy time to time that should be enough to go on.

Oh… by the way you shouldn’t be assigning a function directly to onload. That can just be put in $(document).ready().