Domanda
I have been messing around with the orbit (zurb-foundation). I want to customize the slideshow and I am getting an annoying error: "Uncaught TypeError: Object [object Object] has no method 'orbit'" It looks like foundation.orbit.js script is not definet. Another weird thing is in this script the function starts with ;(function ($, window, document, undefined) is it normal the ';' ? Here is the code:
https://stackoverflow.com/questions/22249035
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> - Welcome to Foundation</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/Content/landing-page.css" rel="stylesheet">
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery.cookie.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<link href="/Content/foundation/foundation.css" rel="stylesheet">
<link href="/Content/foundation/foundation.mvc.css" rel="stylesheet">
<link href="/Content/foundation/app.css" rel="stylesheet">
<script src="/Scripts/modernizr-2.6.2.js"></script>
<meta class="foundation-data-attribute-namespace">
<meta class="foundation-mq-xxlarge">
<meta class="foundation-mq-xlarge">
<meta class="foundation-mq-large">
<meta class="foundation-mq-medium">
<meta class="foundation-mq-small">
</head>
<body>
<div class="row">
<div class="large-1 columns">
</div>
<div class="large-10 columns large-centered">
<section class="full-grid">
<div id="travelled-places">
<img class="border" src="/Content/images/landing/canada-national-park.jpg" alt="Canada National Park" title="Canada National Park" data-thumb="~/Content/images/landing/canada-national-park.jpg" style="display: block; z-index: 1;">
<img class="border" src="/Content/images/landing/china-gardens.jpg" alt="China Gardens" title="China Gardens" data-thumb="~/Content/images/landing/china-gardens.jpg" style="display: none; z-index: 1;">
<img class="border" src="/Content/images/landing/grand-canyon.jpg" alt="Grand Canyon" title="Grand Canyon" data-thumb="~/Content/images/landing/grand-canyon.jpg" style="display: none; z-index: 1;">
<img class="border" src="/Content/images/landing/hawaii.jpg" alt="Hawaii" title="Hawaii" data-thumb="~/Content/images/landing/hawaii.jpg" style="display: none; z-index: 1;">
</div>
<div class="cn-bar">
<div class="cn-nav">
<a href="#" class="cn-nav-next">
<span>Previous</span>
<div style="background-image:url(/Content/images/landing/china-gardens.jpg);"></div>
</a>
<a href="#" class="cn-nav-next">
<span>Next</span>
<div style="background-image:url(/Content/images/landing/hawaii.jpg);"></div>
</a>
</div>
</div>
</section>
</div>
<div class="large-1 columns">
</div>
<script src="/Scripts/fastclick.js"></script>
<script src="/Scripts/placeholder.js"></script>
<script src="/Scripts/foundation/foundation.js"></script>
<script src="/Scripts/foundation/foundation.abide.js"></script>
<script src="/Scripts/foundation/foundation.accordion.js"></script>
<script src="/Scripts/foundation/foundation.alert.js"></script>
<script src="/Scripts/foundation/foundation.clearing.js"></script>
<script src="/Scripts/foundation/foundation.dropdown.js"></script>
<script src="/Scripts/foundation/foundation.equalizer.js"></script>
<script src="/Scripts/foundation/foundation.interchange.js"></script>
<script src="/Scripts/foundation/foundation.joyride.js"></script>
<script src="/Scripts/foundation/foundation.magellan.js"></script>
<script src="/Scripts/foundation/foundation.offcanvas.js"></script>
<script src="/Scripts/foundation/foundation.orbit.js"></script>
<script src="/Scripts/foundation/foundation.reveal.js"></script>
<script src="/Scripts/foundation/foundation.slider.js"></script>
<script src="/Scripts/foundation/foundation.tab.js"></script>
<script src="/Scripts/foundation/foundation.tooltip.js"></script>
<script src="/Scripts/foundation/foundation.topbar.js"></script>
<script>
//$(document).foundation();
jQuery(document).ready(function ($) {
$('#travelled-places').orbit({
animation: 'fade', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: true, // true or false to have the timer
advanceSpeed: 4000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: true, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: false, // true or false to activate the bullet navigation
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function () { } // empty function
});
});
</script>
Any idea?
Thanks in advance.
Soluzione
There are a few issues in your code:
$(document).foundation(); to initialise foundations plugins before you can use them. You're not calling orbit correctly, it is called on the document and then by adding the data-orbit attribute to your <div id="travelled-places"> element like so:
$(document).foundation({
orbit: {
... // your options
}
});
See Foundations Orbit documentation for further reference.
