У меня есть приложение rails, и я пытаюсь добавить скроллер для миниатюр. Он печатает div, но js не работает. Вот файл:
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<% @illustrations.each do |illustration| %>
<% if illustration.aws_image_thumbnail_url %>
<%= link_to image_tag(illustration.aws_image_thumbnail_url, :title => illustration.name), illustration %>
<% else %>
<%= link_to image_tag(illustration.image.url(:thumb), :title => illustration.name), illustration %>
<% end %>
<% end %>
</div>
</div>
</div>
<script>
jQuery.noConflict();
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
Здесь ошибка в консоли:
Uncaught TypeError: Object [object Object] has no method 'thumbnailScroller' 138:168
window.onload 138:168
window.onload
Здесь метод thumbnailScroller
в jquery.thumbnailScroller.js
:
(function($){
$.fn.thumbnailScroller=function(options){
var defaults={ //default options
scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons"
scrollerOrientation:"horizontal", //values: "horizontal", "vertical"
scrollEasing:"easeOutCirc", //easing type
scrollEasingAmount:800, //value: milliseconds
acceleration:2, //value: integer
scrollSpeed:600, //value: milliseconds
noScrollCenterSpace:0, //value: pixels
autoScrolling:0, //value: integer
autoScrollingSpeed:8000, //value: milliseconds
autoScrollingEasing:"easeInOutQuad", //easing type
autoScrollingDelay:2500 //value: milliseconds
};
И здесь вы можете видеть, что этот файл js загружается в приложение rails (выход из вкладки ресурсов хром developmentmnet tools:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="https://s3-us-west-2.amazonaws.com/haggard/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<title>Visual Haggard</title>
<link href="/application.css" media="all" rel="stylesheet" type="text/css" />
<link href="/reset.css" media="all" rel="stylesheet" type="text/css" />
<link href="/archive.css" media="all" rel="stylesheet" type="text/css" />
<link href="/blog_posts.css" media="all" rel="stylesheet" type="text/css" />
<link href="/booklist.css" media="all" rel="stylesheet" type="text/css" />
<link href="/bootstrap_and_overrides.css" media="all" rel="stylesheet" type="text/css" />
<link href="/comments.css" media="all" rel="stylesheet" type="text/css" />
<link href="/contact_forms.css" media="all" rel="stylesheet" type="text/css" />
<link href="/editions.css" media="all" rel="stylesheet" type="text/css" />
<link href="/illustrations.css" media="all" rel="stylesheet" type="text/css" />
<link href="/jquery-ui-1.10.3.custom.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="/jquery.thumbnailscroller.css" media="all" rel="stylesheet" type="text/css" />
<link href="/novels.css" media="all" rel="stylesheet" type="text/css" />
<link href="/scaffolds.css" media="all" rel="stylesheet" type="text/css" />
<link href="/sessions.css" media="all" rel="stylesheet" type="text/css" />
<link href="/users.css" media="all" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
<script src="/jquery.js" type="text/javascript"></script>
<script src="/jquery_ujs.js" type="text/javascript"></script>
<script src="/bootstrap-transition.js" type="text/javascript"></script>
<script src="/bootstrap-alert.js" type="text/javascript"></script>
<script src="/bootstrap-modal.js" type="text/javascript"></script>
<script src="/bootstrap-dropdown.js" type="text/javascript"></script>
<script src="/bootstrap-scrollspy.js" type="text/javascript"></script>
<script src="/bootstrap-tab.js" type="text/javascript"></script>
<script src="/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="/bootstrap-popover.js" type="text/javascript"></script>
<script src="/bootstrap-button.js" type="text/javascript"></script>
<script src="/bootstrap-collapse.js" type="text/javascript"></script>
<script src="/bootstrap-carousel.js" type="text/javascript"></script>
<script src="/bootstrap-typeahead.js" type="text/javascript"></script>
<script src="/bootstrap-affix.js" type="text/javascript"></script>
<script src="/bootstrap.js" type="text/javascript"></script>
<script src="/archive.js" type="text/javascript"></script>
<script src="/blog_posts.js" type="text/javascript"></script>
<script src="/booklist.js" type="text/javascript"></script>
<script src="/bootstrap.js" type="text/javascript"></script>
<script src="/comments.js" type="text/javascript"></script>
<script src="/contact_forms.js" type="text/javascript"></script>
<script src="/editions.js" type="text/javascript"></script>
<script src="/illustrations.js" type="text/javascript"></script>
<script src="/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/jquery.thumbnailScroller.js" type="text/javascript"></script>
<script src="/novels.js" type="text/javascript"></script>
<script src="/sessions.js" type="text/javascript"></script>
<script src="/users.js" type="text/javascript"></script>
<script src="/application.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="IlafOuTVut9RwVQZwQrI4JpuieQp2lHla7HxIiCI2e0=" name="csrf-token" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Кто-нибудь видит, почему этот метод недоступен?
Хорошо, я пробовал использовать плагин jQuery для скроллинга с миниатюрами на моих обучающих приложениях и успехах.
Во-первых, удалите jquery-ui-1.8.13.custom.min.js
из своих приложений,
Убедитесь, что этот драгоценный камень на вашем gemfile
gem 'jquery-rails'
gem 'jquery-ui-rails'
Удалите Gemfile.lock
и запустите установку пакета
Убедитесь, что на application.js
выглядит:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
Попробуйте это за метод Jquery миниатюры, Наденьте между head
теге
<script type="text/javascript">
$(function () {
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
});</script>