Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

JQuery Integration


Reply


3 Posts   885 Views

Avatar
gaethofs

Community Member, 9 Posts

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">&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!

Avatar
novaweb

Community Member, 115 Posts

19 February 2013 at 4:38pm

What error is your debugging console throwing?

Avatar
gaethofs

Community Member, 9 Posts

19 February 2013 at 9:38pm

Edited: 19/02/2013 9:43pm

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.