code.Atomic8Ball.com

Image Gallery Lightbox Usage Instructions

  1. Between the <head> & </head> tags add the following: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.atomic8ball.com/lightbox/js/jquery.lightbox-0.5.js"></script>
    <link rel="Stylesheet" type="text/css" href="http://code.atomic8ball.com/lightbox/css/jquery.lightbox-0.5.css" />
  2. Insert the following onto the page that will have the lightbox effect:
    <script type="text/javascript">
       $(function () {
          $('#gallery a').lightBox();
       });
    </script>
  3. You're HTML for the image gallery should be as follows: <div id="gallery">
      <a href="images/01-full.png" title="You can specify this text on the title tag of the a.">
        <img src="images/01.png" alt="This is the alt text." /></a>
      <a href="images/02-full.png" title="You can specify this text on the title tag of the a.">
        <img src="images/02.png" alt="This is the alt text." /></a>
      <a href="images/03-full.png" title="You can specify this text on the title tag of the a.">
        <img src="images/03.png" alt="This is the alt text." /></a>
      <a href="images/04-full.png" title="You can specify this text on the title tag of the a.">
        <img src="images/04.png" alt="This is the alt text." /></a>
      <a href="images/05-full.png" title="You can specify this text on the title tag of the a.">
        <img src="images/05.png" alt="This is the alt text." /></a>
    </div>