• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 664
  • Last Modified:

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.
0
gorillaboy02
Asked:
gorillaboy02
  • 3
  • 3
2 Solutions
 
Michel PlungjanIT ExpertCommented:
Replace the last line (line 15) in your ready
$...........click(startcube)
with
startcube();
0
 
sonawanekiranCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now