jQuery - How do I get this to start automatically on page load

StingRaY was able to help me get this together but now the client wants this (imageCube) to start on page load. What do I need to change to get this to work?

<!--In the head--> 
<script src="../js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../js/superfish.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.imagecube.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
        $('#menu ul').superfish({ 
            delay:       100,                            // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'fast',                          // faster animation speed 
            autoArrows:  false,                           // disable generation of arrow mark-up 
            dropShadows: false                            // disable drop shadows 
        });
       $('#selectionCube').imagecube({imagePath: 'img/', direction: 'random', speed: '1000', pause:'0'}).imagecube('stop');
       $('#selectionCube').click(startcube);
}); 

function startcube() {
       $('#selectionCube').imagecube('start');
       $('#selectionCube').imagecube('change','pause','6000');
}
</script>

<!--In the body-->
<div class="placeholder" id="selectionCube">
<img alt="" src="../images/cube1.jpg" title="Cube1" />
<img alt="" src="../images/cube2.gif" title="Cube2" />
<img alt="" src="../images/cube3.gif" title="Cube3" />
<img alt="" src="../images/cube4.gif" title="Cube4" />
<img alt="" src="../images/cube5.gif" title="Cube5" />
<img alt="" src="../images/cube6.gif" title="Cube6" />
<img alt="" src="../images/cube7.gif" title="Cube7" />
<img alt="" src="../images/cube8.gif" title="Cube8" />
<img alt="" src="../images/cube9.gif" title="Cube9" />
</div>

Open in new window


Any help is much appreciated.
gorillaboy02Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Replace the last line (line 15) in your ready
$...........click(startcube)
with
startcube();
0
Kiran SonawaneProject LeadCommented:
OR

<!--In the head--> 
<script src="../js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../js/superfish.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.imagecube.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
        $('#menu ul').superfish({ 
            delay:       100,                            // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'fast',                          // faster animation speed 
            autoArrows:  false,                           // disable generation of arrow mark-up 
            dropShadows: false                            // disable drop shadows 
        });
       $('#selectionCube').imagecube({imagePath: 'img/', direction: 'random', speed: '1000', pause:'0'}).imagecube('stop');
       $('#selectionCube').imagecube('start');
       $('#selectionCube').imagecube('change','pause','6000');
}); 

</script>

<!--In the body-->
<div class="placeholder" id="selectionCube">
<img alt="" src="../images/cube1.jpg" title="Cube1" />
<img alt="" src="../images/cube2.gif" title="Cube2" />
<img alt="" src="../images/cube3.gif" title="Cube3" />
<img alt="" src="../images/cube4.gif" title="Cube4" />
<img alt="" src="../images/cube5.gif" title="Cube5" />
<img alt="" src="../images/cube6.gif" title="Cube6" />
<img alt="" src="../images/cube7.gif" title="Cube7" />
<img alt="" src="../images/cube8.gif" title="Cube8" />
<img alt="" src="../images/cube9.gif" title="Cube9" />
</div>

Open in new window

0
gorillaboy02Author Commented:
Thanks sonawanekiran!

This seems to work quite well - how do I get it to 'pause' on the first image? It's animating off this image on page load and I'd like it to pause at the same rate as the others if possible.

Thanks again for your help.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Michel PlungjanIT ExpertCommented:
Did you notice my post?

If the first image is onscreen when you load the page, then change

 $('#selectionCube').click(startcube);

to

setTimeout(function() {
  $('#selectionCube').imagecube('start');
  $('#selectionCube').imagecube('change','pause','6000');
},6000);

if not try to change the same line to

$('#selectionCube').imagecube('start');
setTimeout(function() {
       $('#selectionCube').imagecube('change','pause','6000');
},6000);

or (since I do not have your code to test with I givce you some examples)

$('#selectionCube').imagecube('start').delay(6000).imagecube('change','pause','6000');
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gorillaboy02Author Commented:
Thanks mplungjan!

I did see your post but was unable to get it working (kept timing out) but this solution works well - thanks very much for your excellent code.
0
gorillaboy02Author Commented:
Just one thing mplungjan!

I need it to stop and remain on the last image. Could you supply that also please?

Sorry I should have double checked before I approved.
0
Michel PlungjanIT ExpertCommented:
My guess is

change invocation to
$('#selectionCube').imagecube({imagePath: 'img/', direction: 'random', speed: '1000', pause:'0',afterRotate: endedRotate}).imagecube('stop');
     
and add

function endedRotate(current, next) {
    if ($(current).attr('title') == "Cube9") {
      $('#selectionCube').imagecube('stop');
    }
}
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Programming

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.