JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<script src="http://www.golfbrowser.com/js/jquery-ui-1.8.13.custom.min.js" type="text/javascript" charset="utf-8"></script>

<div id="gallery">
    <div id="P29" class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00764s-968x400.jpg);"></div><div id="P28" class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00762s-968x400.jpg);"></div><div id="P27" class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00759s-968x400.jpg);"></div> 
</div>
<br><br>
<img id="t29" class="thumbs" src="http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00764s-155x122.jpg" height="62" width="80"/><img id="t28" class="thumbs" src="http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00762s-155x122.jpg" height="62" width="80"/><img id="t27" class="thumbs" src="http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00759s-155x122.jpg" height="62" width="80"/>

CSS

#gallery {
     width:680px;
    height:380px;
    position:relative;
    background-color:#222;
}
#gallery .cornerimg {
    width:680px;
    height:380px;
    position:absolute;
    background-position:0px 0px;
    background-repeat:no-repeat;
    background-color:none;
    opacity:0.0;filter:alpha(opacity=0);
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    -moz-border-top-right-radius:10px;
    -moz-border-bottom-right-radius:10px;
}
#gallery .cornerimgfocus {
    opacity:1.0 !important;filter:alpha(opacity=100) !important;
}
.thumbs {
    border:1px solid #FFF;
    opacity:0.4;filter:alpha(opacity=40);
    margin-bottom:8px;
    margin-top:8px;
    cursor:pointer
}

JavaScript

function propSlide(slideName){
    $('.cornerimg').removeClass('cornerimgfocus',2000);
    $('#'+slideName).addClass('cornerimgfocus',2000);
}

var slides = $('.cornerimg');
var firstSlide = $('.cornerimg:first');
var lastSlide = $('.cornerimg:last');

$('.thumbs').live('click',function(){
    $.each(slides,function (index,value){
        var me = $(this);
        
        
        var me = $(this).attr('id').replace('t','P');
        propSlide(me);
        //$('body').append(me); 
    });
});

/*
$(document).ready(function(){
    var slideShow;
    var slidefirst = $('.thumbs:first');
    
    $('.thumbs').click(function() {
        
        var final = $('.cornerimg').last().attr('id').replace('t','');
        var slide = $(this).attr('id').replace('t','');
        $('.cornerimg').removeClass('cornerimgfocus',2000);
        $('#P' + slide).addClass('cornerimgfocus',2000);
        clearTimeout(slideShow);
        slideShow = setTimeout(function() {
            if ($('#P' + slide) == final) {
                $(slidefirst).click();
            }
            else {
                $('.thumbs').click();
            }
            
        }, 5000);
        
    });
    $('.thumbs:first').click();
});
*/