1265 Posts in 351 Topics by 486 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 297 Views |
-
JQuery Integration

19 February 2013 at 1:31pm
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!
-
Re: JQuery Integration

19 February 2013 at 9:38pm Last edited: 19 February 2013 9:43pm
Uncaught SyntaxError: Unexpected token =
forvar = jQuery('#filter input[name="type"]');
Should have beenvar $filterType = jQuery('#filter input[name="type"]');
Uncaught SyntaxError: Unexpected identifier
forvar = $('> div', this).css('overflow', 'hidden'),
Should have beenvar $wrapper = $('> div', this).css('overflow', 'hidden'),
So what this actually means is that the vars
and$filterType
are left out of the code.$wrapper
| 297 Views | ||
|
Page:
1
|
Go to Top |


