-
Notifications
You must be signed in to change notification settings - Fork 379
Setup
Mottie edited this page Jul 11, 2011
·
26 revisions
Wiki: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks & Events , Video , Interactivity & Misc ) Change | Credits
##Sections
- Default Options
- Setup – Standard Page
- Setup – Movable Type
- Setup – Wordpress
- Using jQuery 1.3.2
##Default Options
$('#slider').anythingSlider({
// Appearance
theme : "default", // Theme name
expand : false, // If true, the entire slider will expand to fit the parent element
resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
showMultiple : false, // Set this value to a number and it will show that many slides at once
easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI
buildArrows : true, // If true, builds the forwards and backwards buttons
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
buildStartStop : true, // If true, builds the start/stop button and adds slideshow functionality
appendForwardTo : null, // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendBackTo : null, // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendControlsTo : null, // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendNavigationTo : null, // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendStartStopTo : null, // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
toggleArrows : false, // If true, side navigation arrows will slide out on hovering & hide @ other times
toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
startText : "Start", // Start button text
stopText : "Stop", // Stop button text
forwardText : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
backText : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
tooltipClass : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
// Function
enableArrows : true, // if false, arrows will be visible, but not clickable.
enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
enableStartStop : true, // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
enableKeyboard : true, // if false, keyboard arrow keys will not work for this slider.
// Navigation
startPanel : 1, // This sets the initial panel
changeBy : 1, // Amount to go forward or back when changing panels.
hashTags : true, // Should links change the hashtag in the URL?
infiniteSlides : true, // if false, the slider will not wrap & not clone any panels
navigationFormatter : null, // Details at the top of the file on this use (advanced use)
// Slideshow options
autoPlay : false, // If true, the slideshow will start running; replaces "startStopped" option
autoPlayLocked : false, // If true, user changing slides will not stop the slideshow
autoPlayDelayed : false, // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
playRtl : false, // If true, the slideshow will move right-to-left
// Times
delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
resumeDelay : 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
animationTime : 600, // How long the slideshow transition takes (in milliseconds)
// Callbacks
onBeforeInitialize : function(e, slider) {}, // Callback before the plugin initializes
onInitialized : function(e, slider) {}, // Callback when the plugin finished initializing
onShowStart : function(e, slider) {}, // Callback on slideshow start
onShowStop : function(e, slider) {}, // Callback after slideshow stops
onShowPause : function(e, slider) {}, // Callback when slideshow pauses
onShowUnpause : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
onSlideInit : function(e, slider) {}, // Callback when slide initiates, before control animation
onSlideBegin : function(e, slider) {}, // Callback before slide animates
onSlideComplete : function(slider) {}, // Callback when slide completes; this is the only callback without an event "e" variable
// Interactivity
clickForwardArrow : "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
clickBackArrow : "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
clickControls : "click focusin", // Events used to activate navigation control functionality
clickSlideshow : "click", // Event used to activate slideshow play/stop button
// Video
resumeOnVideoEnd : true, // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
addWmodeToObject : "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
isVideoPlaying : function(base){ return false; } // return true if video is playing or false if not - used by video extension
});##Setup - Standard Page
Add the following inside the <head></head> of your page. Note: AnythingSlider requires jQuery 1.4+ to work properly.
<!-- jQuery (required) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Optional plugins -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<!-- Add the stylesheet(s) you are going to use here. All stylesheets are included below, remove the ones you don't use. -->
<link rel="stylesheet" href="css/theme-metallic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-minimalist-round.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-minimalist-square.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-construction.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-cs-portfolio.css" type="text/css" media="screen" />
<!-- AnythingSlider optional extensions -->
<script src="js/jquery.anythingslider.fx.js"></script>
<script src="js/jquery.anythingslider.video.js"></script>
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
<!-- Required -->
<script type="text/javascript">
$(function(){
$('#slider').anythingSlider(); // add any non-default options here
});
</script> <ul id="slider">
<li><div class="text">Put anything you want here</div></li>
<li><img src="image1.jpg" /></li>
<li><object>...</object></li>
<li>
<div class="list">
<h4>Title</h4>
<ul>
<li>List item #1</li>
<li>List item #2</li>
</ul>
</div>
</li>
</ul>or in AnythingSlider version 1.5.19+ this HTML will work:
<div id="slider">
<div><!-- slide content --></div>
<div><!-- slide content --></div>
<div><!-- slide content --></div>
</div>##Setup - Movable Type
- Ken Edwards (meancode) made a plugin to make it easy to install and use AnythingSlider!
- Follow the Installation and plugin setup sections in the mt-plugin-anythingslider readme.
##Setup - Wordpress
-
Jacob Dubail (jacobdubail on github) has made a plugin to make installing AnythingSlider easy in WordPress!
-
Intallation:
-
You can install AnythingSlider for WordPress directly from the WordPress admin panel.
- Visit the Plugins/Add New page and search for 'AnythingSlider for WordPress'.
- Click to automatically install.
- Once installed and activated visit the AnythingSlider admin page (Settings/AnythingSlider) to customize the global AnythingSlider settings.
-
If you're old school, you can download the plugin, upload the files into the wp-content/plugins directory of your server via FTP, and then visit the Plugins page of the admin panel to activate it.
-
##Using jQuery 1.3.2
- By default, AnythingSlider was written to work with jQuery version 1.4+. But if you must use jQuery 1.3.2, then open the "jquery.anythingslider.js" file in an editor and uncomment out the last section.
/* AnythingSlider works with works with jQuery 1.4+, but you can uncomment the code below to make it
work with jQuery 1.3.2. You'll have to manually add the code below to the minified copy if needed */
// Copied from jQuery 1.4.4 to make AnythingSlider backwards compatible to jQuery 1.3.2
if (typeof jQuery.fn.delay === 'undefined') {
jQuery.fn.extend({
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time; type = type || "fx";
return this.queue( type, function() { var elem = this; setTimeout(function() { jQuery.dequeue( elem, type ); }, time ); });
}
});
}Wiki: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks & Events , Video , Interactivity & Misc ) Change | Credits