My problem is very simple, I have the need to create a carousel in 3d, but to avoid that I decided to find one of my liking and try to customize it to my liking, it works correctly that you download, just that it is not in ruby and I decided to pass it to my project. but at the moment of transferring it I do not get errors, simply the carousel does not work and the images stay static.
HTML code:
<!doctype html>
<html lang="en">
<head>
<!--
Demo by Ildar Sagdejev ( http://twitter.com/tknomad )
-->
<meta charset="UTF-8">
<style>
#showcase {
height: 460px;
}
</style>
</head>
<body>
<!-- GitHub ribbon: http://codepo8.github.io/css-fork-on-github-ribbon/ -->
<div class="wrap">
<div id="showcase" class="noselect">
<%= image_tag("1.jpg",:class=>"cloud9-item") %>
<%= image_tag("2.jpg", :class=>"cloud9-item") %>
<%= image_tag("3.jpg", :class=>"cloud9-item") %>
</div>
</div>
<script type="text/javascript" src="assets/javascripts/PaginaPrincipal/jquery.js"></script>
<script type="text/javascript" src="assets/javascripts/PaginaPrincipal/reflection.js"></script>
<script type="text/javascript" src="assets/javascripts/PaginaPrincipal/cloud9.js"></script>
<script>
$(function() {
var showcase = $("#showcase"), title = $('#item-title')
showcase.Cloud9Carousel( {
yOrigin: 42,
yRadius: 48,
mirror: {
gap: 12,
height: 0.2
},
buttonLeft: $("#nav > .left"),
buttonRight: $("#nav > .right"),
autoPlay: 1,
bringToFront: true,
onRendered: rendered,
onLoaded: function() {
showcase.css( 'visibility', 'visible' )
showcase.css( 'display', 'none' )
showcase.fadeIn( 1500 )
}
} )
function rendered( carousel ) {
title.text( carousel.nearestItem().element.alt )
// Fade in based on proximity of the item
var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI)
title.css('opacity', 0.5 + (0.5 * c))
}
$(document).keydown( function( e ) {
//
// More codes: http://www.javascripter.net/faq/keycodes.htm
//
switch( e.keyCode ) {
/* left arrow */
case 37:
$('#nav > .left').click()
break
/* right arrow */
case 39:
$('#nav > .right').click()
}
} )
})
</script>
</body>
</html>
CSS Code:
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.wrap {
width: 980px; /* fixed width, centered in viewport */
left: -490px;
margin-left: 50%;
position: relative;
}
.wrap > h1 {
font-size: 2.5em;
text-align: center;
padding-bottom: 3px;
}
#showcase img {
cursor: pointer;
}
#get {
font-size: 20px;
text-align: center;
}
I also put alerts on the .js that he sends for calling and if he executes them so I do not really know what I'm doing wrong, the images look but without movement and totally flat.
Link to download the code that works correctly outside ruby, is modified.
https://mega.nz/#!8IExCaYB!dju-55XUVWt1GgVqQPO91Mmmo0LDyVOdlYf9Yb2m3Zo
Update
Realize the temporary suspension of the turbolinks to see if that fixed the problem temporarily, but I do not fix anything, I also put the following code:
$(document).on('turbolinks:load', function() {
...your javascript goes here...
});
I think that above code only works for Rails 5.0 and up and I use that version of rails.
Code to remove from turbo links
application.js
//=require turbolinks
In views / layouts application.html.erb
'data-turbolinks-track': 'reload '
If I put an alert inside:
$(document).on('turbolinks:load', function() {
alert("Entro");
});
I do not get the alert message.