Need to include documentation and advanced help support.

Comments

bcobin’s picture

Version: » 7.x-1.x-dev

Is there any documentation for this? I have a working example of what I want to do in JSFiddle, but I don't have a clue as to how to get it into the site.

It seems like the module could be very useful, if there were only some simple documentation - a working example would be immensely helpful. Right now, I'm dead in the water...

lkacenja’s picture

Hi bcobin,
You are certainly right. In the mean time, could you send me a link to your fiddle? I can give you some pointers. This module basically just provides an easy interface and a more developer centric means for including instances of the library on your site. So obviously the approach varies depending on how complex your end goal is. Thanks!

-Leo

bcobin’s picture

Thanks for getting back, Leo - much appreciated.

I managed to do what I wanted by accessing the spritely script directly and bypassing the module, actually. I expect the site to be up in a few days (perhaps even later today); the site will demonstrate what I think would be a pretty standard use case. I doubt I would have tried this had the module not been available, so it's all good!

Stay tuned and thanks...

Update: You can check out the completed site at http://icrmedia.com

I'm calling the spritely code manually and not using the module, but the site may give you an idea for a simple use case. Rock on!

TribalMan’s picture

Hi bcrobin,

Can you possibly post your page.tpl.php? I really want to see how you did this.

-TM

bcobin’s picture

It's just in a block - below is the block code (much of which is for CSS):

<div id="animation"><div id="container">
<div id="stage" class="stage">
<div id="bg" class="stage-bg"></div>
<div id="row_1" class="stage-row"></div>
<div id="row_2" class="stage-row"></div>
<div id="border-right" class="border-right"></div>
<div id="border-left" class="border-left"></div>
<div id="border-top" class="border-top"></div>
<div id="border-bottom" class="border-bottom"></div>
</div>
</div></div>
<script type="text/javascript" src="/sites/all/libraries/spritely/jquery.spritely.js"></script>
<script type="text/javascript" src="/sites/all/themes/[theme]/scripts/animation.js"></script>

And here's the small animation.js file that makes it go:

  (function ($) {
     $(document).ready(function () {

       $('#row_1').pan({
         fps: 30,
         speed: 1.7,
         dir: 'left',
         depth: 20
       });
       $('#row_2').pan({
         fps: 30,
         speed: 2.7,
         dir: 'left',
         depth: 40
       });
     });
   })(jQuery);

Enjoy!