JSFiddle - React, Tailwind, and code Playground

by bouillard

HTML

<!-- mini-info --> 

  <div class="mini-info">

    <a href="1/">

     <img src="http://youstart.ru/sample/olo/img/1/1.jpg" alt="int1" /></a> 

  </div>

  <!-- /mini-info -->



        <!-- mini-info --> 

  <div class="mini-info">

    <a href="1/">

     <img src="http://youstart.ru/sample/olo/img/2/1.jpg" alt="int2" /></a> 

  </div>

  <!-- /mini-info -->



        <!-- mini-info --> 

  <div class="mini-info">

    <a href="1/">

     <img src="http://youstart.ru/sample/olo/img/3/1.jpg" alt="int3" /></a> 

  </div>

  <!-- /mini-info -->



        <!-- mini-info --> 

  <div class="mini-info">

    <a href="1/">

     <img src="http://youstart.ru/sample/olo/img/4/1.jpg" alt="int4" /></a> 

  </div>

  <!-- /mini-info -->  



 <!-- bcase -->

 <div id="bcase">



  <div id="b1">

    <div class="b"></div>

    <div class="b"></div>

    <div class="b"></div>  

    <div class="b"></div>

  </div>     



  <div id="b2">

    <div class="b"></div>

    <div class="b"></div>

    <div class="b"></div>

    <div class="b"></div>

  </div>



  <div id="b3">

    <div class="b"></div>

    <div class="b"></div>

    <div class="b"></div>

    <div class="b"></div>

  </div>    



  <div id="b4">

    <div class="b"></div>

    <div class="b"></div>

    <div class="b"></div> 

    <div class="b"></div>

  </div> 



 </div>    

 <!-- /bcase -->





 <!-- slice -->

 <div id="slice">



 <div id="p1">

   <div class="p"><img src="http://youstart.ru/sample/olo/img/1/1.jpg" alt="" /></div>

   <div class="p"><img src="http://youstart.ru/sample/olo/img/1/2.jpg" alt="" /></div>

   <div class="p"><img src="http://youstart.ru/sample/olo/img/1/3.jpg" alt="" /></div>  

   <div class="p"><img src="http://youstart.ru/sample/olo/img/1/4.jpg" alt="" /></div>

 </div>     



 <div id="p2">

   <div class="p"><img src="http://youstart.ru/sample/olo/img/2/1.jpg" alt="" /></div>

   <div class="p"><img src="http://youstart.ru/sample/olo/img/2/2.jpg" alt="" /></div>

 ...

CSS

/* CSS Document */

     * {
     margin:0px;
     padding:0px; 
     }
  
     body {
     background-color: #FFFFFF;
     font-family: Arial, Helvatica, san-serif;
     font-size: 0.9em;
     line-height: 1.3em;
     color:#545454;
     text-align: center;
     }
     
     img {
     border:0px;
     }
     
     p {
     margin:10px 0;
     }
     
     
     #container {
     margin: 70px auto;
     width: 1000px;
     overflow: hidden;
     zoom: 1;
     }
     
       .mini-info {
       float:left;
       width: 220px;
       height: 220px;
       margin: 10px;
       box-shadow: 0 0 20px #545454;
       }
       
       .mini-info img {
       width: 220px;
       height: 220px;
       }
     
     
     
     /*links*/
     a {
     color:#3D6BC6;
     }
     
     a:hover {
     color:#FF4E7B;
     }
     
     
     
     /*clr*/
     
     .clr {
     clear: both;
     }       
     
       .b {
       width:10%;
       height:100%;
       float:left;
       z-index:7;   
       }
       
       .b.on {   
        z-index:17;         
       }
     
     #bcase > div {
     margin:10px;
     z-index: 5;
     display: none;
     position: absolute;
     }
     
       #bcase > div.active {
       display: block;  
       }
       
     #slice {
     display: none;
     }

JavaScript

$('.mini-info').each(function(i) {
    $(this).attr({'id': 'n'+parseInt(i+1,10)});
    wid = $(this).width();             
    hed = $(this).height(); 
  });
     
  $('#bcase > div').each(function(i) {
    $(this).attr({
    'class': 'n'+parseInt(i+1,10)
    }).css({
    'width' : wid,
    'height' : hed
    });
    
    
  }); 
  
  $('#bcase > div > div').each(function(i) {
    $(this).attr({
     'id': 'a'+parseInt(i+1,10)
    });
  }); 
  
  $('#slice > div').each(function(i) {
    $(this).attr({
     'class': 'n'+parseInt(i+1,10)
    });
  });
  
  $('#slice > div > div').each(function(i) {
    $(this).attr({
     'class': 'w a'+parseInt(i+1,10)
    });
  });   
  
  $('.mini-info').live('mouseenter', function() {   
  var xex = $(this).position().left;
  var yey = $(this).position().top; 
  sim = $('img', this).attr('src');
  kuda = $('a', this).attr('href');


  $('#bcase div.'+$(this).attr('id')).addClass('active').css({
    'top' : yey,
    'left' : xex
  }).attr({'onclick': 'location.href="'+kuda+'"'})
  .on('mouseleave', function() {
    $(this).removeClass('active'); 
    $('.mini-info#'+$(this).attr('class')+' img').attr({'src': sim});
  });

  var omg = $('#bcase div.'+$(this).attr('id')+' div.b').length;

  $('#bcase div.'+$(this).attr('id')+' div.b').css({
    'width': wid/omg
   });
});     
  
  
  $('div.b').hover(function() {
    $(this)
    .toggleClass('on')
    .css({            
     'cursor': 'pointer'
    });
    
    var im = $('#slice div.'+$(this).attr('id')+' img').attr('src');
    $('.mini-info#'+$(this).parent('div[class]').attr('class').split(' ')[0]+' img').attr({
      'src' : im
    });
   
    
  });     
  
  
   $('#slice div.w').each(function() {
       oneimg = $('img', this).first().attr('src');
      
       $('.mini-info#'+$(this).attr('class')+ 'img').each(function() {
          $('img', this).attr({'src' : oneimg});
       });   
      
   });