How to solve my jquery plugins issue?

Question

I am trying to use a jquery plugin called ancensor.

The plugnin page is http://jque.re/plugins/image-galleries-decks/ascensor/#/Home

I have something like

    <nav class='navbar navbar-default' role='navigation '>
    <ul class='alinks list-inline links-to-floor'>
    <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink1">test1</a></li>
       <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink2" >test2</a></li>
       <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink3">test3</a></li>
       <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink4">test4</a></li>
       <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink5">test5</a></li>
    </ul>
    </nav>

    <div id='ascensorBuilding'>
    <div class='ascensorFloor1'  style=''>
                test here
    </div>
    <div class='ascensorFloor2'  style='height:1200px; width:1000px; background-color:red;'>
               blog hree oooo
    </div>
    <div class='ascensorFloor3'  style='height:1200px; width:1000px; background-color:red;'>
    aaagg
    </div>
    <div class='ascensorFloor4'  style='height:1200px; width:1000px; background-color:red;'>
    dddd
    </div>
    <div class='ascensorFloor5'  style='height:1200px; width:1000px; background-color:red;'>
    ddd
    </div>




        <script src="/lib/jquery-1.8.0.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
        <script src="/lib/jquery.ascensor.js"></script>
        <script src="/lib/bootstrap/js/bootstrap.min.js"></script>

<script>
  $(function() {

  $('#ascensorBuilding').ascensor({
     AscensorName: 'ascensor',
         AscensorFloorName: '1.0 | 1.1 | 1.3 | 4.3 | 5.4 | 5.5 | 5.6 | 7.6 | 8.6 | 8.7 | 8.8 | 8.9 | 10.2',
         Time: 9000,
         WindowsOn: 1,
         Direction: "chocolate",
         AscensorMap: '1|1 & 2|1 & 3|1 & 3|2 & 3|3 & 4|3 & 5|3 & 3|4 & 3|5 & 4|5 & 5|5 & 6|5 & 3|6',
         Easing: 'easeInOutQuad',
         KeyNavigation: true,
         Queued: false,
         QueuedDirection: "y"
        })
  });

</script>

I have followed the plugins page direction but still can't get it to work. Can someone help me out about it? Thanks a lot!

There's no documentation of the plugin at the linked site, and clicking on the download links says Forbidden. ??? — Barmar, Jan 15 '14 at 18:40
Are you sure you are using the correct option names? uppercase options aren't very common. — Kevin B, Jan 15 '14 at 18:41
Did you try adding `ChildType:'section',` on the parameters ? — Merlin, Jan 15 '14 at 18:43
@Lorenzo yes i did but no luck. and Kevin I copied options name from their site. — FlyingCat, Jan 15 '14 at 18:45
did you try removing `jquery.easing.min.js` they don't use it on their example... — Merlin, Jan 15 '14 at 18:46
@Lorenzo i did, but it seem like I need that for easing effect. — FlyingCat, Jan 15 '14 at 18:48
Cant find your problem, maybe try to do it with sections. Look at their website page source and make some tests — Merlin, Jan 15 '14 at 19:01

CDspace · Answer 1 · 2014-01-15T19:52:54.270

1

You're setting each floors class to ascensorFloorX. You need to set the id to those values instead. You can see a working example by looking at the source of the page you linked.

I.e. this

<div class='ascensorFloor1'  style=''>
     ^

should be this

<div id='ascensorFloor1'  style=''>
     ^

Also, your <div id='ascensorBuilding'> is missing the closing tag.

edited Jan 15 '14 at 19:52

answered Jan 15 '14 at 19:01

CDspace

2,639
18
30
36

could you please explain more details? +1 – FlyingCat Jan 15 '14 at 19:37

score 1 · Answer 2 · answered Jan 15 '14 at 19:06

based on the documentation. You should try to do it with <section> first and when it is working change it with your needs.

HTML LINKS

<li><a class="ascensorLink ascensorLink1"></a></li>
<li><a class="ascensorLink ascensorLink2"></a></li>

HTML CONTENT

 <div id="ascensorBuilding">
        <section>
            //floor one content here
        </section>

        <section>
            //floor two content here
        </section>

        <section>
            //floor three content here
        </section>
    </div>

JAVASCRIPT

$('#ascensorBuilding').ascensor({
    AscensorName:'ascensor',
    ChildType:'section',
    AscensorFloorName:'Home | Implementation ',
    Time:1000,
    WindowsOn:1,
    Direction:'chocolate',
        AscensorMap:'2|1 & 2|2 & 3|2 & 2|3 & 2|4 & 1|4 & 2|5',
        Easing:'easeInOutQuad',
        KeyNavigation:true,
        Queued:false,

});

I have done it but it seems not working either. :( +1 – FlyingCat Jan 15 '14 at 19:36 — FlyingCat, Jan 15 '14 at 19:36

How to solve my jquery plugins issue?

2 Answers2