danwoods/jQuery_slider(with_video).css

## jQuery_slider(with_video).css
#slide_show{
      background-color: black;
      width: 605px;
      height: 340px;
      }
    .slide_show_button{
      position: relative;
      border: 0px;
      }
    #slide{
      display: block;
      margin-left: auto;
      margin-right: auto;
      }
    #slide_show-prev_btn{
      margin-right: 530px;
      height: 150px;
      background: url('http://www.somesite.org/wp-content/uploads/2010/08/arrow_left.png') no-repeat scroll top right;
      margin-top: -90px;
      cursor: pointer;
      display: none;
      }
    #slide_show-next_btn{
      margin-left: 500px;
      height: 150px;
      background: url('http://www.somesite.org/wp-content/uploads/2010/08/arrow_right.png') no-repeat scroll top right;
      margin-top: -145px;
      cursor: pointer;
      display: none;
      }

## jQuery_slider(with_video).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>jQuery Slide Show with Video</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>

<div id="slide_show">
    <div id="slide_holder">
      <a id="slide_link" href="#">
        <img id="slide" src="http://www.somesite.org/images/somesitelogo.png" alt="test" />
      </a>
    </div>
    <div id="slide_show-prev_btn" class="slide_show_button"></div>
    <div id="slide_show-next_btn" class="slide_show_button"></div>
  </div>

</body>
</html>

## jQuery_slider(with_video).js
//declare vars
    $('<img/>').attr('src', "http://www.somesite.org/images/somesitelogo.png");
    var playing = 'false';
    var slide_show_action;
    var slides = ["http://c2462402.cdn.cloudfiles.rackspacecloud.com/JayZslide.jpg",/* "http://c2462402.cdn.cloudfiles.rackspacecloud.com/slide2a.jpg", "http://c2462402.cdn.cloudfiles.rackspacecloud.com/slide3a.jpg", */"http://www.somesite.org/wp-content/uploads/2010/10/ElectionCenter.jpg"/*,"http://c2462402.cdn.cloudfiles.rackspacecloud.com/slide4d.jpg"*/];
    var slide_links = ["#",/* "http://www.somesite.org/register-to-vote/", "http://www.somesite.org/volunteer/", */"http://www.somesite.org/election-center"/*,"http://action.somesite.org/t/10416/p/salsa/web/common/public/content?content_item_KEY=2924"*/];
    var cur_slide = 0;
    var video_html = '<iframe id="video_iframe" src="http://player.vimeo.com/video/15776423?autoplay=1" width="605" height="340" frameborder="0"></iframe>';

    //preload images
    $.each(slides, function (i, val) {
      $('<img/>').attr('src', val);
    });

    $(document).ready(function() {
//comment out following lines to have functional slide-show, otherwise, it becomes a single video
      /*$('#slide').attr('src', slides[0]);
      //video functionality
      $('#slide').bind('click', function(){
        $('#slide').hide();
        $('#slide_holder').append(video_html);
      });*/
      if(playing == 'false'){
        $('#slide').attr('src', slides[(cur_slide++%slides.length)]);
        slide_show_action = setInterval(nextSlide, 5000);
        playing = 'true';
      }

      function nextSlide(){
        if(playing == 'false'){
          $('#video_iframe').remove();
          $('#slide').attr('src', slides[(cur_slide++%slides.length)]);
        }
        else{
          $('#slide').fadeOut('slow', function(){
            $('#slide').attr('src', slides[(cur_slide++%slides.length)]);
            }
          );
        }
        $('#slide_link').attr('href', slide_links[cur_slide%slides.length]);
        $('#slide').fadeIn('slow', function(){
          playing = 'true';
          }
        );
      };

      function prevSlide(){
        if(cur_slide == 1)
          cur_slide = 5;
        if(playing == 'false'){
          $('#video_iframe').remove();
          prev_slide = (cur_slide - 2)%slides.length;
          $('#slide').attr('src', slides[(prev_slide)]);
          cur_slide = prev_slide + 1;
        }
        else{
          $('#slide').fadeOut('slow', function(){
            prev_slide = cur_slide - 2;
            $('#slide').attr('src', slides[(prev_slide%slides.length)]);
            cur_slide = prev_slide + 1;
            }
          );
        }

        $('#slide_link').attr('href', slide_links[(cur_slide-2)%slides.length]);
        $('#slide').fadeIn('slow', function(){
          playing = 'true';
          }
        );
      };

      //video functionality
      $('#slide').bind('click', function(){
        if(((cur_slide+1)%slides.length) == 0){
          window.clearInterval(slide_show_action);
          playing = 'false';
          load_video();
        }
      });

      //button functionality
      $('.slide_show_button').hide();

      $('#slide_show, #video_iframe, .slide_show_button').bind('mouseenter', function(){
        $('.slide_show_button').fadeIn('slow');
        window.clearInterval(slide_show_action);
      });

      $('#video_iframe, #slide_show').bind('mouseleave', function(){
        $('.slide_show_button').fadeOut('slow');
        if(playing == 'true'){
          slide_show_action = setInterval(nextSlide, 5000);
        }
      });

      $('#slide_show-next_btn').bind('click', function(){
        nextSlide();
      });

      $('#slide_show-prev_btn').bind('click', function(){
        prevSlide();
      });

      function load_video(){
        $('#slide').hide();
        $('#slide_holder').append(video_html);
      };

    });
	#slide_show{
	background-color: black;
	width: 605px;
	height: 340px;
	}
	.slide_show_button{
	position: relative;
	border: 0px;
	}
	#slide{
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	#slide_show-prev_btn{
	margin-right: 530px;
	height: 150px;
	background: url('http://www.somesite.org/wp-content/uploads/2010/08/arrow_left.png') no-repeat scroll top right;
	margin-top: -90px;
	cursor: pointer;
	display: none;
	}
	#slide_show-next_btn{
	margin-left: 500px;
	height: 150px;
	background: url('http://www.somesite.org/wp-content/uploads/2010/08/arrow_right.png') no-repeat scroll top right;
	margin-top: -145px;
	cursor: pointer;
	display: none;
	}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
	<title>jQuery Slide Show with Video</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>

	<body>

	<div id="slide_show">
	<div id="slide_holder">
	<a id="slide_link" href="#">
	<img id="slide" src="http://www.somesite.org/images/somesitelogo.png" alt="test" />
	</a>
	</div>
	<div id="slide_show-prev_btn" class="slide_show_button"></div>
	<div id="slide_show-next_btn" class="slide_show_button"></div>
	</div>

	</body>
	</html>
	//declare vars
	$('<img/>').attr('src', "http://www.somesite.org/images/somesitelogo.png");
	var playing = 'false';
	var slide_show_action;
	var slides = ["http://c2462402.cdn.cloudfiles.rackspacecloud.com/JayZslide.jpg",/* "http://c2462402.cdn.cloudfiles.rackspacecloud.com/slide2a.jpg", "http://c2462402.cdn.cloudfiles.rackspacecloud.com/slide3a.jpg", /"http://www.somesite.org/wp-content/uploads/2010/10/ElectionCenter.jpg"/,"http://c2462402.cdn.cloudfiles.rackspacecloud.com/slide4d.jpg"*/];
	var slide_links = ["#",/* "http://www.somesite.org/register-to-vote/", "http://www.somesite.org/volunteer/", /"http://www.somesite.org/election-center"/,"http://action.somesite.org/t/10416/p/salsa/web/common/public/content?content_item_KEY=2924"*/];
	var cur_slide = 0;
	var video_html = '<iframe id="video_iframe" src="http://player.vimeo.com/video/15776423?autoplay=1" width="605" height="340" frameborder="0"></iframe>';

	//preload images
	$.each(slides, function (i, val) {
	$('<img/>').attr('src', val);
	});

	$(document).ready(function() {
	//comment out following lines to have functional slide-show, otherwise, it becomes a single video
	/*$('#slide').attr('src', slides[0]);
	//video functionality
	$('#slide').bind('click', function(){
	$('#slide').hide();
	$('#slide_holder').append(video_html);
	});*/
	if(playing == 'false'){
	$('#slide').attr('src', slides[(cur_slide++%slides.length)]);
	slide_show_action = setInterval(nextSlide, 5000);
	playing = 'true';
	}

	function nextSlide(){
	if(playing == 'false'){
	$('#video_iframe').remove();
	$('#slide').attr('src', slides[(cur_slide++%slides.length)]);
	}
	else{
	$('#slide').fadeOut('slow', function(){
	$('#slide').attr('src', slides[(cur_slide++%slides.length)]);
	}
	);
	}
	$('#slide_link').attr('href', slide_links[cur_slide%slides.length]);
	$('#slide').fadeIn('slow', function(){
	playing = 'true';
	}
	);
	};

	function prevSlide(){
	if(cur_slide == 1)
	cur_slide = 5;
	if(playing == 'false'){
	$('#video_iframe').remove();
	prev_slide = (cur_slide - 2)%slides.length;
	$('#slide').attr('src', slides[(prev_slide)]);
	cur_slide = prev_slide + 1;
	}
	else{
	$('#slide').fadeOut('slow', function(){
	prev_slide = cur_slide - 2;
	$('#slide').attr('src', slides[(prev_slide%slides.length)]);
	cur_slide = prev_slide + 1;
	}
	);
	}

	$('#slide_link').attr('href', slide_links[(cur_slide-2)%slides.length]);
	$('#slide').fadeIn('slow', function(){
	playing = 'true';
	}
	);
	};

	//video functionality
	$('#slide').bind('click', function(){
	if(((cur_slide+1)%slides.length) == 0){
	window.clearInterval(slide_show_action);
	playing = 'false';
	load_video();
	}
	});

	//button functionality
	$('.slide_show_button').hide();

	$('#slide_show, #video_iframe, .slide_show_button').bind('mouseenter', function(){
	$('.slide_show_button').fadeIn('slow');
	window.clearInterval(slide_show_action);
	});

	$('#video_iframe, #slide_show').bind('mouseleave', function(){
	$('.slide_show_button').fadeOut('slow');
	if(playing == 'true'){
	slide_show_action = setInterval(nextSlide, 5000);
	}
	});

	$('#slide_show-next_btn').bind('click', function(){
	nextSlide();
	});

	$('#slide_show-prev_btn').bind('click', function(){
	prevSlide();
	});

	function load_video(){
	$('#slide').hide();
	$('#slide_holder').append(video_html);
	};

	});