Permalink
Browse files

first release

  • Loading branch information...
1 parent 37501b0 commit 9825acc2cb465c9096805aff245e6114ce2439e3 @nikki nikki committed Feb 4, 2011
Showing with 30 additions and 29 deletions.
  1. +4 −4 css/liteaccordion.css
  2. BIN img-demo/2a.jpg
  3. +25 −14 index.html
  4. +1 −11 js/liteaccordion.jquery.js
View
@@ -12,11 +12,10 @@
.accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; }
.accordion li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; position: absolute; top: 0; left: 0; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
-.accordion li > h2 b { position: absolute; top: 10%; left: 10%; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
+.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
-.accordion noscript { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: white; }
-.accordion noscript p { padding: 10px; margin: 0; }
+.accordion noscript p { padding: 10px; margin: 0; background: white; }
/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
@@ -27,8 +26,9 @@
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
-.dark li > h2 b { color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
+.dark li > h2 b { background: #353535\9; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
+.dark h2.selected b { background: #434343\9; }
.dark li > div { background: #030303; margin-left: 5px; }
/*************************************** Rounded */
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -10,7 +10,7 @@
dt { font-weight: bold }
dd { margin: 0 }
figure { display: block; width: 100%; height: 100% }
- figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: rgba(0,0,0,0.7); color: white;
+ figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
</style>
<link rel="stylesheet" href="css/liteaccordion.css">
@@ -50,7 +50,7 @@ <h2><span>Slide Two</span></h2>
<h2><span>Slide Three</span></h2>
<div>
<figure>
- <img src="img-demo/2.jpg" alt="image" />
+ <img src="img-demo/2a.jpg" alt="image" />
<figcaption>Some caption text goes in here...</figcaption>
</figure>
</div>
@@ -69,7 +69,7 @@ <h2><span>Slide Five</span></h2>
<div>
<figure>
<img src="img-demo/2.jpg" alt="image" />
- <figcaption>Bonus points for spotting the theme of these slides, tweet me @nicolahibbert :)</figcaption>
+ <figcaption>More caption text here!</figcaption>
</figure>
</div>
</li>
@@ -85,15 +85,15 @@ <h2>Download</h2>
<h2>FAQ</h2>
<dl>
<dt>Q. Why is this plugin called 'liteAccordion'?</dt>
- <dd>A. It is called liteAccordion because the raw JavaScript source is only 100000kb in size, and the themes don't use any background images. If you minify and gzip the JS, you can get the file size down to XKB!</dd>
+ <dd>A. It is called liteAccordion because the raw JavaScript source only weighs a (heavily commented!) 4.5kb, and the themes don't use any background images. If you minify and gzip the JS, you can get the file size down to ~1.2kb!</dd>
<dt>Q. What can I use it for?</dt>
<dd>A. Anything you like! Text, images, video - anything you can put in a div, you can put in a slide.</dd>
<dt>Q. But my page isn't 960px wide...</dt>
<dd>A. Not a problem. The plugin has a range of options, and I've tried to use relative measurements in the css so that the styles scale.</dd>
<dt>Q. What themes are available?</dt>
<dd>A. There are currently two themes available, 'basic' and 'dark', though I plan to add a light theme and a stitch theme based on <a href="http://www.ormanclark.com/">Orman Clark</a>'s <a href="http://www.premiumpixels.com/stitched-fabric-accordion/">stitch</a> theme for SlideDeck in the very near future. If these themes aren't suitable, you can always customise the css :)</dd>
<dt>Q. Does it work in...</dt>
- <dd>A. It works in Firefox, Chrome, Safari, Opera and IE7 upwards.</dd>
+ <dd>A. It's been tested on the latest versions of Firefox, Chrome, Safari and Opera on both OSX and W7.</dd>
<dt>Q. Sounds good! Can I use it for commercial projects?</dt>
<dd>A. liteAccordion is released under the MIT license, so it's free to use for commercial and personal projects.</dd>
</dl>
@@ -215,9 +215,8 @@ <h2>Options</h2>
slideSpeed : 800, // speed of slide animation (time/ms)
slideCallback : function() {}, // callback function triggered after slide animation is complete (function)
- autoPlay : false, // automatically scroll through the slides (boolean)
+ autoPlay : false, // automatically scroll through the slides, if true with pause on user click (boolean)
cycleSpeed : 6000, // time between slide activation (time/ms)
- pauseOnHover : false, // pause slides on hover (boolean)
theme : 'basic', // which theme to use ('basic', 'light'*, 'dark', or 'stitch'*)
rounded : false, // whether to use rounded corners or not** (boolean)
@@ -229,14 +228,13 @@ <h2>Options</h2>
onActivate : function() {
this.find('figcaption').fadeOut();
},
- slideCallback : function() {
+ slideCallback : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
- pauseOnHover : true,
theme : 'dark',
rounded : true,
- enumerateSlides : true
+ enumerateSlides : true
}).find('figcaption:first').show();</pre>
<p>Note: the context for the two callback functions is the (jQuery wrapped) slide div (adjacent to the tab trigger).</p>
@@ -278,12 +276,26 @@ <h2><span>Slide Five</span></h2>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
- <pre class="brush: js">$('#yourdiv').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });</pre>
+ <pre class="brush: js">$('#yourdiv').liteAccordion({
+ theme : 'dark',
+ containerWidth : 600,
+ containerHeight : 200,
+ slideSpeed : 600,
+ firstSlide : 2
+});</pre>
<h2>Licence</h2>
<p>The liteAccordion plugin is free for personal and commercial use, providing that the copyright notices are left intact.
You may freely include this jQuery plugin in websites, web applications, templates, themes, and other materials intended for sale and/or distribution.
You are not permitted to offer this plugin for distribution and/or resale 'as is' without prior consent.</p>
+ <p> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+ </p>
<h2>Attribution</h2>
<p>The '<a href="http://www.premiumpixels.com/horizontal-accordion-slider-psd/">dark</a>' theme was inspired by Orman Clark</a>. Thanks Orman! :)</p>
@@ -303,17 +315,16 @@ <h2>Attribution</h2>
onActivate : function() {
this.find('figcaption').fadeOut();
},
- slideCallback : function() {
+ slideCallback : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
- pauseOnHover : true,
theme : 'dark',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
$('#two').liteAccordion();
- $('#three').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });
+ $('#three').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200, slideSpeed : 600, firstSlide : 2 });
</script>
</body>
View
@@ -26,7 +26,6 @@
autoPlay : false,
cycleSpeed : 6000,
- pauseOnHover : false,
theme : 'basic', // basic, light*, dark, stitch*
rounded : false,
@@ -153,16 +152,7 @@
}, settings.slideSpeed, function() { return settings.slideCallback.call($slides.eq(index)) });
}
});
-
- // pause accordion on hover
- if (settings.pauseOnHover) {
- $slides.hover(function() {
- utils.pause();
- }, function() {
- utils.play($slides.index($(this)) + 1);
- });
- }
-
+
// start autoplay, call utils with no args = start from firstSlide
settings.autoPlay && utils.play();

0 comments on commit 9825acc

Please sign in to comment.