Jquery Lightbox Onload

This is the same vesion as the previous lightbox only it works onload

I added the following 2 lines

$("#thumb a #first").mouseover();//added to create the onload

$("#thumb a #first").click();//added to create the onload

Click the thumbs to open in a lightbox

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

Result

click to enlarge
  • click to enlarge
  • click to enlarge
  • click to enlarge
  • click to enlarge
 <!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Jquery Lightbox Onload</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/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-repeat: repeat-x;
  background-color: #333333;
  }
  ul {
  margin: 0px;
  padding: 0px;
  }
  #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: 12000;
  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 img {
  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: 900px;
  }
  #thumb li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  }
  .thumb {
  -moz-box-shadow: -5px 5px 5px 1px #464747;
  -webkit-box-shadow: -5px 5px 5px 1px #464747;
  box-shadow: -5px 5px 5px 1px #464747;
  margin-bottom:10px;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  }
  img {
  border: none;
  margin: 0;
  padding: 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: 0px;
  }
  #title {
  width: 980px;
  top: 50px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  position: absolute;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000;
  }
  #popup{
  width:980px;
  top: 50px;
  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;
  }
  </style>
  </head>
  <body>
  <script type="text/javascript">
  
  $(document).ready(function() {
  
  $("#thumb a").on('mouseover touchend', function()  {// mouseover the thumbs
  var x=$("img", this).attr("src");// x= the src value of the image the mouse is over
  title=$("img",this).attr("title");
  
  
  $("#image").attr("src", x);//swap the main image with the value of the thumb
  })
  $("#thumb a").click(function() { // if we click on the thumb
  
  $('#popup').hide().one('load', function() {//load the pop up div with the main image and hide it
  }).attr('src', image);
  
  thumbs=$("img", this).attr("src");//thumbs is the src value
  var paths = [thumbs];
  $.each(paths, function(i, path) {
  var img = new Image();
  $(img).load(function() {
  var width = img.width,
  height = img.height;
  
  $("#popup").hide().fadeIn(2000).html("<img src='images/x.png' alt= 'click to close' title='click to close' id='x'/><img src=" + thumbs + " width="+width+" height="+height+" id='large' title='Click The X To Close' alt='Click The X To Close' /> <p id='title'><strong>"+title+"</strong></p>");
  $("#title").css("top", height+50);
  $("#thumbs").css("left", width);
  });
  img.src = path;
  });
  $("#bg").css("display", "block");
  $("#bg").css("opacity", "0.8");
  $("#popup").addClass("overlay");
  // $("#content").css("visibility","hidden");
  })
  
  $("#x").live("click", function() {
  $("#content").css("visibility","visible");
  $("body").css("background", "#333333");
  $("#bg").css("display", "none");
  
  $('#popup').hide();
  });
  });
  </script>
  <div id="bg"></div>
  <div id="position">
  <div id="popup"></div>
  </div>
  <div id="content"> <img src="images/image1.jpg" title="click image to enlarge" alt="click to enlarge" width="582" height="360"  id="image"/>
  <ul id="thumb">
  <li><a href="#"><img class="thumb" src="images/image1.jpg" alt="click to enlarge" title="Car 1" width="135" height="100" /></a></li>
  <li><a href="#"><img class="thumb" src="images/image2.jpg" alt="click to enlarge" title="Car 2" width="135" height="100" /></a></li>
  <li><a href="#"><img class="thumb" src="images/image3.jpg" alt="click to enlarge" title="Car 3" width="135" height="100" /></a></li>
  <li><a href="#"><img class="thumb" src="images/image4.jpg" alt="click to enlarge" title="Motorcycle" width="135" height="100" /></a></li>
  </ul>
  </div>
  </body>
  </html>
  <!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Jquery Lightbox</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/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-repeat: repeat-x;
  background-color: #333333;
  }
  ul {
  margin: 0px;
  padding: 0px;
  }
  #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: 12000;
  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 img {
  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: 900px;
  }
  #thumb li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  }
  .thumb {
  -moz-box-shadow: -5px 5px 5px 1px #464747;
  -webkit-box-shadow: -5px 5px 5px 1px #464747;
  box-shadow: -5px 5px 5px 1px #464747;
  margin-bottom:10px;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  }
  img {
  border: none;
  margin: 0;
  padding: 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: 0px;
  }
  #title {
  width: 980px;
  top: 50px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  position: absolute;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000;
  }
  #popup{
  width:980px;
  top: 50px;
  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;
  }
  </style>
  </head>
  <body>
  <script type="text/javascript">
  
  $(document).ready(function() {
  
  $("#thumb a").on('mouseover touchend', function()  {// mouseover the thumbs
  var x=$("img", this).attr("src");// x= the src value of the image the mouse is over
  title=$("img",this).attr("title");
  
  
  $("#image").attr("src", x);//swap the main image with the value of the thumb
  })
  $("#thumb a").click(function() { // if we click on the thumb
  
  $('#popup').hide().one('load', function() {//load the pop up div with the main image and hide it
  }).attr('src', image);
  
  thumbs=$("img", this).attr("src");//thumbs is the src value
  var paths = [thumbs];
  $.each(paths, function(i, path) {
  var img = new Image();
  $(img).load(function() {
  var width = img.width,
  height = img.height;
  
  $("#popup").hide().fadeIn(2000).html("<img src='images/x.png' alt= 'click to close' title='click to close' id='x'/><img src=" + thumbs + " width="+width+" height="+height+" id='large' title='Click The X To Close' alt='Click The X To Close' /> <p id='title'><strong>"+title+"</strong></p>");
  $("#title").css("top", height+50);
  $("#thumbs").css("left", width);
  });
  img.src = path;
  });
  $("#bg").css("display", "block");
  $("#bg").css("opacity", "0.8");
  $("#popup").addClass("overlay");
  // $("#content").css("visibility","hidden");
  })
  
  $("#x").live("click", function() {
  $("#content").css("visibility","visible");
  $("body").css("background", "#333333");
  $("#bg").css("display", "none");
  
  $('#popup').hide();
  });
  $("#thumb a #first").mouseover();//added to create the onload 
  $("#thumb a #first").click();//added to create the onload
  });
  </script>
  <div id="bg"></div>
  <div id="position">
  <div id="popup"></div>
  </div>
  <div id="content"> <img src="images/image1.jpg" title="click image to enlarge" alt="click to enlarge" width="582" height="360"  id="image"/>
  <ul id="thumb">
  <li><a href="#"><img class="thumb" src="images/image1.jpg" alt="click to enlarge" title="Car 1" width="135" height="100" /></a></li>
  <li><a href="#"><img class="thumb" src="images/image2.jpg" alt="click to enlarge" title="Car 2" width="135" height="100" /></a></li>
  <li><a href="#"><img class="thumb" src="images/image3.jpg" alt="click to enlarge" title="Car 3" width="135" height="100" /></a></li>
  <li><a href="#"><img class="thumb" src="images/image4.jpg" alt="click to enlarge" title="Motorcycle" width="135" height="100" /></a></li>
  </ul>
  </div>
  </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 Lightbox effect works the same as the previous one only 2 lines added to create the onload

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