Jquery You Tube Video Lightbox

While working with You Tube Videos I experimented with Lightboxes and joined them to make a You Tube Video Lightbox that scrolls

Hope this helps you, please leave comments below on how to improve this or just to say Hi

Result

left right
<!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Video Lightbox Demo</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  /*lightbox css*/
   
  body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  color: #000000;
  text-align: center;
  margin: 0px;
  padding: 0px;
  background-color: #333333;
  }
  ul {
  margin: 0px;
  padding: 0px;
  }
  #container {
  width: 980px;
  color: #fff;
  padding: 0px;
  text-align: left;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  }
  #content {
  width: 100%;
  text-align: justify;
  line-height: 1.4;
  margin: 0px;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
  }
  #position {
  position: absolute;
  margin: 0px;
  padding: 0px;
  }
  #thumbs {
  position: absolute;
  z-index: 500;
  height: 42px;
  width: 42px;
  overflow: hidden;
  padding: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  left: 760px;
  top: 0px;
  border: none;
  margin-top: 0px;
  z-index: 1001;
  }
  .overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 50;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
  }
  .overlay iframe {
  border-top-width: 42px;
  border-right-width: 10px;
  border-bottom-width: 42px;
  border-left-width: 10px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #FF0000;
  border-right-color: #FF0000;
  border-bottom-color: #FF0000;
  border-left-color: #FF0000;
  margin: 0px;
  padding: 0px;
  }
  #thumb {
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  margin-left: 0;
  overflow: visible;
  width: 9000000px;
  }
  #thumb li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  }
  .thumb {
  margin-bottom: 10px;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  }
  img, iframe {
  border: none;
  padding: 0;
  border: none;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  }
  #image {
  margin-bottom: 10px;
  -moz-box-shadow: -5px 5px 5px 1px #464747;
  -webkit-box-shadow: -5px 5px 5px 1px #464747;
  box-shadow: -5px 5px 5px 1px #464747;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 200px;
  }
  #popup {
  posistion: relative;
  width: 980px;
  top: 100px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  }
  img#x {
  position: absolute;
  left: 460px;
  top: 0px;
  border: none;
  }
  #bg {
  background-color: #000000;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.9;
  z-index: 50;
  display: none;
  }
  /*scroller css*/
  #slidesWrapper {
  width: 580px;
  height: 225px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  overflow: hidden;
  }
  .slides {
  position: relative;
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  width: 140px;
  height: 500px;
  }
  .slides div {
  width: 900000px;
  margin: 0px;
  padding: 0px;
  }
  .slides img {
  margin: 0px;
  padding: 0px;
  }
  .slideImg {
  width: 145px;
  height: 140px;
  margin: 0px;
  padding: 0px;
  display: inline;
  float: left;
  }
  img {
  border: none;
  margin: 0px;
  padding: 0px;
  }
  #left {
  position: absolute;
  top: 125px;
  left: 200px;
  z-index: 1500;
  margin: 0px;
  padding: 0px;
  }
  #right {
  position: absolute;
  top: 125px;
  left: 300px;
  z-index: 1500;
  margin: 0px;
  padding: 0px;
  }
  button {
  color: #FFF;
  background-color: #F00;
  border: thin double #000;
  }
  </style>
  </head>
  <body>
  <script type="text/javascript">
  
  $(document).ready(function() {
  //lightbox     / //////////////////////////////////////////////////////////////////////////////lghtbox
  
  $("#thumb li").on('mouseover touchend', function()  {// mouseover the thumbs use li because anchor does not validate with the iframe and just thumb always gives the first image
  var x=$("iframe", this).attr("src");// x= the src value of the image the mouse is over
  $("#image").attr("src", x);//swap the main image with the value of the thumb
  })
  $("button").click(function() { // if we click on the any of the 4 buttons
  var x=$("#image").attr("src");
  $('#popup').hide().one('load', function() {//load the pop up div with the main image and hide it
  }).attr('src', x);
  
  $("#popup").hide().fadeIn(2000).html('<img src="images/x.png" alt= "click to close" title="click to close" id="x"/><iframe width="760" height="415" src='+x+'></iframe>');
  $("#bg").css("display", "block");
  $("#bg").css("opacity", "0.8");
  $("#popup").addClass("overlay");
  });
  
  $("#x").live("click", function() {
  $("#content").css("visibility","visible");
  $("body").css("background", "#333333");
  $("#bg").css("display", "none");
  $('#popup').hide();
  });
  //scroller//////////////////////////////////////////////////////////////////////////////////Scroller//////////////////////////////////////
  $('iframe').each(function(){///////this makes u tube video accept its z-index;
  var url = $(this).attr("src");
  var char = "?";
  if(url.indexOf("?") != -1)
  var char = "&";
  $(this).attr("src",url+char+"wmode=transparent");
  });
  
  //////ends u tube z-index
  
  $("#left").mouseover(function(){//prevents flashing of arrows when images change
  $("#left").show();
  $("#right").show();
  });
  
  $("#right").mouseover(function(){//prevents flashing of arrows when images change
  $("#left").show();
  $("#right").show();
  });
  
  $(".slideImg").mouseover(function(){// pause on over image slider
  clearInterval(interval);
  $("#left").show();
  $("#right").show();
  });
  $(".text").mouseover(function(){// pause on over of none image slider
  clearInterval(interval);
  $("#left").show();
  $("#right").show();
  });
  
  $("#slidesWrapper").mouseover(function(){//so the images will display if not over an image
  $("#left").show();
  $("#right").show();
  });
  
  $(".slideImg").mouseout(function(){// hide the arrows when not over the image
  $("#left").hide();
  $("#right").hide();
  interval = setInterval(function() {// animate every 5 seconds
  right();//call the right function
  }, 5000);
  });
  
  $(".text").mouseout(function(){// hide the arrows when not over the text
  $("#left").hide();
  $("#right").hide();
  interval = setInterval(function() {// animate every 5 seconds
  right();//call the right function
  }, 5000);
  }); 
  
  $("#slidesWrapper").mouseout(function(){//so the images will display if not over an image
  $("#left").hide();
  $("#right").hide();
  }); 
  
  function right() {// create a function for the right arrow clicked and the animation on load
  if(count<slideImg) {//if slide number is less than number of slides continue
  $(".slides").animate({"left": "-=145px"}, "slow");// move the slide
  
  if(count ==slideImg-3) {
  $("#but4").hide();
  }
  
  if(count ==slideImg-2) {
  $("#but3").hide();
  } 
  
  if(count ==slideImg-1) {
  $("#but2").hide();
  } 
  
  count++; //increase the slide number by 1
  }
  
  else {// if were on the last slide
  var back=slideImg * 145 - 145; //calculate the pixels to animate
  $(".slides").animate({"left": "+="+back+"px"}, "fast");// go to first slide
  count=1;// set the slide number to 1
  $("#but2").show();
  $("#but3").show();
  $("#but4").show();
  } 
  }// end right function
  
  var count=1;// get the first slide number
  var slideImg=$(".slideImg").length;//number of slides with clas slideShow
  var text=$(".text").length;// number of slides not images
  slideImg=slideImg+text;// total number of slides
  //Start Animation
  
  var interval = setInterval(function() {// animate every 5 seconds
  right();//call the right function
  }, 5000);
  //end animation
  
  //if arrows are clicked
  $("#right").click(function(){
  right(); // call the right arrow function
  });
  
  $("#left").click(function(){// if left arrow is clicked
  if(count>1) {// if the slide is not the first
  count--;// let the slide number decrease by 1
  $(".slides").animate({"left": "+=145px"}, "slow");// move the slide
  }
  });

});
  </script>
  <div id="container">
  <div id="bg"></div>
  <div id="position">
  <div id="popup"></div>
  </div>
  <div id="content">
  <iframe width="580" height="365" src="http://www.youtube.com/embed/ycIGszw3k0k" id="image" ></iframe>
  <div id="slidesWrapper"> <img src="images/left.png" width="100" alt="left" id="left" /> <img src="images/right.png" width="100" alt="right" id="right" />
  <div class="slides">
  <div>
  <ul id="thumb">
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/ycIGszw3k0k" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/86rADgWp2XA" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/p-t0Ph38cWM" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/LImzNPH3J4Y" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/ycIGszw3k0k" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/86rADgWp2XA" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/p-t0Ph38cWM" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/LImzNPH3J4Y" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/ycIGszw3k0k" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/86rADgWp2XA" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/p-t0Ph38cWM" class="slideImg thumb"></iframe>
  </li>
  <li>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/LImzNPH3J4Y" class="slideImg thumb"></iframe>
  </li>
  </ul>
  </div>
  </div>
  <button id="but1" style="position: absolute; top:10px;left:13px;z-index:10;">Open In Lightbox</button>
  <button id="but2" style="position: absolute; top:10px;left:160px;z-index:10;">Open In Lightbox</button>
  <button id="but3" style="position: absolute; top:10px;left:310px;z-index:10;">Open In Lightbox</button>
  <button id="but4" style="position: absolute; top:10px;left:450px;z-index:10;">Open In Lightbox</button>
  </div>
  </div>
  <!--content--> 
  </div>
  <!--container-->
  </body>
  </html>

Available For Freelance:

I Am Available To Work For You Freelance, See My Skills To See If I Can Help Your Project, If I Can Help You Then Please Contact Me.

My Rates Start From £180 A Day, Discount Prices For Regular Clients And Work Over 3 Days.

I Started To Learn Web Development In 2008, I Did A Few Open University Courses While Working Full Time In The Building Trade, I Managed To Get A Diploma With Distinction

Request A Tutorial

If You Are Having Difficulty With The Development Of Your Website Or If You Are Just Starting Out Leaning Web Development And You Think I Can Help You Then Request A Tutorial, I Will Do My Best To Help You

I Dont Charge For My Services If I Can Help You With Something That Can Be Be Fixed In A Few Minutes.

Advertise

If You Would Like To Advertise On This Site Then Please Contact Me, You Will Be Given Login Details To See What Day And Where Clicks Have Come From.

Prices Start From £10 A Month With Discounts Available For 3 Months Or More.

You Can Either Send Me The Banner Advert That You Have Designed Or From £10 I Can Have Designer Design A Banner For You.

Please Leave A Comment And A Rating





image

Chris Gave This Code Rating

this is a lightbox effect that works with youtube videos please leave feedback and rate

www.codecaven.co.uk image 5.00 out of 5 based on 1 ratings. 1 user reviews.

My Skills:

  • PHP 5
  • JavaScript
  • Jquery
  • XHTML Validation
  • KineticJS
  • HTML5
  • CSS - CSS3
  • SEO

My Social Networks:

  • facebook youtube