Advanced Listings

by Preston Badeer

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700"></script>
<div class="listing">
    <div class="left">
        <img class="thumb active" src="https://www.proxibid.com/AuctionImages/10195/83903/FullSize/104.jpg" alt/>
        <img class="thumb" src="https://www.proxibid.com/AuctionImages/10195/83903/FullSize/104-3.jpg" alt/>
        <img class="thumb" src="https://www.proxibid.com/AuctionImages/10195/83903/FullSize/104-5.jpg" alt/>
        <img class="thumb" src="https://www.proxibid.com/AuctionImages/10195/83903/FullSize/104-4.jpg" alt/>
    </div>
    <div class="right">
         <h3 class="title">1967 Fiat Dino Spider by Pininfarina</h3>
 <span class="author">Posted on 9/4/14 at 6pm by <a href="#">Silverstone Auctions</a></span>

        <div class="description">
            <div class="short"> <a class="more">more</a>

            </div>
            <div class="long hide">The Fiat Dino was introduced at the Turin Motor Show in 1966 alongside the Dino Berlinetta GT, later to become the Ferrari Dino 246. Powered by a shared four camshaft, two litre, V6 engine, both cars benefited from a racing pedigree that went back to Ferrari's Dino 166P sports-racing unit and their 246 Grand Prix engine.
                <br>
                <br>However, when Ferrari decided to race in Formula 2 with its new V6 engine designed by Enzo Ferrari's son Dino, the company had a problem. Under homologation rules, they were required to build enough cars to satisy the rules for racing. Ferrari could not build enough cars to homologate the Dino so a deal was struck with Fiat for a joint venture and the Dino was born.
                <br>
                <br>The Dino model was built as either a Bertone designed coupé or a sleek spider from Pininfarina. However, it is the spiders, both in 2.0 and 2.4 Litre guise, that have become most sought after amongst collectors. In the words of Sports Car Market: "The Spider is one of the prettiest designs to emerge...

CSS

body {
    width: 720px;
    margin: 0 auto;
    font-size: 14px;
    font-family:"Roboto", Helvetica, Arial, sans-serif;
    font-weight: 100;
    color: white;
}
a {
    cursor: pointer;
}
.listing:nth-child(1) {
    background: url('https://www.proxibid.com/AuctionImages/10195/83903/FullSize/104-2.jpg') center center;
}
.listing:nth-child(2) {
    background: url('https://www.proxibid.com/AuctionImages/10195/83903/FullSize/101-8.jpg') center center;
}
.listing {
    height: 200px;
    margin: 15px 0;
}
.listing, .listing .bidnow, .listing .description {
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
.listing:hover {
    -moz-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.75);
}
.listing .right {
    height: 100%;
    margin-left: 300px;
    background: rgba(0, 0, 0, 0.5);
}
.listing .left {
    float: left;
    background: rgba(255, 255, 255, 0.75);
    height: 100%;
    width: 300px;
    overflow: hidden;
    margin-right: 1em;
    position: relative;
}
.listing .description {
    font-size: 13px;
    font-weight: 300;
    padding-right: 1em;
    margin: 1em 0;
}
.listing .description a {
    color: #2083b5;
}
.listing .description .short {
    max-height: 72px;
}
.listing .description .long {
    padding: 14px;
    background: black;
    z-index: 9999;
    position: relative;
}
.listing .title {
    font-size: 1.5em;
    margin: 0;
    padding: 6px 0 0 0;
    font-weight: 400;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
}
.listing .thumb {
    max-height: 220px;
    min-width: 300px;
    display: none;
    position: absolute;
}
.listing .thumb.active {
    display: block;
}
.listing .author, .listing .author a {
    font-size: 12px;
    color: lightgray;
}
.listing .bidnow {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    display: inline-block;
    padding:...

JavaScript

var nextImage = function (container) {
    var a = container.find('.thumb.active');
    var n = a.next('.thumb');

    if (!n.length) {
        n = container.find('.thumb:first');
    }

    a.fadeOut('slow').removeClass('active');
    n.fadeIn('slow').addClass('active');
};

var time = Math.random() * (7000 - 5000) + 5000;
setInterval(function () {
    $('.listing').each(function () {
        nextImage($(this));
    });
}, time);

$('.listing').each(function () {
    var desc = $(this).find('.description');
    var longtext = desc.children('.long').text();
    var short = desc.children('.short');

    short.prepend(longtext.substr(0, 250) + "...");
});

$('a.more').each(function () {
    $(this).on('click', function () {
        $('.long').addClass('hide');
        $('.short').removeClass('hide');
        $('.actions').show();
        var desc = $(this).parent().parent();
        desc.children('.short').addClass('hide');
        desc.children('.long').removeClass('hide');
        desc.next('.actions').hide();
    });
});

$('a.less').each(function () {
    $(this).on('click', function () {
        var desc = $(this).parent().parent();
        desc.children('.long').addClass('hide');
        desc.children('.short').removeClass('hide');
        desc.next('.actions').show();
    });
});