Website Development Resources
CHouseLive

Although shadowbox is not the easiest overlay script to set up, it is possibly one of the most powerful and adaptable pre-written scripts available.

This demonstration only utilizes the most basic functions of shadowbox and uses the jquery library.

<div class="gallery">
  <h2>Animals of the Kruger National Park</h2>
  <ul>
    <li>
      <a href="slides/african-buffalo.jpg" title="African Buffalo" rel="shadowbox[park]">
        <img src="thumbs/african-buffalo.jpg" width="180" height="180" alt="African Buffalo" />
      </a>
    </li>
    <li>
      <a href="slides/african-elephant.jpg" title="African Elephants" rel="shadowbox[park]">
        <img src="thumbs/african-elephant.jpg" width="180" height="180" alt="Elephants" />
      </a>
    </li>
    <li>
      <a href="slides/african-wild-dog.jpg" title="African Wild Dog" rel="shadowbox[park]">
        <img src="thumbs/african-wild-dog.jpg" width="180" height="180" alt="African Wild Dog" />
      </a>
    </li>
    <li>
      <a href="slides/impala.jpg" title="Impala" rel="shadowbox[park]">
        <img src="thumbs/impala.jpg" width="180" height="180" alt="Impala" />
      </a>
    </li>
    <li>
      <a href="slides/lioness.jpg" title="Lioness" rel="shadowbox[park]">
        <img src="thumbs/lioness.jpg" width="180" height="180" alt="Lioness" />
      </a>
    </li>
    <li>
      <a href="slides/vervet-monkey.jpg" title="Vervet Monkeys" rel="shadowbox[park]">
        <img src="thumbs/vervet-monkey.jpg" width="180" height="180" alt="Vervet Monkeys" />
      </a>
    </li>
  </ul>
  <p>Photographs compliments of <a href="http://www.sxc.hu/">stock.xchng</a></p>
</div>

1. Attach the shadowbox css file

   <link rel="stylesheet" href="scripts/shadowbox/shadowbox.css" type="text/css" />

2. Style the thumbnails

   .gallery{
     width: 550px;
     padding: 10px;
     margin: 20px auto;
     line-height: 1em;
     color:#000;
   }
   
   .gallery h2{
     padding:5px;
     margin:0;
     text-align:center;
     color: #000;
     font-size: 2em;
   }
   
   .gallery p{
     clear:both;
     padding:5px;
     margin:0;
     text-align:center;
   }
   
   .gallery p a, .gallery p a:visited{
     color: #000;
   }
   
   .gallery ul{
     margin:0;
     padding:0;
     font-size:1em;
     list-style:none;
   }
   
   .gallery li{
     padding:0;
     margin:0;
     height:180px;
     width:180px;
     float: left;
     display: inline;
     background:#000;
   }
   
   .gallery li img{
     border: none;
     padding: 0;
     margin: 0;
   }
   
   .gallery li a{
     text-decoration: none;
     display: block;
     filter:alpha(opacity=70);
     -moz-opacity:0.7;
     -khtml-opacity: 0.7;
     opacity: 0.7;
   }
   
   .gallery li a:hover{
     filter:alpha(opacity=100);
     -moz-opacity:1;
     -khtml-opacity:1;
     opacity:1;
   }

1. Attach the JQuery library

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

   You can also download your own copy of the JQuery library.

2. Attach the shadowbox script

   <script src="scripts/shadowbox/shadowbox.js" type="text/javascript"></script>

3. Initialize the shadowbox script

   <script type="text/javascript">
   Shadowbox.init();
   </script>

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org