Stackoverflow 2012-03-14

by john_s

HTML

<section id="allthmbs">
    <ul id="thmblist">
        <li class="t">
            <a class="s2ifrm" href="http://www.pixelfreak.com/z/w/19/piece.html" target="view">
                <img src="http://www.pixelfreak.com/z/w/19/c.png" class="tc" alt="" />
                <img src="http://www.pixelfreak.com/z/w/19/g.png" class="tg" alt="health game screen" />
            </a>
            <img src="http://www.pixelfreak.com/z/i/brk.png" class="brk" alt="" />
        </li>
        <li class="t">
            <a class="s2ifrm" href="http://www.pixelfreak.com/z/w/18/piece.html" target="view">
                <img src="http://www.pixelfreak.com/z/w/18/c.png" class="tc" alt="" />
                <img src="http://www.pixelfreak.com/z/w/18/g.png" class="tg" alt="house upgrades" />
            </a>
            <img src="http://www.pixelfreak.com/z/i/brk.png" class="brk" alt="" />
        </li>
        <li class="t">
            <a class="s2ifrm" href="http://www.pixelfreak.com/z/w/17/piece.html" target="view">
                <img src="http://www.pixelfreak.com/z/w/17/c.png" class="tc" alt="" />
                <img src="http://www.pixelfreak.com/z/w/17/g.png" class="tg" alt="airport" />
            </a>
            <img src="http://www.pixelfreak.com/z/i/brk.png" class="brk" alt="" />
        </li>
        <li class="t">
            <a class="s2ifrm" href="http://www.pixelfreak.com/z/w/16/piece.html" target="view">
                <img src="http://www.pixelfreak.com/z/w/16/c.png" class="tc" alt="" />
                <img src="http://www.pixelfreak.com/z/w/16/g.png" class="tg" alt="hong kong & shanghai" />
            </a>
            <img src="http://www.pixelfreak.com/z/i/brk.png" class="brk" alt="" />
        </li>
        <li class="t">
            <a class="s2ifrm" href="http://www.pixelfreak.com/z/w/15/piece.html" target="view">
                <img src="http://www.pixelfreak.com/z/w/15/c.png" class="tc" alt="" />
                <img...

CSS

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-family:'Arvo';
    font-style: italic;
    color: #515959;
    font-size: 10px;
    line-height: 0px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
body {
    background-: #edf0f0;
}
ul {
    list-style-type: none;
}
#page {
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    position: absolute;
    text-align: center;
}
#bar {
    width: 256px;
    height: 100%;
    margin-left: -1px;
    text-align: left;
}
#vln1 {
    width: 1px;
    height: 100%;
    margin-right: -1px;
    float: left;
    background: rgba(0, 13, 13, 0.3);
    position: relative;
    z-index: 20;
}
#vln2 {
    width: 1px;
    height: 100%;
    margin-left: -1px;
    float: right;
    background: rgba(0, 13, 13, 0.3);
    position: relative;
    z-index: 20;
}
#vln3 {
    width: 2px;
    height: 100%;
    margin-left: -2px;
    float: right;
    left: 2px;
    background: rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 20;
}
header {
    height: 122px;
    background: #3a4040;
    position: absolute;
    z-index: 10;
}
#mnbg {
    float: left;
    margin-right: -256px;
}
ul.tbs li {
    cursor: pointer;
    height: 27px;
    position: absolute;
}
ul.tbs li.active {
    opacity: 0;
    cursor: default;
}
#tbgal-h {
    position: absolute;
    z-index: 8;
}
#tbgal {
    position: absolute;
    z-index: 9;
}
#tbgal:hover {
    opacity: 0;
}
#tbabt-h {
    left: 51px;
    position: absolute;
    z-index: 8;
}
#tbabt {
    left: 51px;
    position: absolute;
    z-index: 9;
}
#tbabt:hover {
    opacity: 0;
}
#cnx {
    float: right;
    right: 2px;
    position: relative;
}
#cnct-h {
    float: right;
    margin-left: -21px;
    z-index: 8;
}
#cnct {
    float: right;
    z-index: 9;
}
#cnct:hover {
    opacity: 0;
}
.tbbd {
    background: #3a4040;
    clear: both;
}
.tb {
   ...

JavaScript

var $allthmbs = $('#allthmbs');
        $thumbList = $('#thmblist'),
        $thumbItems = $thumbList.children('li.t'),
        imageCount = $thumbItems.length,
        selectedIndex = -1;

    function selectImage(index) {
        selectedIndex = index;
        var $item = $thumbItems.eq(index);

        // Hide the iframe and change its "src".
        $('#llstrtn').hide().prop('src', $item.find('a').attr('href'));

        // Scroll the selected item into view.
        var allthmbsTop = $allthmbs.offset().top,
            allthmbsBottom = allthmbsTop + $allthmbs.innerHeight(),
            itemTop = $item.offset().top,
            itemBottom = itemTop + $item.height();
        if (itemTop < allthmbsTop) {
            $allthmbs.scrollTop($allthmbs.scrollTop() + itemTop - allthmbsTop);
        } else if (itemBottom > allthmbsBottom) {
            $allthmbs.scrollTop($allthmbs.scrollTop() + itemBottom - allthmbsBottom);
        }

        // Move the yellow hightlight.
        $('#selection').css({ top: -($thumbList.height() - (index * 100)) + 'px' });

        $('#output').text('Showing index: ' + index);
    }

    // Hanlde arrow keys.
    $(document).keydown(function (e) {
        if (e.keyCode == 40) {
            selectImage((selectedIndex + 1) % imageCount);
            return false;
        } else if (e.keyCode == 38) {
            selectImage(((selectedIndex - 1) + imageCount) % imageCount);
            return false;
        }
    });

    // Handle item clicks.
    $thumbList.find('a').click(function (e) {
        e.preventDefault();
        selectImage($(this).closest('li.t').index());
    });

    // Cause the iframe to fade-in when it it changed.
    $('#llstrtn').load(function() { $(this).fadeIn(400); });

    // Select the first item                               
    selectImage(0);