While working on a project, I stumbled upon a code that I am editing. You can find the original code here:
However, when I try to link the .js file, it fails to load properly and displays a single large image instead of a carousel of images.
Thank you for any assistance provided.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="index.css">
<script type="text/jquery" href="index.js"></script>
</head>
<body>
<div id="wrapper">
<div class="carousel">
<div><img src="images/matt.png" /></div>
<div><img src="img/i02.jpg" /></div>
<div><img src="img/i03.jpg" /></div>
<div><img src="img/i04.jpg" /></div>
<div><img src="img/i05.jpg" /></div>
<div><img src="img/i06.jpg" /></div>
<div><img src="img/i07.jpg" /></div>
<div><img src="img/i08.jpg" /></div>
<div><img src="img/i09.jpg" /></div>
<div><img src="img/i10.jpg" /></div>
</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 600px;
background-color: #fff;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
width: 800px;
height: 500px;
margin: -250px 0 0 -400px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
}
#wrapper,
.carousel,
.carousel div,
.carousel div img {
width: 800px;
height: 500px;
}
.carousel {
float: left;
overflow: hidden;
cursor: pointer;
}
.carousel div {
float: left;
overflow: hidden;
position: relative;
}
.carousel div img {
border: none;
display: block;
float: left;
position: absolute;
}
/* after js */
.carousel div.thumb img {
width: 160px;
height: 100px;
left: -30px !important;
top: 0 !important;
}
Javascript (This is what it said on the website so it may be jQuery, but I'm not sure)
$(function() {
// cache first carousel
var $org = $('.carousel');
// variables
var width = 800,
height = 500,
cols = 8,
rows = 5,
$img = $org.children()
imgs = $img.length;
// duplicate carouesl
for( a = 0; a < rows * cols; a++ ) {
$('#wrapper').append( $org.clone() );
}
// cache all carousls
$all = $('.carousel');
$all.each(function( i ) {
// current row and column
var row = Math.floor( i / cols ),
col = i % cols;
var $t = $(this),
i2 = i % imgs,
$x = $img.eq( i2 ).clone();
// first image -> thumbnail
$x.addClass( 'thumb' );
$t.prepend( $x );
var $d = $t.children();
// onClick start scrolling the first carousel
$t.click(function() {
var d = ( $t.triggerHandler( 'currentPosition' ) == 0 ) ? i2+1 : 0;
$org.trigger( 'slideTo', d );
});
// set width + height
$t.add( $d ).css({
width: width / cols,
height: height / rows
});
// position images
$d.children().css({
left: -(col * (width / cols)),
top: -(row * (height / rows))
});
});
// create carousels
$all.carouFredSel({
circular: false,
items: {
visible: 1,
width: width / cols,
height: height / rows
},
scroll: {
fx: 'directscroll',
onBefore: function() {
var $t = $(this);
// trigger next carousel to scroll after 25 ms.
setTimeout(function() {
$t.parent().next().children().trigger( 'slideTo', $t.triggerHandler( 'currentPosition' ) );
}, 25);
}
}
}).trigger( 'pause' );
});