Hi there.
I'm trying to integrate a theme into SilverStripe but I'm always having problems when it comes to integrating the JavaScript en JQuery parts.
I searched for several solutions (the function tag, requirement statement for js, blocking requirements on init, ...) but none of them seem to do the trick. This is the code I'm trying to get to work.
Part1, include in the head:

jQuery(document).ready(function ($) {
	jQuery('a.content-top-button').click(function (e) {
		e.preventDefault();
		jQuery.scrollTo('#top', {
			duration: 500
		});
	});
	$("#applications  a.view,#secondary-thumbs a.view").each(function () {
		if ($(this).hasClass("view_video")) {
			try {
				var id = this.href.split("#")[1];
				var width = parseInt($("#" + id).find("iframe").attr("width"));
				var height = parseInt($("#" + id).find("iframe").attr("height"));
				$(this).attr("rel", "").prettyPhoto({
					default_width: width,
					default_height: height
				});
			} catch (e) {
			}
		} else if ($(this).hasClass("view_gallery")) {
			$("a[rel='" + this.rel + "']").prettyPhoto();
		} else {
			$(this).prettyPhoto({
				keyboard_shortcuts: false
			});
		}
	});
});

Part 2, include in the body:

jQuery(document).ready(function(jQuery){
	var $filterType = jQuery('#filter input[name="type"]');
	var h = jQuery('#applications li').height();
	var c = jQuery('#applications li').length-1;
	h = h*c/4;
	//console.log(h);
	jQuery('#applications').css('height',h+135);
	var $applications = jQuery('#applications');
	var $data1 = $applications.clone();
	var $container = jQuery('#applications');
	$container.isotope({
		masonry: {
			columnWidth: 10
		},
		sortBy: 'number',
		getSortData: {
			number: function( $elem ) {
				var number = $elem.hasClass('element') ? 
					$elem.find('.number').text() :
					$elem.attr('data-number');
				return parseInt( number, 10 );
			},
			alphabetical: function( $elem ) {
				var name = $elem.find('.name'),
				itemText = name.length ? name : $elem;
				return itemText.text();
			}
		}
	});
	jQuery('#source a').click(function(e){
		e.preventDefault();
		jQuery('#source a').removeClass('active');
		jQuery(this).addClass('active');
		var $optionSets = jQuery('.option-set');
		$optionLinks = $optionSets.find('a');
		var $filteredData = null;
		var options = {},
		key = $optionSets.attr('data-option-key'),
		value = jQuery(this).attr('data-option-value');
		value = value === 'false' ? false : value;
		options[ key ] = value;         
		$container.isotope( options );
	});
});

Part 3, included in the body:

$.fn.infiniteCarousel = function () {
			function repeat(str, num) {
				return new Array( num + 1 ).join( str );
			}
			return this.each(function () {
				var $wrapper = $('> div', this).css('overflow', 'hidden'),
				$slider = $wrapper.find('> ul'),
				$items = $slider.find('> li'),
				$single = $items.filter(':first'),
				singleWidth = $single.outerWidth(), 
				visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
				currentPage = 1,
				pages = Math.ceil($items.length / visible);            
				// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
				if (($items.length % visible) != 0) {
					$slider.append(repeat('<li class="empty">', visible - ($items.length % visible)));
					$items = $slider.find('> li');
				}
				// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
				$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
				$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
				$items = $slider.find('> li'); // reselect
				// 3. Set the left position to the first 'real' item
				$wrapper.scrollLeft(singleWidth * visible);
				// 4. paging function
				function gotoPage(page) {
					var dir = page < currentPage ? -1 : 1,
					n = Math.abs(currentPage - page),
					left = singleWidth * dir * visible * n;
					$wrapper.filter(':not(:animated)').animate({
						scrollLeft : '+=' + left
					}, 1000, function () {
						if (page == 0) {
							$wrapper.scrollLeft(singleWidth * visible * pages);
							page = pages;
						} else if (page > pages) {
							$wrapper.scrollLeft(singleWidth * visible);
							// reset back to start position
							page = 1;
						} 
						currentPage = page;
					});                
					return false;
				}
				$wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
				// 5. Bind to the forward and back buttons
				$('a.back', this).click(function () {
					return gotoPage(currentPage - 1);                
				});
				$('a.forward', this).click(function () {
					return gotoPage(currentPage + 1);
				});
				// create a public interface to move to a specific page
				$(this).bind('goto', function (event, page) {
					gotoPage(page);
				});
			});  
		};
		$(document).ready(function () {
			$('.infiniteCarousel').infiniteCarousel();
		});

If anyone sees the problem this would really save me another few hours of debugging
when it might just be a syntax abuse.

Kind regards!

What error is your debugging console throwing?

Uncaught SyntaxError: Unexpected token =
for

var  = jQuery('#filter input[name="type"]');

Should have been

var $filterType = jQuery('#filter input[name="type"]');

Uncaught SyntaxError: Unexpected identifier
for

var  = $('> div', this).css('overflow', 'hidden'),

Should have been

var $wrapper = $('> div', this).css('overflow', 'hidden'),

So what this actually means is that the vars

$filterType

and

$wrapper

are left out of the code.