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"><</a><a class="arrow forward">></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!