?
Solved

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

Posted on 2012-03-18
7
Medium Priority
?
655 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 400 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1600 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

Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

Question has a verified solution.

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

The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…
Suggested Courses

765 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