Solved

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

Posted on 2012-03-18
7
629 Views
Last Modified: 2013-11-13
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
Comment
Question by:gorillaboy02
  • 3
  • 3
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37736329
Replace the last line (line 15) in your ready
$...........click(startcube)
with
startcube();
0
 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 100 total points
ID: 37736354
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
 

Author Comment

by:gorillaboy02
ID: 37736435
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 400 total points
ID: 37736477
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
 

Author Comment

by:gorillaboy02
ID: 37736504
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
 

Author Comment

by:gorillaboy02
ID: 37736578
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37736673
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How can i open a .fxp file 3 33
Jquery keyup 4 19
CSS: Making Pure CSS read more boxes thinner 5 31
jquery datable hidden section doesn't submit 2 10
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn how to count occurrences of each item in an array.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question