I'm currently trying to set up a very basic lightbox effect for a login in a Rails application. I'm using a the plugin Lightbox Evolution. Usage is as follows per the directions:
Make sure it is a valid DOCTYPE.
Include the jQuery library lightbox CSS and the lightbox js file in the head of the pages where you want to use the lightbox
Initialize the plugin:
<script type="text/javascript"
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
The jquery.lightbox.min.js and jquery.lightbox.css are located in the vendor/assets/javascripts and vendor/assets/stylesheets directories respectively.
I've included the lightbox script in the application.html.erb file since I plan on using the lightbox effect on other places on the site.
My application.html.erb file looks like:
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag "jquery.lightbox.css", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "jquery.lightbox.min" %>
<%= csrf_meta_tags %>
</head>
<body>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
</body>
</html>
My landing page is app/views/welcome/index.html.erb:
<h1>Landing Page</h1>
Login
and I use the class "lightbox" per the instructions.
When I go to localhost:3000, the html is built as follows in development environment:
<!DOCTYPE html>
<html>
<head>
<title>MetaLinx Material Management</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/containers.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scales.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/welcome.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.lightbox.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/containers.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.menu.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.ui.timepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.datetimepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.colorpicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filter-box.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filtering-multiselect.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filtering-select.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.remote-form.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.pjax.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_nested_form.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.nested-form-hooks.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.widgets.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ui.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/custom/ui.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/rails_admin.js?body=1" type="text/javascript"></script>
<script src="/assets/scales.js?body=1" type="text/javascript"></script>
<script src="/assets/welcome.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.lightbox.min.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="NGWSCp8qKAwi52ViQNfSP+2WG4teWxwOzCDCFfqQaLc=" name="csrf-token" />
</head>
<body>
<p class="notice"></p>
<p class="alert"></p>
<h1>Landing Page</h1>
<p>Find me in app/views/welcome/index.html.erb</p>
Login
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
</body>
I'm using devise for authentication, so it sets up the routes for users/sign_in. When I click the link above, it takes me to the page users/new, but it does not pop-up in the lightbox. the generated html looks like:
app/views/sessions/new.html.erb:
<h2>Sign in</h2>
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<div><%= f.submit "Sign in" %></div>
<% end %>
<%= render "devise/shared/links" %>
So the question is what am I doing wrong so that when I click the "Login" link in app/views/welcome/new.html.erb it take me to the login page rather than popping it up using the lightbox jQuery?
Try change href="users/sign_in" to href="#". Since the link really doesn't matter if you just wanna click on it and let lightbox pops out the login form.
Related
I was wondering how I would do it; use a function written in a external javascript file and then use it in ejs.
Here's the code;
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.js"></script>
<script src='/javascripts/index.js'></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.css">
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<% include header %>
<section class='header-placeholder'></section>
<section class='game'>
<% items.forEach(function(item){ %>
<% hi(); %>
<% }); %>
</section>
<% include footer %>
</body>
I'm trying to call the function hi() which is written in index.js like so;
function hi(){
console.log('hello');
}
is there any way I can access this function, or could I somehow have the function in ejs and access it from js?
Hi there I'm new on Ror and Js,
I would like to install the algolia Instantsearch on my app, my products appear on algolia index, but I cannot succeed to display my Instantsearch and results on my html page (products index)
If anyone can help me, that would be great :-)
thks in advance
Here is my my code:
layout I included:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.css">
product.rb (model):
include AlgoliaSearch
algoliasearch if: :active? do
attribute :name, :brand, :category, :color, :size, :price
end
search.html.erb:
<div>
<input id="search-input" placeholder="Search for products">
<!-- We use a specific placeholder in the input to guides users in their search. -->
</div>
</header>
<main>
<div id="hits"></div>
<div id="pagination"></div>
</main>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.js"></script>
<script src="app.js"></script>
<script type="text/html" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{image}}" alt="{{name}}">
</div>
<div class="hit-content">
<h3 class="hit-price">${{price}}</h3>
<h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
<p class="hit-description">{{{_highlightResult.description.value}}}</p>
</div>
</div>
</script>
app.js:
var search = instantsearch({
// Replace with your own values
appId: "012967GRTQ",
apiKey: "a3f100606d982f64d7c25410c672f5f5", // search only API key, no ADMIN key
indexName: 'Product',
urlSync: true,
searchParameters: {
hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-input'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination'
})
);
search.start();
config/initializers/algoliasearch.rb
require 'rubygems'
require 'algoliasearch'
Algolia.init application_id: "XXXXXX",
api_key: "xxxxxxxxxxxx"
index = Algolia::Index.new("Product")
And I imported the css from:
.....github.com/algolia/examples/blob/master/instant-search/instantsearch.js/assets/style.css.....
The following ressources:
GET http://localhost:3000/app.js 404 (Not Found)
GET http://localhost:3000/js/main.js 404 (Not Found)
Here is my layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>XXXXXXX</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= javascript_include_tag "https://js.stripe.com/v2/" %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<link rel="stylesheet" type="text/css" href="css/jTinder.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.css">
<%= favicon_link_tag 'favicon.ico'%>
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/message' %>
<%= yield %>
<%= javascript_include_tag "https://maps.google.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>
<%= javascript_include_tag "https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerclusterer/src/markerclusterer_compiled.js" %>
<%= javascript_include_tag "https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js" %>
<%= javascript_include_tag 'application' %>
<script type="text/javascript" src="autocomplete.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- transform2d lib -->
<script type="text/javascript" src="js/jquery.transform2d.js"></script>
<!-- jTinder lib -->
<script type="text/javascript" src="js/jquery.jTinder.js"></script>
<!-- jTinder initialization script -->
<script type="text/javascript" src="js/main.js"></script>
<%= yield(:after_js) %>
<%= render 'pages/footer' %>
</body>
</html>
I have this template as my sinatra layout.erb
<!DOCTYPE html>
<html>
<head>
<title>Invoicer</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
...
</nav>
<div class="container">
<%= yield %>
</div>
<%#<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>%>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="/static/js/bootstrap.min.js"/>
<script src="/static/js/jobs/new.js" />
</body>
</html>
and this small javascript call
console.log("running")
$('#datepicker').datepicker()
the server gets a 200 call to the js file but nothing will print to the console or execute.
Always use <script></script>.
<script src="..." /> is not a valid tag. When the HTML is parsed, it thinks that <script src="/static/js/jobs/new.js" /> is in the body of the <script src="/static/js/bootstrap.min.js"/> tag like this:
...
<script src="/static/js/bootstrap.min.js">
<script src="/static/js/jobs/new.js">
...
From MDN <script> documentation:
Tag omission
None, both the starting and ending tag are mandatory.
I included a jsp with angular directives (A.jsp) inside a non-angular jsp(B.jsp).
If I access A.jsp directly those models "{{X}} {{Y}}" are resolving correctly to
Xvalue Yvalue
But if I access A.jsp through B.jsp I am seeing unresolved ng-model s.
{{X}} {{Y}}
What could be the reason?
My code:
Inside B.jsp
<div id="Bcontent" style="display:block;">
<jsp:include page="/jsp/superqueue/A.jsp"/>
</div>
A.jsp
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="<%=webroot%>/js/angular.min.js"> </script>
<script type="text/javascript" src="<%=webroot%>/js/angular-sanitize.js"> </script>
<link rel="stylesheet" href="css/A.css">
<script type="text/javascript" src="AApp.js"></script>
<script type="text/javascript" src="ACtrl.js"></script>
</head>
<body ng-app="AApp">
<div ng-controller="ACtrl">
<h1 class="a-title">{{X}} {{Y}}</h1>
</div>
</body>
</html>
A.jsp
<div ng-app="AApp">
<script type="text/javascript" src="<%=webroot%>/js/angular.min.js"> </script>
<script type="text/javascript" src="<%=webroot%>/js/angular-sanitize.js"> </script>
<link rel="stylesheet" href="css/A.css">
<script type="text/javascript" src="AApp.js"></script>
<script type="text/javascript" src="ACtrl.js"></script>
<div ng-controller="ACtrl">
<h1 class="a-title">{{X}} {{Y}}</h1>
</div>
</div>
and add meta tags of A.jsp to B.jsp if not already there
I've got a rails app and I'm trying to add a thumbnail scroller. It prints the div, but the js is not working. Here's the file:
<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>
Here's the error in the console:
Uncaught TypeError: Object [object Object] has no method 'thumbnailScroller' 138:168
window.onload 138:168
window.onload
Here's the thumbnailScroller method within 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
};
And here you can see that that js file is being loaded in to the rails app (output from chrome developmnet tools 'resources' tab:
<!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="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/archive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/blog_posts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/booklist.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/comments.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/contact_forms.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/editions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/illustrations.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui-1.10.3.custom/css/no-theme/jquery-ui-1.10.3.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.thumbnailscroller.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/novels.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" 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="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/archive.js?body=1" type="text/javascript"></script>
<script src="/assets/blog_posts.js?body=1" type="text/javascript"></script>
<script src="/assets/booklist.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/comments.js?body=1" type="text/javascript"></script>
<script src="/assets/contact_forms.js?body=1" type="text/javascript"></script>
<script src="/assets/editions.js?body=1" type="text/javascript"></script>
<script src="/assets/illustrations.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.13.custom.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.easing.1.3.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.thumbnailScroller.js?body=1" type="text/javascript"></script>
<script src="/assets/novels.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" 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>
Does anyone see why this method is not available?
Ok, I have tried use Thumbnail scroller jQuery plugin on my training apps and success.
First, remove jquery-ui-1.8.13.custom.min.jsfrom your apps,
Make sure this gem on your gemfile
gem 'jquery-rails'
gem 'jquery-ui-rails'
Remove Gemfile.lock and run bundle install
Make sure on application.js lookslike :
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
Try this for method jquery thumbnail, Put this between head tag
<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>