Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>AnythingSlider</title>
<link rel="stylesheet" href="css/slider/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider/anythingslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.2.js"></script>
<script src="js/slider/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function formatText(index, panel) {
return index;
}
$(function () {
$('#slider1').anythingSlider({
easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: false, // This turns off the entire FUNCTIONALY, not just if it starts running or not
startStopped: false, // If autoPlay is on, this can force it to start stopped
delay: 3000, // How long between slide transitions in AutoPlay mode
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Start", // Start text
stopText: "Stop", // Stop text
navigationFormatter: null, // Details at the top of the file on this use (advanced use)
forwardText: "»", // Link text used to move the slider forward
backText: "«", // Link text used to move the slider back
buildArrows: false, // If true, builds the forwards and backwards buttons
resizeContents: true, // If true, solitary images in the panel will expand to fit the panel
width: 800 // Override the default CSS width
});
$('#slider2').anythingSlider({
resizeContents: false,
autoPlay: false,
width: 600, // if resizeContent is false, this is the default width if panel size is not defined
height: 350 // if resizeContent is false, this is the default height if panel size is not defined
})
$("#slide-jump").click(function(){
$('.anythingSlider').eq(1).anythingSlider(4);
return false;
});
});
</script>
</head>
<body>
<div id="page-wrap">
<a href="http://github.com/ProLoser/AnythingSlider" id="dl">Download Latest on Github</a>
<h5><a href="http://css-tricks.com/examples/AnythingSlider/">Original</a> By <a href="http://css-tricks.com">Chris Coyier</a>, based upon lots of smart stuff by <a href="http://jqueryfordesigners.com/">Remy Sharp</a>,<br />
significantly improved by <a href="http://pixelgraphics.us/">Douglas Neiner</a></h5>
<h1>AnythingSlider</h1>
<!-- AnythingSlider #2 -->
<ul id="slider1">
<li class="panel1">
<div id="textSlide">
<img src="images/slider/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
<h4>Ingredients</h4>
<ul>
<li>1 bagel, split and toasted</li>
<li>2 tablespoons cream cheese</li>
<li>1 roma (plum) tomatoes, thinly sliced</li>
<li>salt and pepper to taste</li>
<li>4 leaves fresh basil</li>
</ul>
</div>
</li>
<li class="panel2">
<div class="quoteSlide">
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<br>-- Les Dawson</blockquote>
</div>
</li>
<li class="panel3">
<img src="images/slider/slide-tele-1.jpg" alt="" />
</li>
<li class="panel4">
<div class="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>
<li class="panel5">
<img src="images/slider/slide-tele-2.jpg" alt="" />
</li>
</ul> <!-- END AnythingSlider #2 -->
<h2>Features</h2>
<ul>
<li>Slides are HTML Content (can be anything)</li>
<li>Optional Next Slide / Previous Slide Arrows</li>
<li>Use keyboard navigation or tabs that are built and added dynamically (any number of slides)</li>
<li>Optional custom function for formatting navigation text</li>
<li>Auto-playing (optional feature, can start playing or stopped)</li>
<li>Each slide has a hashtag (can link directly to specific slides)</li>
<li>Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide)</li>
<li>Multiple sliders allowable per-page</li>
<li>Pauses slideshow autoPlay on hover (option)</li>
<li>Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web)</li>
<li>Link to specific slides from static text links (<a href="#" id="slide-jump">Slide 4</a> in second example)</li>
<li>Optionally autoPlay once through, stopping on the last page</li>
</ul>
<h2>Usage & Options (defaults)</h2>
<pre>$('.anythingSlider').anythingSlider({
easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not
startStopped: false, // If autoPlay is on, this can force it to start stopped
delay: 3000, // How long between slide transitions in AutoPlay mode
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Start", // Start text
stopText: "Stop", // Stop text
navigationFormatter: null, // Details at the top of the file on this use (advanced use)
forwardText: "&raquo;", // Link text used to move the slider forward
backText: "&laquo;", // Link text used to move the slider back
width: null, // Override the default CSS width
height: null, // Override the default CSS height
buildArrows: true, // If true, builds the forwards and backwards buttons
resizePanel: true // If true, solitary images in the panel will expand to fit the panel
});</pre>
<h3>Linking directly to slides</h3>
<pre>$("#slide-jump").click(function(){
$('.anythingSlider').eq(1).anythingSlider(4);
});</pre>
<h2>Changelog</h2>
<h3>Version 1.3.5</h3>
<ul>
<li>Added resizePanel option - does not support percentage sizing.<br><br>
<ul>
<li>When true, it will resize all panels & solitary content to the size settings (CSS or the script options).</li>
<li>When false, the AnythingSlider wrapper will resize to fit the panel (set inline or in the CSS for each panel).</li>
</ul>
</li>
<li>Fixed keyboard navigation to work with multiple AnythingSliders on a page.</li>
<li>Added tabbed navigation. Both the links within panels and the thumbnail navigation will activate it.</li>
</ul>
<h3>Version 1.3.4</h3>
<ul>
<li>Added keyboard navigation</li>
<li>Embeded objects will now resize to fit the panel</li>
<li>YouTube videos will pause the video when it is not in view and play (if already started) when in view (in non-IE browsers)<br>
*Note: this feature only works when the files are hosted on a webserver as the flash player restricts calls between local files and the internet.
</li>
<li>Modified code according to JSLint & added minified version.</li>
</ul>
<h3>Version 1.3.3</h3>
<ul>
<li>Previous / Next arrows are now optional</li>
<li>Clicking start button immediately begins transition instead of waiting for the delay</li>
</ul>
<h3>Version 1.3.2</h3>
<ul>
<li>Greatly refactored CSS for a more fluid resizing behavior</li>
<li>Dimensions can be passed via javascript or modified at the top of the css file</li>
<li>Merged all Github forks</li>
<li>Wrapper DIVs (<div class="anythingSlider"><div class="wrapper">) no longer required in html. Divs are generated in jquery</li>
<li>Improved CSS scope and classes, Javascript degredation is handled differently now however</li>* Greatly refactored CSS for a more fluid resizing behavior
<li>Hash URLS now work for multiple panels</li>
</ul>
<h3>Version 1.3</h3>
<ul>
<li>Accessibility improvements by Matt Lawson</li>
<li>Some generic JavaScript/HTML/CSS code cleaning</li>
<li>Moved to GitHub entirely</li>
<li>Ensures unique panel ID's</li>
<li>Removes navigation if there is only one panel</li>
<li>Added option to stop on the last page when autoPlay is set to true</li>
</ul>
<h3>Version 1.2</h3>
<ul>
<li>Bug Fix: When autoPlay was set to false, any interaction with the control would cause a javascript error.</li>
</ul>
<h3>Version 1.1</h3>
<ul>
<li>Changed default easing to "swing" so didn't depend on any other plugins</li>
<li>Removed extra junk (other plugins used for design, etc)</li>
<li>Added Pause on Hover option</li>
<li>Added options for passing in HTML for the start and stop button</li>
<li>Added option to use custom function for formatting the titles of the navigation</li>
<li>Added public interface for linking directly to certain slides</li>
</ul>
<h3>Version 1.0</h3>
<ul>
<li>First version</li>
</ul>
</div>
</body>
</html>
Anythinslider navigationFormatter
Reply With Quote
Bookmarks