Как решить проблему с моими jquery-плагинами?

Question

Я пытаюсь использовать плагин jquery под названием ancensor.

страница plugnin является http://jque.re/plugins/image-galleries-decks/ascensor/#/Home

У меня есть что-то вроде

<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> 

Я следовал направление страницы плагинов, но до сих пор не могу заставить его работать. Может кто-нибудь мне помочь? Большое спасибо!

Answer 1

Вы устанавливаете каждый этаж класс - ascensorFloorX. Вместо этого вам необходимо установить id. Вы можете увидеть рабочий пример, посмотрев на источник связанной с вами страницы.

I.e. это

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

должен быть этот

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

Кроме того, ваш <div id='ascensorBuilding'> отсутствует закрывающий тег.

Answer 2

на основании документации. Сначала вы должны попытаться сделать это с <section>, и когда он будет работать, измените его с учетом ваших потребностей.

HTML ССЫЛКИ

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

HTML СОДЕРЖАНИЕ

<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, 

});