Test Case Boilerplate

Fork this way...

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Car Drivers</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="icon" type="icon/x-icon" href="icon.ico" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="gallery.js"></script>
</head>
<body




<div id="shadow" >
    <div id="warp">
        <div id="link">
            <div id="linkimg"> <img alt="header" src="assets/images/header.gif" /> </div>
            <div id="linkwords">
                <div id="margin"> <a id="word" class="color" href="index.html">HOME</a> <a class="color" href="index.html">NEWS</a> <a id="word3" class="color" href="index.html">EVENTS</a> <a id="word4" class="color" href="index.html">REVIEWS</a> <a id="word5" class="color" href="index.html">FORUM</a> <a id="word6" class="color" href="index.html">CONTACT US</a> <a id="word7" class="color" href="index.html">LINKS</a> </div>
            </div>
        </div>
        <div id="center">
            <div id="img"> <img class="car" id="lightbox-panel" alt="mazda 6" src="http://neurontest.site90.com/assets/images/car1.gif" /> <img class="car" alt="Niesan" src="assets/images/car2.gif" /> </div>
            <div class="gallery">
                <div id="image_holder"> <img class="close_img" src="assets/images/x.gif" /> <img class="gallery_img" src="" />
                    <!--<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took</p>-->
                </div>
            </div>
            <div id="gallery_holder"> </div>
            <div id="words">
                <div id="upper_links">
         ...

CSS

* {
    padding: 0;
    margin: 0;
}
h3 {
    color: #1c4c82;
}
/**** Gallery ****/

#gallery_holder {
    z-index: 50;
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    background: #000 no-repeat scroll;
    opacity:0.9;
    left: 0;
    top: 0;
}
#image_holder {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    padding: 10px;
    background: #fff;
    color: #000;
}
#image_holder > p {
    margin-top: 10px;
    font-size: 10pt;
    text-align: justify;
}
#image_holder > img {
    cursor: pointer;
}
.gallery_img {
    z-index: 2000;
}
/*
.gallery_img, .close_img {
    border: 10px solid #FFF;
    position: absolute;
    z-index:2000;
    left:50%;
    top: 50%;
    cursor: pointer;
}*/
.close_img {
    z-index: 2500;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
}
.gallery, #gallery_holder {
    display: none;
}

/**** Gallery Close ****/

#warp, #link {
    margin: auto;
    margin-top: 10px;
    text-align: left;
    width: 780px;
    color: #fff;
    font-family: Arial;
}
#link {
    background-color: #000;
}
#linkwords {
    margin: auto;
    background: #06C;
    height: 26px;
}
#margin {
    padding-top: 5px;
    font-size: 9pt;
}
#img {
    width: 234px;
    text-align: right;
    float: left;
}
#words {
    width: 506px;
    float: right;
}
#copy {
    text-align: right;
    padding-top: 550px;
}
.car {
    margin-top: 40px;
    cursor: pointer;
}
.color {
    color: #fff;
    font: airal;
    text-decoration: none;
    position: relative;
    margin-left: 55px;
}
.title, .text {
    margin-top: 10px;
}
.text, .CHRwebs {
    color: #666;
}
.links_up {
    margin : 10px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    color: #06F;
    cursor: pointer;
}

/*
#word {
    margin: 0 0 0 17px;
}
#word2 {
    margin: 0 0 0 57px;
}
#word3 {
    margin: 0 0 0 80px;
}
#word4 {
    margin: 0 0 0 79px;
}
#word5 {
    margin: 0 0 0 65px;
}
#word6 {
    margin: 0 0 0...

JavaScript

//Gallery 1.0 Script


$(document).ready(function()
{

    var image_thum, image_full, image_width, width_red, height_red, total_height;

    function image_setting()
    {

        image_thum = image_thum.split('/');
        image_full = image_thum[image_thum.length - 1];
        $('.gallery_img').attr('src', 'http://neurontest.site90.com/assets/images/' + image_full);
        total_height = $('.gallery_img').height;
        image_width = $('.gallery_img').width;
        height_red = total_height / 2;
        width_red = (image_width + 20) / 2;

        /*$("#image_holder").css(
        {
            'margin-left': -width_red,
            'margin-top': -height_red
        });
        $("#image_holder p").css(
        {
            'width': image_width
        });*/
        $('#gallery_holder').css("position", 'fixed');

        $('#gallery_holder, .gallery').fadeIn(200);

    }

    $('.car').click(function()
    {
        image_thum = $(this).attr('src');
        image_setting();
    });

    $("#gallery_holder, .close_img").click(function()
    {
        $('.gallery, #gallery_holder').fadeOut(100);
    });

});