图片幻灯片无法正常工作

Question

I followed this jsfiddle and created gallery that slideshow I would see in main page. I tried to move to another file, but without success. Inside jsfiddle it works just great but inside my app fails. When I checked if i am requiring all these files correctly it seemed ok.

My view :

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

My inner js code

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

My css file :

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

I tried to move code inside view but without succes.

Answer 1

you need to add this js : http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js

and this sliding use jquery 1.4.2 check it your jquery version (also I use 1.6.4-1.8.3 its worked..)

I copy your code and its worked : 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
});