stepUp and stepDown events

[mirzatalat]

i am triggering stepUp and stepDown events on button click event. Its not working.Help!

[pisi]

#202 (comment) duplicate

Use development branch code please.

[mirzatalat]

        $(function(){ 
  //  var reelObject = $('#image').reel({ 
  $('#image').reel({
        frames:      20,
        frame:       14,
        footage:    10, 
        rows:        13,
        row:         8,
        cw:         true,
        inversed:   true,
        speed:       0,
        images:      'Drilbit/Drilbit_normal_###.png',
        cursor:     'move',
        preloader:  3,
        draggable: true,
       wheelable: true,
        throwable: true,
        steppable:true, 
    }); 

    $('#button-right').click(function (){
       // reelObject.trigger('stepRight');
       $('#image').trigger('stepRight');
    })

    $('#button-left').click(function (){
       // reelObject.trigger('stepLeft');
       $('#image').trigger('stepLeft');
    }) 


    $('#button-up').click(function (){
       // reelObject.trigger('stepRight');
       $('#image').trigger('stepUp');
    })

    $('#button-down').click(function (){
       // reelObject.trigger('stepLeft');
       $('#image').trigger('stepDown');
    })

}); 

Above is the code that i am using .. stepUp and stepDown are still not working

[pisi]

This isn't enough code for me to be positive, that you are using the development javascript I pointed you to... So I repeat, these events haven't been released yet and until they do, you need to use javascript from development branch.

The example inside the development version verifies both events are functional.

Otherwise, you have a real mess in your options. For example inversed is only applicable to dual-orbit movies not with multi-row, like you use. Also footage is applicable only to sprites not image sequences like you use. But that doesn't have anything to do with these events.

[mirzatalat]

Frankly speaking i dont understand what are you trying to point out by saying javascript from Development branch.
Can You suggest me what to do to add stepup and stepDown events on up and down buttons.?

[pisi]

OK. So, Github is generally used for development, not hosting, so the code tree on Github has branches, which are different incarnations of the same, but some branches differ greatly in features they contain. The master branch is used to hold latest released stable code, currently version 1.2.1, and it is the default branch you arrive on. Whereas the development branch holds more or less stable code, but one that is still in development and hasn't been released yet, currently unfinished version 1.2.2, which is the one you need to use to have these events, which are still in development and hasn't been released. If you use version from master or do a download from Reel's homepage, you are getting the master branch code.

Fair warning, using code from development branch is on your own risk as the code is not yet 100% still. And as you seem to struggle with the very basics, I would recommend you to rather wait for this to be officially released as then there will be some more documentation and also support.

[mirzatalat]

ok so may i know how is that thing( from development branch ) getting worked . From the reel multi-row sprite example, step up and step down buttons when clicked , gives the required outcome. How and why?

[pisi]

Examples are working obviously and they are in place to demonstrate what you do need to accomplish the same on your own. If you can not get your code to work by replicating the example, take the example and modify it to your likings.

I'm unable to judge whether you are just too new to JS or you have some other problems in your code. If you'd like to carry on with our conversation, you better post a link to your thing on-line.

But again, if you are unable to work with development code, you'd be better of with the official master. Development code has no support and you use it on your own risk of problems.

[mirzatalat]

Yes actually i am new to JS , I have been trained recently with basics of javascript. Regarding my project on what i am doing with Reel Plugin:-- I am using individual images of an object and not sprites to show 360 degree rotation. Left and Right Rotation using stepLeft and stepRight is almost done but i need to make object rotate on x-axis too,with button click.(So i thought stepUp and stepDown events would work).
following is the code i am using.

<!DOCTYPE html>
<html data-type="example" data-id="sequence-multi-row">
  <head>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
    <script src='../jquery.reel-bundle.js' type='text/javascript'></script>

    <!-- Common examples style (gray background, thin fonts etc.) -->
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <style>
  #myDiv1{position:relative;top:0px;left:0px;right:10px;border-color:#3498DB;border-width:3px;height:32px;width:240px;
  background-color:#3498DB;font-color:#FFFFFF;font-size:30px;border-bottom-right-radius:0.3em}

 span{color:#FFFFFF;font-family:calibri;margin-left:48px;margin-top:10px;font-size:25px;}

 #myDiv{ position:absolute;top:10px;bottom:50px;left:325px;right:100px;height:600px;width:800px;border-style:solid; 
 border-width: 9px 9px 9px 9px;border-color:#3498DB;border-radius:10px;background-color:#FFFFFF; }
  </style>
  <body bgcolor="#34495E">   
     <div id="myDiv">

    <div id="myDiv1"><span>Drilling Bit</span></div>
    <center><img id="image" src='Drilbit_1.png' width="800" height="600"/></center>
    <input id="button-right" type="button" value="Left To Right" />
    <input id="button-left" type="button" value="Right To Left" />  
    <input id="up" type="button" value="move up" />
    <input id="down" type="button" value="move down" />  
  <script>


        $(function(){ 

  $('#image').reel({
        frames:      20,
        frame:       14,
        rows:        13,
        row:         8,
        cw:         true,
        speed:       0,
        images:      'Drilbit/Drilbit_normal_###.png',
        cursor:     'move',
        preloader:  3,
        draggable: true,
        wheelable: true,
        throwable: true,
        steppable:true, 
    }); 

    $('#button-left').click(function (){

       $('#image').trigger('stepRight');
    })

    $('#button-right').click(function (){

       $('#image').trigger('stepLeft');
    }) 


}); 

    </script>


    </div>
    </body>
</html>

[pisi]

Pasting code is useless. I need to see if you put all elements together right and especially verify you are using correct version of Reel. I need a LINK to your project online to help you more.

Otherwise, judging solely by you using reel-bundle, you indeed are NOT using the development version I am desperately trying to point you to. Bundles contain only stable versions, not development.

[mirzatalat]

I am using the same example as downloaded from your site. Just images are changed. I just need step up and step down functionality. I am not getting the development version. I referred the stepUp option from development version.Whats the use , if its not working?

[pisi]

And that is exactly your problem! As I've written you like three times now, these events you want to used are not released to public yet (and there is also a good chance that they won't make it into the release at the end because they are still in development). So you won't find them in any examples or code downloaded from the official website.

The only place you can find code with these two events is on the development branch and nowhere else.

But, please, do consider well, if you're up to par with the bleeding edge undocumented code you'll find there. I would say you're not yet ready for that, sorry.

[mirzatalat]

Shall i mail you the project?

[pisi]

Dude, please pay attention to my replies, my Reel time is very limited and this way you're just keeping me off features development, I'm afraid.

All you need is to replace the v1.2.1 jquery.reel-bundle.js file (which doesn't have these events) with v1.2.2 one here (which does have these events) and you'll be golden. Drop in replacement. Simple as that.

[mirzatalat]

Ok No problem and thanks for giving your time.

[pisi]

Man, that wasn't to scare you off ;) It was my best attempt to direct you to using the development code instead of the one you found on the live site. I firmly believe it will resolve your issue, once you actually do that.

You know, there are 7 links to your solution in this thread alone already... so please do forgive my slight lack of patience here...

[mirzatalat]

Yesssss.. Finally i Am able to stepUp and stepDown. I was just expecting the the last comment from you "replace the file' .Thats it. Anyways Thanks a ton to make me understand. BTW am not a MAN am a Woman. :)

[pisi]

Yessss :) Am very happy for you. It's always a great pleasure to help somebody solve something. I will try to make myself little bit more clearer next time. And especially not mistake a pretty lady for a dude ;) Sorry bout that..

Best of luck!