diff --git a/code/solutions/slideshow.js b/code/solutions/slideshow.js index 776c3d48..24466bef 100644 --- a/code/solutions/slideshow.js +++ b/code/solutions/slideshow.js @@ -20,78 +20,81 @@ $('h1').html('new html').attr() $(document).ready(function() { - var timeout, manualMode = false, - - $slideshow = $('#slideshow').prependTo('#main'), - - $counter = $('
').insertAfter($slideshow), - - $controls = $('').insertAfter($slideshow), - - $prevBtn = $('', { - type : 'button', - value : 'previous' - }).appendTo($controls), - - $nextBtn = $('', { - type : 'button', - value : 'next' - }).appendTo($controls), - - $items = $slideshow.find('li').hide(), - - total = $items.length, - - updateCounter = function(num) { - $counter.text(num + ' of ' + total); - }, - - getItem = function($item, trav) { - var $returnItem = $item[trav](); - return $returnItem.length ? - $returnItem : - $items[(trav == 'next') ? 'first' : 'last'](); - }, - - showItem = function($currentItem, $itemToShow) { - var $itemToShow = - $itemToShow || getItem($currentItem,'next'); - - $currentItem.fadeOut(500, function() { - $itemToShow.fadeIn(500, fadeCallback); - }); - }, - - fadeCallback = function() { - if (manualMode) { return; } - - var $this = $(this), - $next = getItem($this, 'next'), - num = $this.prevAll().length + 1; - - // update the counter - updateCounter(num); - - // set the timeout for showing - // the next item in 5 seconds - timeout = setTimeout(function() { - showItem($this, $next); - }, 5000); - }, - - handleBtnClick = function(e) { - clearTimeout(timeout); - - manualMode = true; - - var $currentItem = $items.filter(':visible'), - $itemToShow = getItem($currentItem, e.data.direction); - - showItem($currentItem, $itemToShow); - }; - - $prevBtn.bind('click', { direction : 'prev' }, handleBtnClick); - $nextBtn.bind('click', { direction : 'next' }, handleBtnClick); - - $items.eq(0).fadeIn(500, fadeCallback); -}); + var timeout, manualMode = false, + + $slideshow = $('#slideshow').prependTo('#main'), + + $counter = $('').insertAfter($slideshow), + + $controls = $('').insertAfter($slideshow), + + $prevBtn = $('', { + type : 'button', + value : 'previous' + }).appendTo($controls), + + $nextBtn = $('', { + type : 'button', + value : 'next' + }).appendTo($controls), + + $items = $slideshow.find('li').hide(), + + total = $items.length, + + updateCounter = function(num) { + $counter.text(num + ' of ' + total); + }, + + getItem = function($item, trav) { + var $returnItem = $item[trav](); + return $returnItem.length ? + $returnItem : + $items[(trav == 'next') ? 'first' : 'last'](); + }, + + showItem = function($currentItem, $itemToShow) { + var $itemToShow = + $itemToShow || getItem($currentItem,'next'); + + $currentItem.fadeOut(500, function() { + $itemToShow.fadeIn(500, fadeCallback); + }); + + }, + + fadeCallback = function() { + + + var $this = $(this), + + num = $this.prevAll().length + 1; + + // update the counter + updateCounter(num); + if (manualMode) { return; } + $next = getItem($this, 'next'), + // set the timeout for showing + // the next item in 5 seconds + timeout = setTimeout(function() { + showItem($this, $next); + }, 5000); + }, + + handleBtnClick = function(e) { + clearTimeout(timeout); + + manualMode = true; + + + var $currentItem = $items.filter(':visible'), + $itemToShow = getItem($currentItem, e.data.direction); + + showItem($currentItem, $itemToShow); + }; + + $prevBtn.bind('click', { direction : 'prev' }, handleBtnClick); + $nextBtn.bind('click', { direction : 'next' }, handleBtnClick); + + $items.eq(0).fadeIn(500, fadeCallback); +}); \ No newline at end of file