Permalink
Browse files

add timer

  • Loading branch information...
elclanrs committed Oct 22, 2012
1 parent 501854c commit e3538d940c4102307f037c556d958350eaafa0af
Showing with 76 additions and 28 deletions.
  1. +1 −1 css/jquery.tiles.min.css
  2. +8 −8 index.html
  3. +49 −15 js/jquery.tiles.js
  4. +1 −1 js/min/jquery.tiles.min.js
  5. +17 −3 less/jquery.tiles.less
  6. BIN zip/jquery.tiles.zip
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -59,13 +59,13 @@ <h1><img src="img/logo.png" alt="jq-tiles" /></h1>
<img src="img/img01.jpg"/><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p>
<img src="img/img02.jpg"/><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p>
<img src="img/img03.jpg"/><p><strong>Pork turkey:</strong> shoulder, filet mignon chuck t-bone bacon.</p>
- <img src="img/img04.jpg"/><p><strong>Short loin:</strong> pig jowl fatback, pork loin pork chop.</p>
- <img src="img/img05.jpg"/><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p>
- <img src="img/img06.jpg"/><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p>
- <img src="img/img07.jpg"/><p><strong>Pork turkey:</strong> shoulder, filet mignon chuck t-bone bacon.</p>
- <img src="img/img08.jpg"/><p><strong>Short loin:</strong> pig jowl fatback, pork loin pork chop.</p>
- <img src="img/img09.jpg"/><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p>
- <img src="img/img10.jpg"/><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p>
+ <!--<img src="img/img04.jpg"/><p><strong>Short loin:</strong> pig jowl fatback, pork loin pork chop.</p>-->
+ <!--<img src="img/img05.jpg"/><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p>-->
+ <!--<img src="img/img06.jpg"/><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p>-->
+ <!--<img src="img/img07.jpg"/><p><strong>Pork turkey:</strong> shoulder, filet mignon chuck t-bone bacon.</p>-->
+ <!--<img src="img/img08.jpg"/><p><strong>Short loin:</strong> pig jowl fatback, pork loin pork chop.</p>-->
+ <!--<img src="img/img09.jpg"/><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p>-->
+ <!--<img src="img/img10.jpg"/><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p>-->
</div>
</div>
</section>
@@ -79,7 +79,7 @@ <h1><img src="img/logo.png" alt="jq-tiles" /></h1>
// Options
- var defaults = { thumbSize: 20 };
+ var defaults = { thumbSize: 20, onLoopEnd: function(){ $('.stop, .start').toggle() } };
var effects = {
'default': { x:6, y:4, random: true },
View
@@ -22,8 +22,10 @@
navWrap: null,
thumbs: true,
thumbSize: 25,
+ timer: true,
beforeChange: $.noop,
- afterChange: $.noop
+ afterChange: $.noop,
+ onLoopEnd: $.noop
}
, Utils = {
/**
@@ -60,12 +62,14 @@
this.imgWidth = this.$container.width()
this.imgHeight = this.$container.height()
- this.interval = null
+ this.slideshow = null
+ this.endLoop = null
this.isAnimating = null
// Assign in _init when elements are generated
this.$navLinks = null
this.$descriptions = null
+ this.$timer = null
if ( this.opts.rewind ) { this.opts.fade = true }
@@ -100,6 +104,11 @@
self.$navLinks = self.$container.find('.tiles-nav-item')
}
+ if ( o.timer ) {
+ self._addTimer()
+ self.$timer = self.$container.find('.tiles-timer')
+ }
+
self._setupDescriptions()
self.$descriptions = self.$container.find('.tiles-description')
self._showOrHideDescription()
@@ -112,6 +121,22 @@
},
+ _addTimer: function() {
+ this.$container.append('<div class="tiles-timer"/>')
+ },
+
+ _updateTimer: function() {
+ if ( this.opts.timer ) {
+ this.$timer.animate( { width: '100%' }, this.opts.slideSpeed, 'linear' )
+ }
+ },
+
+ _resetTimer: function() {
+ if ( this.opts.timer ) {
+ this.$timer.stop( true ).width( 0 )
+ }
+ },
+
_addNav: function() {
var self = this
@@ -154,8 +179,8 @@
self.$container.append( $nav.append( $links ) )
// Adjust center
$nav.css( 'margin-left', '-'+ $nav.outerWidth()/2 +'px' )
- }
-
+ }
+
self.$container.append( $prev, $next )
// Adjust thumbnails when already in DOM
@@ -171,9 +196,10 @@
},
_updateNav: function() {
- if ( this.interval ) { this.stop().start() }
- this.$navLinks.removeClass('tiles-nav-active')
- .eq( this._getCurrentIdx() ).addClass('tiles-nav-active')
+ if ( this.opts.nav ) {
+ this.$navLinks.removeClass('tiles-nav-active')
+ .eq( this._getCurrentIdx() ).addClass('tiles-nav-active')
+ }
},
_setupDescriptions: function() {
@@ -313,13 +339,15 @@
$cur.remove()
self._resetTiles( $cur )
self._showOrHideDescription( true )
+ if ( self.slideshow ) { self.stop().start() }
callback()
o.afterChange()
})
o.beforeChange()
self._updateNav()
+ self._resetTimer()
self._showOrHideDescription( false )
return this
@@ -354,24 +382,30 @@
var self = this
, o = self.opts
- , endLoop = ( o.slideSpeed * (self.$wraps.length-1) ) + o.tileSpeed
-
- if ( self.interval ) { self.stop().next() }
+ , totalSpeed = o.slideSpeed + o.tileSpeed + o.cssSpeed
+ , endLoop = totalSpeed * ( self.$wraps.length - self._getCurrentIdx() - 1 )
- self.interval = setInterval(function() {
- self.next() }, o.slideSpeed )
+ this.slideshow = true
+ self.timeout = setTimeout(function(){ self.next() }, o.slideSpeed )
if ( !o.loop ) {
- setTimeout(function(){ self.stop() }, endLoop );
+ self.endLoop = setTimeout(function(){
+ self.stop()
+ o.onLoopEnd()
+ }, endLoop );
}
+ this._updateTimer()
+
return this
},
stop: function() {
- clearInterval( this.interval )
- this.interval = false
+ clearTimeout( this.timeout )
+ clearTimeout( this.endLoop )
+ this.slideshow = false
+ this._resetTimer()
return this
}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -28,6 +28,8 @@
* Global:
----------------------------------------------*/
+@main-color: #088BBF;
+
.tiles-preload .tiles-slider-wrap * {
-webkit-transition: none !important;
-moz-transition: none !important;
@@ -63,6 +65,18 @@
z-index: 0;
.transition(all .3s ease-in-out);
}
+/*-----------------------------------------------
+ * Timer:
+ ----------------------------------------------*/
+.tiles-timer {
+ position: absolute;
+ top: 0;
+ height: 5px;
+ width: 0;
+ background: @main-color;
+ /*border-bottom: 1px solid white;*/
+ /*box-shadow: 0 1px 4px rgba(0,0,0,.5)*/
+}
/*-----------------------------------------------
* Navigation:
@@ -118,10 +132,10 @@
border-radius: 2px;
&:hover {
text-decoration: none;
- color: #088BBF;
+ color: @main-color;
}
&.tiles-nav-active {
- background: #088BBF;
+ background: @main-color;
color: #fff;
}
}
@@ -133,7 +147,7 @@
margin: 0 .3em;
border-radius: 16px;
background: #ddd;
- &.tiles-nav-active { background: #088BBF; }
+ &.tiles-nav-active { background: @main-color; }
}
/* Thumbnails */
span {
View
Binary file not shown.

0 comments on commit e3538d9

Please sign in to comment.