Jump to:

1347 Posts in 439 Topics by 514 members

Themes

SilverStripe Forums » Themes » JQuery Integration

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 710 Views
  • gaethofs
    Avatar
    Community Member
    9 Posts

    JQuery Integration Link to this post

    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!

  • novaweb
    Avatar
    Community Member
    109 Posts

    Re: JQuery Integration Link to this post

    What error is your debugging console throwing?

  • gaethofs
    Avatar
    Community Member
    9 Posts

    Re: JQuery Integration Link to this post

    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.

    710 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.