JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<script src="http://geoffboult.co.uk/clients/fiddle/script.js"></script>
<script src="http://geoffboult.co.uk/clients/fiddle/jquery.flexisel.js"></script>
<link rel="stylesheet" href="http://geoffboult.co.uk/clients/fiddle/flexisel-style.css">
<!--banner inner-->
<div id="bannerInner">
    <!--main image-->
    <div id="mainImage">
        <img id="largeImage" class="active" src="http://geoffboult.co.uk/clients/fiddle/Images/banner1_large.jpg">
        <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner2_large.jpg">
        <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner3_large.jpg">
        <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner4_large.jpg">
        <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner5_large.jpg">
        <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner6_large.jpg">
        <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner7_large.jpg">
    </div>
    <!--main image-->
</div>
<!--/banner inner-->
<!--banner filmstrip-->
<div id="bannerStrip">
    <!--thumbnail images-->
    <div id="thumbs">
        <ul class="carousel">
            <li>
                <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner1_thumb.jpg" />
            </li>
            <!-- THUMBNAILS ALL CROPPED AT 150X60px -->
            <li>
                <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner2_thumb.jpg" />
            </li>
            <li>
                <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner3_thumb.jpg" />
            </li>
            <li>
                <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner4_thumb.jpg" />
            </li>
            <li>
                <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner5_thumb.jpg" />
            </li>
            <li>
                <img src="http://geoffboult.co.uk/clients/fiddle/Images/banner6_thumb.jpg" />
            </li>
            <li>
         ...

CSS

#bannerInner {
    width:960px;
    height:450px;
    margin:0 auto;
    background:#860a31;
}
#bannerStrip {
    width:100%;
    height:60px;
    position:absolute;
    left:0;
    bottom:0;
    background:url(../Images/filmstrip_BG.png) repeat;
    padding:15px 0;
}
#mainImage {
    margin:15px 0 0 15px;
    float:left;
    position:relative;
}
#thumbs {
    width:850px;
    height:60px;
    margin:0 auto;
    position:relative;
}
#mainImage img {
    position:absolute;
    z-index:1;
    background-color:white
}
#mainImage img.active {
    z-index:3
}
#mainImage img.next {
    z-index:2
}
.cycler_controls {
    position:absolute;
    top:0;
    left:0;
    z-index:4
}
ul.cycler_controls, #thumb ul {
    list-style-type:none;
    margin:0;
}
ul.cycler_controls li, #thumbs ul li {
    display:inline-block;
}
.cycler_controls a {
    margin-left:15px;
    display:block;
}
#thumbs .cycler_controls a img, #thumbs ul li img {
    width:150px;
    height:60px;
    position:relative
}
body.home #bannerCont {
    background:url(../Images/homebackground.png) top left repeat;
}
.nbs-flexisel-item img.activeThumbnail {
    border:3px solid #860a31;
    padding:0!important;
}
.nbs-flexisel-item img {
    padding:3px!important;
}

JavaScript

$('#thumbs img').first().addClass('activeThumbnail'); //add class to the first thumbnail as it's currently active
$('#thumbs').delegate('img', 'click', function () {
    var $this=$(this)
    $('#largeImage').fadeOut(1000, function () {
        $('#largeImage').attr('src', $this.attr('src').replace('thumb', 'large'));
        $('#thumbs img').removeClass('activeThumbnail'); //remove class from all thumbnails
        $this.addClass('activeThumbnail'); //add it to the clicked one
        $('#largeImage').fadeIn();
    });
});