gSlider - Интерактивный слайдер

Слайдер изображений, при клике по картинке происходит её увеличение с возможностью пролистывания уже увеличенных изображений слайдера. Также имеется возможность подписи. Работает во всех браузерах.

HTML

   <div id="container">
        <div id="slider">
            <div>
                <img alt="Sarah Michelle Gellar" src="images/1.jpg" />
                <a href="#" target="_blank">Sarah Michelle Gellar</a>
            </div>
            <div>
                <img alt="Jennifer Joanna Aniston" src="images/2.jpg" />
                <a href="#" target="_blank">Jennifer Joanna Aniston</a></div>
            <div>
                <img alt="Jennifer Marie Morrison" src="images/3.jpg" />
                <a href="#" target="_blank">Jennifer Marie Morrison</a></div>
            <div>
                <img alt="Michelle Christine Trachtenberg" src="images/4.jpg" />
                <a href="#" target="_blank">Michelle Christine Trachtenberg</a></div>
            <div>
                <img alt="Olivia Wilde" src="images/5.jpg" />
                <a href="#" target="_blank">Olivia Wilde</a></div>
            <div>
                <img alt="Avril Ramona Lavigne" src="images/6.jpg" />
                <a href="#" target="_blank">Avril Ramona Lavigne</a></div>
            <div>
                <img alt="Megan Denise Fox" src="images/7.jpg" />
                <a href="#" target="_blank">Megan Denise Fox</a></div>
            <div>
                <img alt="Jennifer Love Hewitt" src="images/8.jpg" />
                <a href="#" target="_blank">Jennifer Love Hewitt</a></div>               
            <div>
                <img alt="Olivia Wilde" src="images/9.jpg" />
                <a href="#" target="_blank">Olivia Wilde</a></div>                  
        </div>
    </div>

CSS

#container
        {
            margin-top:20px;
            
        }
        #slider
        {
            margin: 0 auto;
            text-align:center;
        }
#slider div a{
    font-size: 12px;
    color: white;
    font-weight: bold;
    float:left;
    padding:10px;
    text-decoration:none;
}    
#slider div a:hover{color:#F1D5CA;}    
        
.image-slider
{
    width: 834px;
    height: 172px;
    background:url(../images/bg.png) no-repeat;
    padding: 14px 16px 0px 16px;
    position: relative; /*overflow: hidden;*/
    font-family:Helvetica, Arial, Tahoma, sans-serif;
}
.image-slider-back, .image-slider-forward
{
    float: left;
    width: 23px;
    height: 98px; /*background-color: #121212;*/
    color: White;
    position: relative;
    top:12px;
    cursor: pointer;
}
.image-slider-back
{
    background-image: url(../arrow-left.png);
    background-repeat: no-repeat;
    background-position: left;
}
.image-slider-forward
{
    background-image: url(../arrow-right.png);
    background-repeat: no-repeat;
    background-position: right;
}
.image-slider-contents
{
    width: 755px;
    height: 154px;
    float: left;
    position: relative;
    overflow: hidden;
}
/*.image-slider-contents .contents-wrapper > div*/
.image-slider-contents .contents-wrapper
{
    position: absolute;
    padding-top: 18px;
}
.image-slider-contents .outer
{
    background-color: White;
    float: left;
    width: 156px;
    height: 86px;
    margin:0px 15px;
    cursor:pointer;
}
.image-slider-contents .outer > div
{
    width: 156px;
    height: 86px;
}
.image-slider-contents .outer > div img
{
    width: 152px;
    height: 82px;
    margin: 2px;
    margin-top: -30px;
}
/*.image-slider-contents > div > div
{
    position: relative;
    float: left;
    width: 156px;
    height: 86px;
    margin-left: 6px;
    margin-right: 6px;
    padding: 2px;
    background-color: White;
}*/
.image-slider-contents img
{
    width: 156px;
    height: 86px;
}
.hidden
{
    display: none;
}
.visible
{
    display: block;
}
.thumbnail-active
{
    filter: alpha(opacity=100);
    opacity: 1.0;
    cursor: pointer;
}
.thumbnail-inactive
{
    filter: alpha(opacity=20);
    opacity: 0.2;
    cursor: pointer;
}
.preview
{
    position: absolute;
    width: 450px;
    height: 260px;
    background-color: White;
    padding: 2px;
    border: solid 1px black;
}
.preview .img-large
{
    width: 450px; /*height: 216px;*/
    z-index: 1000;
}
.preview .img-large .left
{
    position: absolute;
    left: 8px;
    top: 100px;
    width: 16px;
    height: 24px;
    z-index: 1000;
    background: url(../arrow-left.png);
    cursor:pointer;
}
.preview .img-large .right
{
    position: absolute;
    left: 428px;
    top: 100px;
    z-index: 1000;
    width: 16px;
    height: 24px;
    background: url(../arrow-right.png);
    cursor:pointer;
}
.preview .close
{
    position: absolute;
    left: 434px;
    top: -16px;
    width: 32px;
    height: 34px;
    background: url(../images/close.png);
    float: right;
    cursor: pointer;
    z-index: 2000;
}
.preview .img-large img
{
    width: 450px;
    height: 260px;
}
.preview .label
{
    width: 434px;
    line-height: 30px;
    float: left;
    position: absolute;
    top: 216px;
    color: Black;
    padding: 8px;
    background-color: White;
    text-align:left;
    font-weight:bold;
    font-size:13px;
}
.outer
{
    border: solid 1px black;
}
.outer.active
{
    border: solid 1px #B56161;
    background-color: #F1D5CA;
}
.outer.active div span
{
    color: #F1D5CA;
}

JS

Вызывается так:

$(document).ready(function() {
  $('#slider').slider({ speed: 500 });
});

И конечно же не забываем подключить jQuery в шапке.