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.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

$silverstripenavigator kills the carousel


Reply

4 Posts   1187 Views

Avatar
JMagnusson

28 July 2011 at 5:07am Community Member, 29 Posts

Hello.
I tried to use a jQuery Carousel (http://www.bkosborne.com/jquery-feature-carousel). But with $SilverStripeNavigator I get this error: "jquery-1.5.1.min.js:16Uncaught TypeError: Object #<Object> has no method 'featureCarousel'".
How can I solve this problem?

Thanks/ Johan

Avatar
Webdoc

28 July 2011 at 11:14pm Community Member, 332 Posts

Can i see the head code of your page.ss did u add the js loading there

Avatar
JMagnusson

29 July 2011 at 12:45am (Last edited: 29 July 2011 12:53am), Community Member, 29 Posts

Right now it is like this.
I have removed the $SilverStripeNavigator from the page type, but I hope for another way to solve it.

<!DOCTYPE html>
<html lang="sv" xmlns:fb="http://www.facebook.com/2008/fbml">
   <head>
      <% base_tag %>
      <title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
      $MetaTags
      <link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" ></link>
      <script type="text/javascript" src="mysite/javascript/jquery-1.2.2.pack.js"></script>
      <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic" type="text/css"></link>
      <% require themedCSS(typography) %>
      <% require themedCSS(layout) %>
      <% require themedCSS(form) %>
      <% require themedCSS(homepage) %>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
      <script type="text/javascript" src="$ThemeDir/scripts/hover.js"></script>
      <script type="text/javascript" src="mysite/javascript/facebox.js" ></script>
      <link rel="stylesheet" type="text/css" href="mysite/css/facebox.css" media="screen" ></link>

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

      <!-- For homepage carousel -->
      <link rel="stylesheet" href="$ThemeDir/css/feature-carousel.css" charset="utf-8" ></link>
      <script src="$ThemeDir/scripts/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="$ThemeDir/scripts/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
      
      
      
      <script type="text/javascript">
      $(document).ready(function() {
         $("#carousel").featureCarousel({
         // include options like this:
         // (use quotes only for string values, and no trailing comma after last option)
         // option: value,
         trackerIndividual: false,
         trackerSummation: false,
         topPadding:5,
         captionBelow: false

         });
      });
      </script>

   </head>

No file is missing, as far as I can see in firebug.

Thanks!

Avatar
Willr

29 July 2011 at 7:55pm Forum Moderator, 5511 Posts

You should wrap your javascript code in a closure to ensure it doesn't conflict - http://doc.silverstripe.org/sapphire/en/topics/javascript#custom-jquery-code