image слайд-шоу не работает

Question

Я следил за этим jsfiddle и создал галерею, которую слайд-шоу я бы увидел на главной странице. Я попытался перейти в другой файл, но безуспешно. Внутри jsfiddle он работает просто отлично, но внутри моего приложения не удается. Когда я проверил, действительно ли я требую, чтобы все эти файлы были правильно, это выглядело нормально.

Мое мнение:

<!-- "previous page" action --> 
      <a class="prev browse left"></a> 

      <!-- root element for scrollable --> 
      <div class="scrollable" id=chained> 

      <!-- root element for the items --> 
       <div class="items"> 


      <!-- 1-5 --> 
      <div> 
      <%= link_to image_tag("EMILIANA_BANNERS.png", :width=> '470', :height=> '260') %> 
      <div class="caption-bkgd"></div> 
      <div class="caption">Emiliana Products</div> 
      </div> 

      <div> 
      <%= link_to image_tag("tractors and machinery.png", :width=> '470', :height=> '260') %> 
      <div class="caption-bkgd"></div> 
      <div class="caption">Tractors and machinery</div> 
      </div> 

    <!-- "previous page" action --> 
     <a class="prev browse left"></a> 

     <!-- root element for scrollable --> 
     <div class="scrollable" id=chained> 

     <!-- root element for the items --> 
      <div class="items"> 


     <!-- 1-5 --> 
     <div> 
     <%= link_to image_tag("EMILIANA_BANNERS.png", :width=> '470', :height=> '260') %> 
     <div class="caption-bkgd"></div> 
     <div class="caption">Emiliana Products</div> 
     </div> 

     <div> 
     <%= link_to image_tag("tractors and machinery.png", :width=> '470', :height=> '260') %> 
     <div class="caption-bkgd"></div> 
     <div class="caption">Tractors and machinery</div> 
     </div> 

    </div> 

Мой внутренний код JS

$(document).ready(function() { 
    $("#chained").scrollable({ 
     circular: true, 
     mousewheel: true, 
     onSeek: function() { 
      $('.caption').fadeIn('fast'); 
     }, 
     onBeforeSeek: function() { 
      $('.caption').fadeOut('fast'); 
     } 
    }).navigator().autoscroll({ 
     interval: 6000 
    }); 
}); 

Мой CSS файл:

a:active { 
    outline:none; 
} 

:focus { 
    -moz-outline-style:none; 
} 
/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
.scrollable { 

    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 470px; 
    height:260px; 
    background-color: #d9d9d9; 

} 

/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set the width and height for the root element and 
    not for this element. 
*/ 
.scrollable .items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
    clear:both; 
    height: 260px; 
} 

.items div { 
    float:left; 
    width:470px; 

} 

/* single scrollable item */ 
.scrollable img { 
    float:left; 
    margin:0; 
    background-color:#fff; 
    width:470px; 
    height:260px; 
    position: relative; 
} 

.scrollable img.hover { 
    background-color:#123;  
} 
.scrollable .caption { 
    color: #fff; 
    position: absolute; bottom: 12px; 
    padding-left: 18px; 
    font: bold 14px arial; 
} 
.scrollable .caption-bkgd { 
    background-color: #000; 
    height: 40px; 
    position: absolute; bottom: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 


/* active item */ 
.scrollable .active { 
    border:2px solid #000; 
    position:relative; 
    cursor:default; 
} 
/* position and dimensions of the navigator */ 
.navi { 
    margin: -26px 0 0 0; 
    position: absolute; left: 400px; 
    width:200px; 
    height:13px; 
    z-index: 9999; 
} 
/* NAVIGATOR */ 
.navi a { 
    width:13px; height:13px; 
    float:left; 
    margin:0 4px; 
    background-color: #d9d9d9; 
    display:block; 
} 

.navi a:hover, .navi a.active {background-color: green;} 

.hide{display: none;} 

Я попытался пошевелиться кода зрения, но без Succes.

Answer 1

вам нужно добавить этот JS: http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js

и это скольжение использование JQuery 1.4.2 проверить это ваш Jquery версию (также я использую 1.6.4-1.8.3 его работал ..)

I скопируйте код и его работу: http://jsfiddle.net/mehmetakifalp/BxcCq/

$("#chained").scrollable({ 
    circular: true, 
    mousewheel: true, 
    onSeek: function() { 
     $('.caption').fadeIn('fast'); 
    }, 
    onBeforeSeek: function() { 
     $('.caption').fadeOut('fast'); 
    } 
}).navigator().autoscroll({ 
    interval: 6000 
});