joshrotenberg/nest-nav.html

## nest-nav.html
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Nested Slideshows</title>
<style>
body { margin: 40px }
#controls { width: 200px; height: 55px }
#slideshow,#controls { margin: auto; overflow: hidden; }
#inner { overflow: hidden; }
#prev, #prev-inner { float: left; }
#next, #next-inner { float: right; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="https://github.com/malsup/cycle/raw/master/jquery.cycle.all.js"></script>
<script>

$(document).ready(function() {
    // init and stop the inner slideshows
    var inners = $('.inner-slideshow').cycle().cycle('stop');
    var slideshow = $('#slideshow').cycle({
        fx: 'fade',
        speed: 300,
        timeout: 0,
        prev: '#prev',
        next: '#next',
        before: function() {
            inners.cycle('stop');
            $(this).cycle({
                fx: 'fade',
                timeout: 1000,
		prev: '#prev-inner',
		next: '#next-inner',
	        end: function() {
                    slideshow.cycle('next');
                }
            });
        }
    });
});

</script>
</head>
<body>
  <div id="controls">
    <a id="prev" href="#">&lt; Outer Prev</a>
    <a id="next" href="#">Outer Next &gt;</a>
    <br />
    <a id="prev-inner" href="#">&lt; Inner Prev</a>
    <a id="next-inner" href="#">Inner Next &gt;</a>
  </div>

  <hr>
  <div id="slideshow">

    <div class="inner-slideshow">
      <div class="inner">
	first: 1</br>
	<div id="controls">
	  <a id="prev-inner" href="#">&lt; Prev</a>
	  <a id="next-inner" href="#">Next &gt;</a>
	</div>

      </div>
      <div class="inner">
	  first: 2</br>
	  <div id="controls">
	    <a id="prev-inner" href="#">&lt; Prev</a>
	    <a id="next-inner" href="#">Next &gt;</a>
	  </div>
	</div>
      <div class="inner">
	first: 3</br>
	<div id="controls">
	  <a id="prev-inner" href="#">&lt; Prev</a>
	  <a id="next-inner" href="#">Next &gt;</a>
	</div>
      </div>
    </div>

    <div class="inner-slideshow">
      <div>
	second: 1</br>
	<div id="controls">
	  <a id="prev-inner" href="#">&lt; Prev</a>
	  <a id="next-inner" href="#">Next &gt;</a>
	</div>
      </div>
      <div>
	second: 2</br>
	<div id="controls">
	  <a id="prev-inner" href="#">&lt; Prev</a>
	  <a id="next-inner" href="#">Next &gt;</a>
	</div>
      </div>
      <div>
	second: 3</br>
	<div id="controls">
	  <a id="prev-inner" href="#">&lt; Prev</a>
	  <a id="next-inner" href="#">Next &gt;</a>
	</div>
      </div>
    </div>

    <div class="inner-slideshow">
      <div>
	third: 1</br>
	<div id="controls">
	  <a id="prev-inner" href="#">&lt; Prev</a>
	  <a id="next-inner" href="#">Next &gt;</a>
	</div>
      </div>
      <div>
	third: 2</br>
	<div id="controls">
	  <a id="prev-inner" href="#">&lt; Prev</a>
	  <a id="next-inner" href="#">Next &gt;</a>
	</div>
      </div>
      <div>
	third: 3</br>
	<div id="controls">
	  <a id="prev-inner" href="#">&lt; Prev</a>
	  <a id="next-inner" href="#">Next &gt;</a>
	</div>
      </div>
      </div>

  </div>
</body>
</html>