jQuery: imageBook + gallery

gistfile1.txt

/* 
 * imageBook and Gallery
 * two simple, similar plugins which scroll through a set of images
 */

// -------------
// sample css
// -------------
/* imageBook */
#imageBook { height:360px; }
#slides { position:relative; }
#slides .slide { width:100%; z-index:1; position:absolute; top:0; text-align:center; }

/* gallery */
#controls { height:14px; padding:0 24px; top:0; left:20%; }
#controls a { display:block; float:left; padding:0; margin:0 2px; height:16px; width:16px; text-decoration:none; background:none; }
.jump { font-size:20px; line-height:12px; text-align:center; color:#ddd; }
.jump:hover { color:#bbb; }
.jump.active { color:#888; }
.prev, .next { color:#000; }
.prev:hover, .next:hover { color:#888; background:none; }
#gallery { position:relative; }
#gallery article { position:absolute; top:20px; width:auto; display:none; }
.art img { border:2px solid #eee; padding:2px; height:320px; }
.art h3, .art p { text-align:center; width:100%; }
.art h3 { font-weight:bold; }



// -------------
// sample html
// -------------
	<section id="imageBook" data-nav="imagebook">
		<h1>ImageBook</h1>
		<div id="slides">
			<div class="slide">
				<img src=".....jpeg" alt="">
			</div>
			<div class="slide">
				<img src="http://placehold.it/300x185" alt="">
			</div>
		</div>
	</section>

	<section id="gallery" data-nav="artwork">
		<h1>Gallery</h1>
		<div id="controls">
			<a href="#" class="prev">◄</a>
			<a href="#image-1" class="jump active">●</a>
			<a href="#image-2" class="jump">●</a>
			<a href="#image-3" class="jump">●</a>
			<a href="#image-4" class="jump">●</a>
			<a href="#image-5" class="jump">●</a>
			<a href="#" class="next">▶</a>
		</div>
		<div style="position:relative; min-height:400px">
		<article id="image-1" class="art">
			<img src=".....jpg" alt=""><h3>Renovation</h3><p>123″ x 321″. Oil on canvas.</p>
		</article>
		<article id="image-2" class="art">
			<img src=".....jpg" alt=""><h3>Boards</h3><p>123″ x 321″. Oil on canvas.</p>
		</article>
		<article id="image-3" class="art">
			<img src=".....jpg" alt=""><h3>Phase</h3><p>123″ x 321″. Oil on canvas.</p>
		</article>
		<article id="image-4" class="art">
			<img src=".....jpg" alt=""><h3>Struts</h3><p>123″ x 212″. Oil on canvas.</p>
		</article>
		<article id="image-5" class="art">
			<img src="......jpg" alt=""><h3>Studio A</h3><p>123″ x 321″. Oil on canvas.</p>
		</article>
	</section>




// -------------
// sample js
// -------------
	$.fn.imageBook = function(opts) {
		opts = $.extend({
			pause:5000,
			auto:true
		},
		opts || {});
		return this.each(function() {
			var slideshow, slide = 0;
			var slides = $('.slide', $(this) );		// we assume a particular html structure, here
			var buttons = $('li', $(this) );

			slides.not(':eq(0)').hide();
			slides.eq(0).addClass('selected');
			if(opts.auto) {
				slideshow = setInterval( function(){ 
					slide = (slides.length-1 == slide) ? 0 : ++slide;
					showSlide(slide); 
				}, opts.pause);
			}

			buttons.mouseover(function(){
				clearInterval(slideshow);
				slide = buttons.index( $(this) );				
				showSlide(slide);
			});

			function showSlide(i) {
				slides.stop(true)
					.eq(i).fadeTo('slow', 1).addClass('selected')
					.siblings().fadeTo('slow', 0).removeClass('selected');
			}

		});
	}

	// DIL gallery
	$.fn.gallery = function(opts) {
		opts = $.extend({
			auto:false
		},
		opts || {});
		return this.each(function() {

			var jumps = $('.jump', this );
/*
			<a href="#" class="prev">◄</a>
			<a href="#image-1" class="jump active">●</a>
			<a href="#image-2" class="jump">●</a>
			<a href="#image-3" class="jump">●</a>
			<a href="#image-4" class="jump">●</a>
			<a href="#image-5" class="jump">●</a>
			<a href="#" class="next">▶</a>
*/

			var art = $('.art');
			art.eq(0).fadeIn(1000).addClass('active');
			jumps.eq(0).addClass('active');

			jumps.click(function(e){
				e.preventDefault();
				var show = $(this).attr('href');
				$('.art.active').fadeOut('slow').removeClass('active');
				$(show).fadeIn('slow').addClass('active');

				jumps.removeClass('active');
				$(this).addClass('active');
			});

			$('.prev', this ).click(function(e){ e.preventDefault(); prev(); });
			$('.next', this ).click(function(e){ e.preventDefault(); next(); });
			$(document).keydown(function(e){
			    if (e.keyCode == 37) prev();
			    if (e.keyCode == 39) next();
			});

			function prev() { try { $('.jump.active').prev().click(); } catch(err) { } }
			function next() { try { $('.jump.active').next().click(); } catch(err) { } }

		});
	}