Permalink
Browse files

0.6.4 Minor changes to how the next/prev/pause buttons work

  • Loading branch information...
1 parent 1bf204d commit 4952c502b0d66585282b6b488452e4ced9f312b6 @IanLunn committed May 9, 2012
Showing with 266 additions and 27 deletions.
  1. +2 −0 README.md
  2. +1 −1 demo-assets/css/demo-styles.css
  3. +5 −5 documentation.html
  4. +33 −3 index.html
  5. +209 −0 release-history.html
  6. +2 −2 scripts/sequence.jquery-min.js
  7. +14 −16 scripts/sequence.jquery.js
View
@@ -35,6 +35,8 @@ http://www.opensource.org/licenses/mit-license.php | http://www.gnu.org/licenses
##What's New?
+###v0.6.4 09/05/2012
+Minor changes to how the nextButton/prevButton/pauseButton and prependNextButton/prependPrevButton/prependPauseButton options work. Now closer match how they are described in the documentation.
###v0.6.3 08/05/2012
**Check out the updated [Apple Style theme](http://www.sequencejs.com/themes/apple-style/) that showcases the new pause options and callbacks.**
@@ -71,7 +71,7 @@ body{
/* line-height: 200%;*/
list-style: none;
text-align: center;
- width: 450px;
+ width: 510px;
}
.logo-small{
View
@@ -77,16 +77,16 @@
<body id="documentation">
<div id="header">
<a class="logo" href="http://www.sequencejs.com/" title="Sequence.js"><img src="images/sequence-logo.png" alt="Sequence.js" /></a>
- <ul id="social">
+ <!--<ul id="social">
<li>Twitter</li>
<li>RSS</li>
<li>Contact</li>
- </ul>
+ </ul>-->
<ul id="nav">
- <li><a href="themes.html" title="Themes">Themes</a></li>
- <li><a href="blog/" title="Blog">Blog</a></li>
+ <!--<li><a href="themes.html" title="Themes">Themes</a></li>
+ <li><a href="blog/" title="Blog">Blog</a></li>-->
<li><a href="documentation.html" title="Documentation">Documentation</a></li>
- <li><a class="link-button" href="https://github.com/IanLunn/Sequence" title="Download from GitHub">Download Beta</a></li>
+ <li><a class="link-button" href="https://github.com/IanLunn/Sequence" title="Download from GitHub">Download</a></li>
</ul>
</div>
<div id="content">
View
@@ -32,7 +32,7 @@
<ul id="nav">
<li><a href="documentation.html" title="Documentation">Documentation</a></li>
- <li><a class="link-button" href="https://github.com/IanLunn/Sequence" title="Download from GitHub">Download Beta</a></li>
+ <li><a class="link-button" href="https://github.com/IanLunn/Sequence" title="Download from GitHub">Download</a></li>
</ul>
</div>
<div id="content">
@@ -54,8 +54,30 @@
<h2>The jQuery Slider Plugin with Infinite Style</h2>
<p>Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 -- no jQuery knowledge required!</p>
- <h3>Get Involved</h3>
- <p>Sequence is in beta and constantly improving! To help make Sequence.js great, please consider <a href="https://github.com/IanLunn/Sequence" title="Follow Sequence.js on GitHub">following the project on GitHub</a> and submitting any feedback or test themes you may have.</p>
+ <h3>Latest Update</h3><a href="release-history.html" title="View the complete release history">Release History &gt;</a>
+ <h3>v0.6.3 08/05/2012</h3>
+
+ <p><strong>Check out the updated <a href="http://www.sequencejs.com/themes/apple-style/">Apple Style theme</a> that showcases the new pause options and callbacks.</strong></p>
+
+ <h4>New Pause Options</h4>
+
+ <p>pauseButton, prependPauseButton, pauseButtonSrc, pauseButtonAlt, unpauseDelay have been added to allow for a pause button when using autoPlay. </p>
+
+ <h4>New Pause Callbacks</h4>
+
+ <p>Two new callbacks added for pause and unpause</p>
+
+ <h4>New customKeyEvent for Pausing</h4>
+
+ <p>If using customKeyEvents, you can now hook a key to the pause event.</p>
+
+ <h4>startAutoPlay Public Method Bug Fix</h4>
+
+ <p>The public method startAutoPlay accepted an argument that would cause Sequence to wait x amount of milliseconds before autoPlay was started. This argument wasn't correctly implemented but should now work.</p>
+
+ <h4>Sequence Container is Given a Class of "sequence-fallback" When in Fallback Mode</h4>
+
+ <p>If Sequence goes into fallback mode because the browser doesn't support CSS3 transitions, it is given the class of "sequence-fallback" allowing for the application of styles specifically for older browsers</p>
</div>
<div class="aside right">
<h3>Features</h3>
@@ -69,6 +91,14 @@
<li>Semantic and easy to use markup</li>
<li>Open source</li>
</ul>
+
+ <h3>Get Involved</h3>
+ <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=IanLunn&repo=Sequence&type=watch&count=true"
+ allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
+ <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=IanLunn&repo=Sequence&type=fork&count=true"
+ allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
+ <p>Sequence is constantly improving! To help make Sequence.js great, please consider <a href="https://github.com/IanLunn/Sequence" title="Follow Sequence.js on GitHub">following the project on GitHub</a> and submitting any feedback or test themes you may have.</p>
+
<small>*Tested down to Firefox 3.6 and IE7. Extensive support details to come</small>
</div>
</div>
View
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset=utf-8 />
+ <title>Sequence.js - The jQuery Slider Plugin with Infinite Style</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <link rel="stylesheet" type="text/css" media="screen" href="css/style.css?v1.01" />
+ <link href="http://fonts.googleapis.com/css?family=Magra:400,700|Telex" rel="stylesheet" type="text/css">
+ <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+ if (typeof jQuery == 'undefined'){
+ document.write(unescape("%3Cscript src='scripts/jquery.js' type='text/javascript'%3E%3C/script%3E"));
+ }
+ </script>
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-11991680-3']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+</head>
+ <body>
+ <div id="header">
+ <a class="logo" href="http://www.sequencejs.com/" title="Sequence.js"><img src="images/sequence-logo.png" alt="Sequence.js" /></a>
+
+ <ul id="nav">
+ <li><a href="documentation.html" title="Documentation">Documentation</a></li>
+ <li><a class="link-button" href="https://github.com/IanLunn/Sequence" title="Download from GitHub">Download</a></li>
+ </ul>
+ </div>
+ <div id="content">
+ <h1>Release History</h1>
+ <div class="main">
+ <div class="intro">
+ <h3>v0.6.4 09/05/2012</h3>
+
+ <p>Minor changes to how the nextButton/prevButton/pauseButton and prependNextButton/prependPrevButton/prependPauseButton options work. Now closer match how they are described in the documentation.</p>
+
+ <h3>v0.6.3 08/05/2012</h3>
+
+ <p><strong>Check out the updated <a href="http://www.sequencejs.com/themes/apple-style/">Apple Style theme</a> that showcases the new pause options and callbacks.</strong></p>
+
+ <h4>New Pause Options</h4>
+
+ <p>pauseButton, prependPauseButton, pauseButtonSrc, pauseButtonAlt, unpauseDelay have been added to allow for a pause button when using autoPlay. </p>
+
+ <h4>New Pause Callbacks</h4>
+
+ <p>Two new callbacks added for pause and unpause</p>
+
+ <h4>New customKeyEvent for Pausing</h4>
+
+ <p>If using customKeyEvents, you can now hook a key to the pause event.</p>
+
+ <h4>startAutoPlay Public Method Bug Fix</h4>
+
+ <p>The public method startAutoPlay accepted an argument that would cause Sequence to wait x amount of milliseconds before autoPlay was started. This argument wasn't correctly implemented but should now work.</p>
+
+ <h4>Sequence Container is Given a Class of "sequence-fallback" When in Fallback Mode</h4>
+
+ <p>If Sequence goes into fallback mode because the browser doesn't support CSS3 transitions, it is given the class of "sequence-fallback" allowing for the application of styles specifically for older browsers</p>
+
+ <h3>v0.6.2 06/05/2012</h3>
+
+ <p><strong>Note: 0.6.2 may not be backwards compatible with existing themes if those themes use the touchEnabled and keysNavigate settings (these settings have changed names, see below)</strong></p>
+
+ <h4>Added keyEvents Option</h4>
+
+ <p>keyEvents allows you to specify which way the left and right arrows should cause Sequence to navigate. <a href="http://www.sequencejs.com/documentation.html#options-keyboard">See Keyboard Options</a></p>
+
+ <h4>Added customKeyEvents Option</h4>
+
+ <p>customKeyEvents are keyEvents on steroids! Specify a key (using a keyCode) and the event to be trigger when the user hits that key. Example: 65: "prev" causes Sequence to navigate backwards when the "a" key is pressed on the keyboard.</p>
+
+ <h4>Added numericKeysGoToFrames Option</h4>
+
+ <p>When the keyboards numeric keys are pressed, if there is a frame that represents that number, Sequence will navigate to that frame.</p>
+
+ <h4>Added swipeEvents Option</h4>
+
+ <p>swipeEvents allows you to specify which way Sequence should navigate when the user swipes in a particular direction. Up/Down/Left/Right supported.</p>
+
+ <h4>Added swipePreventsDefault Option</h4>
+
+ <p>If set to true, on touch devices, when swiping over Sequence, the default will be prevented (the page will not scroll). Useful if you want up/down swiping to cause Sequence to navigate but be careful that this doesn't affect user experience by preventing scrolling the page all together.</p>
+
+ <h4>Changed the Names of a Few Options</h4>
+
+ <p>touchEnabled changed to swipeNavigation
+ keysNavigate changed to keyNavigation</p>
+
+ <h4>Tidied up the Documentation</h4>
+
+ <p>Changed the layout of the options in the documentation</p>
+
+ <h3>v0.6.1 03/05/2012</h3>
+
+ <h4>Bug Fix</h4>
+
+ <p>In previous versions of Sequence, all frame elements <em>HAD</em> to have a class for Sequence to work. This was unintentional but is now resolved in 0.6.1. Use IDs and classes as you see fit, but they're no longer necessary.</p>
+
+ <h3>v0.6 03/05/2012</h3>
+
+ <h4>Code Optimisation and General Tweaks</h4>
+
+ <p><strong>Note: 0.6 may not be backwards compatible with existing themes, particularly if they use before/after callbacks or rely on the "current" class</strong></p>
+
+ <ul>
+ <li><p>A frame is now only deemed as being "current" when it is in the viewport but not animating. If animating in, it will have a class of "next-frame". The "current" frame now has a class of "current-frame".</p></li>
+ <li><p>Changed the before/after callbacks. These callbacks are now beforeNextFrameAnimatesIn, afterNextFrameAnimatesIn, beforeCurrentFrameAnimatesOut. Please consult the documentation and the <a href="documentation theme">http://sequencejs.com/themes/documentation-demo/</a> to better understand this.</p></li>
+ <li><p>before/after callbacks are now working correctly in the fallback themes.</p></li>
+ </ul>
+
+ <h4>Fix for Reversed Animation Speeds</h4>
+
+ <p>If an element animates-in at 2 seconds and then animates-out at 3, when it reverses in (from the animate-out position), it will take 3 seconds. </p>
+
+ <h3>v0.5.2 02/05/2012</h3>
+
+ <h4>Made 'Modern Slide In' Responsive</h4>
+
+ <p>The theme 'Modern Slide In' is now responsive.</p>
+
+ <p>No changes made to Sequence.js.</p>
+
+ <h3>v0.5.2 18/04/2012</h3>
+
+ <h4>Touch Swiping Improved</h4>
+
+ <p>Swiping on touch devices has been improved and swipeThreshold is working again. Links within frames are clickable and the page can be scrolled vertically without initiating a frame change.</p>
+
+ <h3>v0.5.1 17/04/2012</h3>
+
+ <h4>Changed Default Values for nextButton and prevButton</h4>
+
+ <p>The nextButton and prevButton options are now turned off out of the box. To turn them on, either use the defaults by setting these options to true or by specifying a CSS selector to use your own custom buttons</p>
+
+ <h3>v0.5 15/04/2012</h3>
+
+ <h4>Multiple Instances Now Working</h4>
+
+ <p>Merged a pull request that got multiple instances of Sequence on one page working.</p>
+
+ <h3>v0.4 11/03/2012</h3>
+
+ <h4>Previous/Next Button Options</h4>
+
+ <p>The previous and next buttons now have a couple more options:
+ - nextButtonSrc: specify a path to an image to be used as the next button
+ - nextButtonAlt: specify a string to be used as the alt text for the next button image
+ - prevButtonSrc: specify a path to an image to be used as the previous button
+ - prevButtonAlt: specify a string to be used as the alt text for the previous button image</p>
+
+ <h4>Maintenance</h4>
+
+ <p>General tidy up of the script. Made some changes for better practice -- now only using one jQuery function etc, all dependencies are enclosed within the Sequence function. Also optimised .init().</p>
+
+ <h3>v0.3 06/03/2012)</h3>
+
+ <h4>Modernizr Detect</h4>
+
+ <p>Sequence will now detect whether Modernizr.prefixed is installed on the site, if it's not, it'll use its own instance.</p>
+
+ <h4>pauseOnElementsOutsideContainer</h4>
+
+ <p>Sequence will now only trigger the pause function when hovering over its child elements inside the container. If you'd like Sequence to pause when hovering on child elements outside of the container, set this to true.</p>
+
+ <h4>pauseIcon Fix</h4>
+
+ <p>In update v0.2, the pauseIcon option got broken. This is now fixed.</p>
+
+ <h3>v0.2 28/02/2012</h3>
+
+ <h4>Preloader</h4>
+
+ <p>Sequence now has a default preloader or support for a custom preloader. When preloading is complete, a class of "preloading-complete" can be added to one or multiple elements to allow you to write your own reveal using CSS3 transitions. Also comes with a callback for when the preloading is complete.</p>
+
+ <h4>Cycle Option</h4>
+
+ <p>Choose whether Sequence should go back to the start when it reaches the last frame (or the first frame if navigating backwards)</p>
+
+ <h4>reverseAnimationsWhenNavigatingBackwards Option</h4>
+
+ <p>When navigating backwards, you can now specify whether frames should animate forwards or in reverse</p>
+ </div>
+ </div>
+ </div>
+ <div id="footer">
+ <small><a href="http://www.sequencejs.com/" title="SequenceJS.com">SequenceJS.com</a>, the sequence.js script and its dependencies are &copy; 2012 <a href="http://www.ianlunn.co.uk/" title="Ian Lunn Design">Ian Lunn Design</a> unless otherwise specified.</small>
+ <ul>
+ <li>
+ <div class="twitter-follow-button">For updates: <a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false">Follow @IanLunn</a>
+ <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
+ </li>
+ <li>
+ <a href="http://www.ianlunn.co.uk/" title="Hire Ian Lunn Design"><img src="images/ianlunn-logo-small.png" alt="Hire Ian Lunn Design"></a>
+ </li>
+ </ul>
+ </div>
+ </body>
+</html>
+

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -1,6 +1,6 @@
/*
Sequence.js (www.sequencejs.com)
-Version: 0.6.3 Beta
+Version: 0.6.4 Beta
Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Github: https://github.com/IanLunn/Sequence
@@ -78,26 +78,24 @@ Aside from these comments, you may modify and distribute this file as you please
uiElements: function(prependTo, devOption, defaultOption, elementSrc, elementAlt){
switch(devOption){
- case true:
- case undefined:
-
- if(devOption && !prependTo){
- prependTo = true;
- }
- var prependElement = (prependTo == true) ? self.container : prependTo;
- $(prependElement).prepend('<img '+this.CSSSelectorToHTML(defaultOption)+ 'src="'+elementSrc+'" alt="'+elementAlt+'" />');
- return $(defaultOption);
- break;
-
case false:
return undefined;
- break;
-
+ break;
+
+ case true:
+ if(prependTo == true){
+ $(self.container).prepend('<img '+this.CSSSelectorToHTML(defaultOption)+ 'src="'+elementSrc+'" alt="'+elementAlt+'" />');
+ }else if(prependTo != false){
+ $(prependTo).prepend('<img '+this.CSSSelectorToHTML(defaultOption)+ 'src="'+elementSrc+'" alt="'+elementAlt+'" />');
+ }
+ return $(defaultOption);
+ break;
+
default:
var prependElement = (prependTo == true) ? self.container : prependTo;
$(prependElement).prepend('<img '+this.CSSSelectorToHTML(devOption)+ 'src="'+elementSrc+'" alt="'+elementAlt+'" />');
return $(devOption);
- break;
+ break;
}
},
@@ -834,7 +832,7 @@ Aside from these comments, you may modify and distribute this file as you please
showPrevButtonOnInit: true,
//Pause Settings
- pauseButton: false,
+ pauseButton: false, //if dev settings are true, the pauseButton will be ".pause"
prependPauseButton: false,
pauseButtonSrc: "images/bt-pause.png",
pauseButtonAlt: "&#166;&#166;",

0 comments on commit 4952c50

Please sign in to comment.