JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
<div id="gallwrapper" class="img-polaroid">
<div class="masterimage img-polaroid">

         <img src="http://placehold.it/400x300/dbdacc/222&text=Holding" alt="">

</div>

        <div class="carousel slide span12" id="myCarousel">
            <div class="carousel-inner">
              <div class="item active">
                    <ul class="thumbnails">
                        <li class="span2">
                            <div class="img-polaroid">
                                <img src="http://placehold.it/70x70/803080/fff&text=photo1" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="img-polaroid">
                                 <img src="http://placehold.it/70x70/843080/fff&text=photo2" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="img-polaroid">
                                 <img src="http://placehold.it/70x70/E48285/fff&text=photo3" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="img-polaroid">
                                 <img src="http://placehold.it/70x70/5DB9F2/fff&text=photo4" alt="">
                            </div>
                        </li>
                    </ul>
              </div>
              <div class="item">
                    <ul class="thumbnails">
                        <li class="span2">
                            <div class="img-polaroid">
                          <img src="http://placehold.it/70x70&text=photo5" alt="">
                            </div>
                        </li>
                        <li...

CSS

img {
    width:100%;
    height:auto;
}
div.masterimage{min-height:240px;max-width:400px;text-align:center;overflow:hidden;white-space: nowrap;}
div.masterimage img{min-height:280px;width:auto}
#gallwrapper{width:370px;height:400px;background:#f4f3ec}
#myCarousel{position:relative;width:370px;
margin:24px 0px 30px 0px;float:none}

#myCarousel .carousel-control {
  position: absolute;
  top: -4%;

  width: 20px;
  height: 20px;
  margin-top: -20px;
  font-size: 40px;
  font-weight: 300;
  line-height: 11px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 2px solid #d8d8d8;
  -webkit-border-radius: 23px;
     -moz-border-radius: 23px;
          border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
#myCarousel .thumbnails{margin-left:10px;}
#myCarousel .thumbnails li{margin:2px;cursor:pointer;width:23.3%}

JavaScript

$(window).load(function(){
$('[id^="myCarousel"]').carousel();

    
    
    $(".thumbnails  img").click(function (){   
        var getPic = $(this).attr("src");
    $(".masterimage").fadeOut(function() {
           $(".masterimage img").attr("src", getPic);
                $(this).fadeIn(300);
            
            });
        
         
        
        });
        
    
});