Menu
In general the two jquery are working but the second one the arrows up and down are not in the place they are should be and they are not working clicking on them does nothing.
The second jquery is cycle2 that i’m trying to use:
[URL=”http://jsfiddle.net/uncb4bs9/3/”]http://jsfiddle.net/uncb4bs9/3/
This jquery is not running good like in the jsfiddle. The arrows not in place and they are not doing anything when clicking on them. What did i do wrong ?
When i’m doing inspect element i don’t see any errors.
This is the html code:
[CODE]<!DOCTYPE html>
<!–
–>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”carousel.css”>
<link rel=”stylesheet” type=”text/css” href=”vertical_slider.css”>
<link rel=”stylesheet” type=”text/css” href=”glow-effect.css”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js” type=”text/javascript”></script>
<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js” type=”text/javascript”></script>
<script src=”http://malsup.github.io/jquery.cycle2.js”></script>
<script src=”http://malsup.github.io/jquery.cycle2.carousel.js”></script>
<script src=”java_script.js”></script>
<title>TODO supply a title</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<div>TODO write content</div>
<div id=”wrapper”>
<div id=”carousel-wrapper”>
<img id=”shadow” src=”img/gui/carousel_shadow.png” />
<div id=”carousel”>
<span id=”pixar”><img src=”img/large/pixar.jpg” /></span>
<span id=”bugs”><img src=”img/large/bugs.jpg” /></span>
<span id=”cars”><img src=”img/large/cars.jpg” /></span>
<span id=”incred”><img src=”img/large/incred.jpg” /></span>
<span id=”monsters”><img src=”img/large/monsters.jpg” /></span>
<span id=”nemo”><img src=”img/large/nemo.jpg” /></span>
<span id=”radar”><img src=”img/large/radar002665.png” /></span>
<span id=”rat”><img src=”img/large/rat.jpg” /></span>
<span id=”toystory”><img src=”img/large/toystory.jpg” /></span>
<span id=”up”><img src=”img/large/up.jpg” /></span>
<span id=”walle”><img src=”img/large/walle.jpg” /></span>
</div>
</div>
<div id=”thumbs-wrapper”>
<div id=”thumbs”>
<a href=”#pixar” class=”selected”><img src=”img/small/pixar.jpg” /></a>
<a href=”#bugs”><img src=”img/small/bugs.jpg” /></a>
<a href=”#cars”><img src=”img/small/cars.jpg” /></a>
<a href=”#incred”><img src=”img/small/incred.jpg” /></a>
<a href=”#monsters”><img src=”img/small/monsters.jpg” /></a>
<a href=”#nemo”><img src=”img/small/nemo.jpg” /></a>
<a href=”#radar”><img src=”img/small/radar002665resized.jpg” /></a>
<a href=”#rat”><img src=”img/small/rat.jpg” /></a>
<a href=”#toystory”><img src=”img/small/toystory.jpg” /></a>
<a href=”#up”><img src=”img/small/up.jpg” /></a>
<a href=”#walle”><img src=”img/small/walle.jpg” /></a>
</div>
<a id=”prev” href=”#”></a>
<a id=”next” href=”#”></a>
</div>
</div>
<div class=”vertical-slider-container”>
<img src=”https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png” id=”prev” class=”vertical-slider-nav vertical-slider-nav-up” />
<div class=”slideshow”
data-cycle-fx=”carousel”
data-cycle-timeout=”3000″
data-cycle-next=”#next”
data-cycle-prev=”#prev”
data-cycle-carousel-visible=”3″
data-cycle-carousel-vertical=”true”>
<img src=”http://malsup.github.io/images/beach1.jpg” />
<img src=”http://malsup.github.io/images/beach2.jpg” />
<img src=”http://malsup.github.io/images/beach3.jpg” />
<img src=”http://malsup.github.io/images/beach4.jpg” />
<img src=”http://malsup.github.io/images/beach5.jpg” />
<img src=”http://malsup.github.io/images/beach9.jpg” />
</div>
<img src=”https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png” id=”next” class=”vertical-slider-nav vertical-slider-nav-down” />
</div>
</body>
</html>
This is the cycle2 css code:
[CODE].vertical-slider-container {
background: #fff;
border: 20px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
margin: 40px auto;
position: relative;
width: 120px;
}
.slideshow {
background: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.slideshow img {
display: block;
width: 100px;
height: 100px;
padding: 10px;
}
.vertical-slider-nav {
color: rgba(0,0,0,0.8);
cursor: pointer;
display: block;
height: 40px;
margin-left: -20px;
left: 50%;
z-index: 10;
position: absolute;
overflow: hidden;
opacity: 0;
text-decoration: none;
width: 40px;
transition: all .3s ease;
}
.vertical-slider-nav-up {
top: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-up:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-up {
top: -20px;
opacity: 0.7;
}
.vertical-slider-nav-down {
bottom: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-down:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-down {
bottom: -20px;
opacity: 0.7;
}
And the javascript file:
[CODE]$(function() {
$(‘.slideshow’).cycle();
$(‘#carousel span’).append(‘<img src=”img/gui/carousel_glare.png” class=”glare” />’);
$(‘#thumbs a’).append(‘<img src=”img/gui/carousel_glare_small.png” class=”glare” />’);
$(‘#carousel’).carouFredSel({
responsive: true,
circular: false,
auto: false,
items: {
visible: 1,
width: 200,
height: ‘56%’
},
scroll: {
fx: ‘directscroll’
}
});
$(‘#thumbs’).carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: ‘#prev’,
next: ‘#next’,
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: ‘66%’
}
});
$(‘#thumbs a’).click(function() {
$(‘#carousel’).trigger(‘slideTo’, ‘#’ + this.href.split(‘#’).pop() );
$(‘#thumbs a’).removeClass(‘selected’);
$(this).addClass(‘selected’);
return false;
});
});
In the javascript file this line is for the cycle the rest is for the carousel:
[CODE]$(‘.slideshow’).cycle();